fix(dashboard): Reduce data loaded by product details page (#9991)

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,
         }

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 items-start gap-x-4 gap-y-3 xl:grid xl:grid-cols-[minmax(0,_1fr)_440px]">
-        <div className="flex w-full flex-col gap-y-3">
+        <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} />
           })}

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"
+)