From 49f3f0cd549a0656feb53f53d2bd5d1488247202 Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Sun, 10 Nov 2024 08:33:36 +0100
Subject: [PATCH] fix(dashboard): Reduce data loaded by product details page
 (#9991)

---
 .../src/components/common/section/section-row.tsx         | 2 +-
 .../layout/pages/two-column-page/two-column-page.tsx      | 8 ++++----
 .../src/routes/products/product-detail/constants.ts       | 5 ++++-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/admin/dashboard/src/components/common/section/section-row.tsx b/packages/admin/dashboard/src/components/common/section/section-row.tsx
index 27879e533b..3ebbc5b5b8 100644
--- a/packages/admin/dashboard/src/components/common/section/section-row.tsx
+++ b/packages/admin/dashboard/src/components/common/section/section-row.tsx
@@ -13,7 +13,7 @@ export const SectionRow = ({ title, value, actions }: SectionRowProps) => {
   return (
     <div
       className={clx(
-        `text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4`,
+        `text-ui-fg-subtle grid w-full grid-cols-2 items-center gap-4 px-6 py-4`,
         {
           "grid-cols-[1fr_1fr_28px]": !!actions,
         }
diff --git a/packages/admin/dashboard/src/components/layout/pages/two-column-page/two-column-page.tsx b/packages/admin/dashboard/src/components/layout/pages/two-column-page/two-column-page.tsx
index 5791e6126d..8a8c800f20 100644
--- a/packages/admin/dashboard/src/components/layout/pages/two-column-page/two-column-page.tsx
+++ b/packages/admin/dashboard/src/components/layout/pages/two-column-page/two-column-page.tsx
@@ -70,12 +70,12 @@ const Root = <TData,>({
   const showExtraData = showJSON || showMetadata
 
   return (
-    <div className="flex flex-col gap-y-3">
+    <div className="flex w-full flex-col gap-y-3">
       {before.map((Component, i) => {
         return <Component {...widgetProps} key={i} />
       })}
-      <div className="flex flex-col gap-x-4 gap-y-3 xl:flex-row xl:items-start">
-        <div className="flex w-full flex-col gap-y-3">
+      <div className="flex w-full flex-col items-start gap-x-4 gap-y-3 xl:grid xl:grid-cols-[minmax(0,_1fr)_440px]">
+        <div className="flex w-full min-w-0 flex-col gap-y-3">
           {main}
           {after.map((Component, i) => {
             return <Component {...widgetProps} key={i} />
@@ -87,7 +87,7 @@ const Root = <TData,>({
             </div>
           )}
         </div>
-        <div className="flex w-full max-w-[100%] flex-col gap-y-3 xl:mt-0 xl:max-w-[440px]">
+        <div className="flex w-full flex-col gap-y-3 xl:mt-0">
           {sideBefore.map((Component, i) => {
             return <Component {...widgetProps} key={i} />
           })}
diff --git a/packages/admin/dashboard/src/routes/products/product-detail/constants.ts b/packages/admin/dashboard/src/routes/products/product-detail/constants.ts
index 8e38951fe4..bb615be74c 100644
--- a/packages/admin/dashboard/src/routes/products/product-detail/constants.ts
+++ b/packages/admin/dashboard/src/routes/products/product-detail/constants.ts
@@ -1,3 +1,6 @@
 import { getLinkedFields } from "../../../extensions"
 
-export const PRODUCT_DETAIL_FIELDS = getLinkedFields("product", "*categories")
+export const PRODUCT_DETAIL_FIELDS = getLinkedFields(
+  "product",
+  "*categories,-variants"
+)