From 412bba50babdf20ac4008e1896f5e7a438ef8505 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Tue, 14 Jan 2025 13:42:03 +1100
Subject: [PATCH] Slight tweak to <DetailsTable> (#8890)

* Slight tweak to <DetailsTable>

* Responsive layout for user settings

* Make menu links responsive

* Update <FactCollection />

* Update part pricing panels
---
 .../src/components/details/Details.tsx        | 19 ++++++++++++-------
 .../src/components/items/MenuLinks.tsx        |  7 ++++++-
 .../components/settings/FactCollection.tsx    | 10 +++++++++-
 .../Settings/AccountSettings/UserPanel.tsx    |  2 +-
 .../src/pages/part/PartSchedulingDetail.tsx   |  2 +-
 .../src/pages/part/PartStocktakeDetail.tsx    |  2 +-
 .../pages/part/pricing/BomPricingPanel.tsx    |  2 +-
 .../pages/part/pricing/PriceBreakPanel.tsx    |  2 +-
 .../part/pricing/PricingOverviewPanel.tsx     |  2 +-
 .../part/pricing/PurchaseHistoryPanel.tsx     |  2 +-
 .../pages/part/pricing/SaleHistoryPanel.tsx   |  2 +-
 .../part/pricing/SupplierPricingPanel.tsx     |  2 +-
 .../part/pricing/VariantPricingPanel.tsx      |  2 +-
 13 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/src/frontend/src/components/details/Details.tsx b/src/frontend/src/components/details/Details.tsx
index 52883d1242..531317f31b 100644
--- a/src/frontend/src/components/details/Details.tsx
+++ b/src/frontend/src/components/details/Details.tsx
@@ -378,17 +378,22 @@ export function DetailsTableField({
 
   return (
     <Table.Tr style={{ verticalAlign: 'top' }}>
+      <Table.Td style={{ minWidth: 75, lineBreak: 'auto', flex: 2 }}>
+        <Group gap='xs' wrap='nowrap'>
+          <InvenTreeIcon
+            icon={field.icon ?? (field.name as InvenTreeIconType)}
+          />
+          <Text style={{ paddingLeft: 10 }}>{field.label}</Text>
+        </Group>
+      </Table.Td>
       <Table.Td
         style={{
-          maxWidth: '50'
+          lineBreak: 'anywhere',
+          minWidth: 100,
+          flex: 10,
+          display: 'inline-block'
         }}
       >
-        <InvenTreeIcon icon={field.icon ?? (field.name as InvenTreeIconType)} />
-      </Table.Td>
-      <Table.Td style={{ minWidth: 75, lineBreak: 'auto', flex: 2 }}>
-        <Text>{field.label}</Text>
-      </Table.Td>
-      <Table.Td style={{ lineBreak: 'anywhere', minWidth: 100, flex: 10 }}>
         <FieldType field_data={field} field_value={fieldValue} />
       </Table.Td>
       <Table.Td style={{ width: '50' }}>
diff --git a/src/frontend/src/components/items/MenuLinks.tsx b/src/frontend/src/components/items/MenuLinks.tsx
index 9f882e22a5..531b2a81bc 100644
--- a/src/frontend/src/components/items/MenuLinks.tsx
+++ b/src/frontend/src/components/items/MenuLinks.tsx
@@ -53,7 +53,12 @@ export function MenuLinks({
         <Divider />
         <StylishText size='md'>{title}</StylishText>
         <Divider />
-        <SimpleGrid cols={2} spacing={0} p={3}>
+        <SimpleGrid
+          cols={{ base: 1, '400px': 2 }}
+          type='container'
+          spacing={0}
+          p={3}
+        >
           {visibleLinks.map((item) => (
             <Tooltip
               key={`menu-link-tooltip-${item.id}`}
diff --git a/src/frontend/src/components/settings/FactCollection.tsx b/src/frontend/src/components/settings/FactCollection.tsx
index 633a92c6d4..ac0e9e2a93 100644
--- a/src/frontend/src/components/settings/FactCollection.tsx
+++ b/src/frontend/src/components/settings/FactCollection.tsx
@@ -10,7 +10,15 @@ export function FactCollection({
   minItems?: number;
 }>) {
   return (
-    <SimpleGrid cols={minItems} spacing='xs'>
+    <SimpleGrid
+      cols={{
+        base: 1,
+        sm: Math.min(2, minItems),
+        md: Math.min(3, minItems),
+        lg: minItems
+      }}
+      spacing='xs'
+    >
       {items.map((item, index) => (
         <FactItem
           key={`${index}-${item.value}`}
diff --git a/src/frontend/src/pages/Index/Settings/AccountSettings/UserPanel.tsx b/src/frontend/src/pages/Index/Settings/AccountSettings/UserPanel.tsx
index ffea0c136e..918418452c 100644
--- a/src/frontend/src/pages/Index/Settings/AccountSettings/UserPanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AccountSettings/UserPanel.tsx
@@ -9,7 +9,7 @@ export function AccountContent() {
 
   return (
     <div>
-      <SimpleGrid cols={2} spacing='md'>
+      <SimpleGrid cols={{ base: 1, md: 2 }} spacing='md'>
         <Container w='100%'>
           <AccountDetailPanel />
         </Container>
diff --git a/src/frontend/src/pages/part/PartSchedulingDetail.tsx b/src/frontend/src/pages/part/PartSchedulingDetail.tsx
index bf5caa310d..1ec87409d4 100644
--- a/src/frontend/src/pages/part/PartSchedulingDetail.tsx
+++ b/src/frontend/src/pages/part/PartSchedulingDetail.tsx
@@ -243,7 +243,7 @@ export default function PartSchedulingDetail({
           <Text>{t`There is no scheduling information available for the selected part`}</Text>
         </Alert>
       )}
-      <SimpleGrid cols={2}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
         <InvenTreeTable
           url={apiUrl(ApiEndpoints.part_scheduling, part.pk)}
           tableState={table}
diff --git a/src/frontend/src/pages/part/PartStocktakeDetail.tsx b/src/frontend/src/pages/part/PartStocktakeDetail.tsx
index b51c3f32d0..3c56f45ac2 100644
--- a/src/frontend/src/pages/part/PartStocktakeDetail.tsx
+++ b/src/frontend/src/pages/part/PartStocktakeDetail.tsx
@@ -209,7 +209,7 @@ export default function PartStocktakeDetail({
       {generateReport.modal}
       {editStocktakeEntry.modal}
       {deleteStocktakeEntry.modal}
-      <SimpleGrid cols={2}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
         <InvenTreeTable
           url={apiUrl(ApiEndpoints.part_stocktake_list)}
           tableState={table}
diff --git a/src/frontend/src/pages/part/pricing/BomPricingPanel.tsx b/src/frontend/src/pages/part/pricing/BomPricingPanel.tsx
index 4127c4f033..e628b838fd 100644
--- a/src/frontend/src/pages/part/pricing/BomPricingPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/BomPricingPanel.tsx
@@ -219,7 +219,7 @@ export default function BomPricingPanel({
 
   return (
     <Stack gap='xs'>
-      <SimpleGrid cols={2}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
         <InvenTreeTable
           tableState={table}
           url={apiUrl(ApiEndpoints.bom_list)}
diff --git a/src/frontend/src/pages/part/pricing/PriceBreakPanel.tsx b/src/frontend/src/pages/part/pricing/PriceBreakPanel.tsx
index 85710b4946..48b6621574 100644
--- a/src/frontend/src/pages/part/pricing/PriceBreakPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/PriceBreakPanel.tsx
@@ -151,7 +151,7 @@ export default function PriceBreakPanel({
       {newPriceBreak.modal}
       {editPriceBreak.modal}
       {deletePriceBreak.modal}
-      <SimpleGrid cols={2}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
         <InvenTreeTable
           tableState={table}
           url={tableUrl}
diff --git a/src/frontend/src/pages/part/pricing/PricingOverviewPanel.tsx b/src/frontend/src/pages/part/pricing/PricingOverviewPanel.tsx
index 720b639db3..04e014fefc 100644
--- a/src/frontend/src/pages/part/pricing/PricingOverviewPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/PricingOverviewPanel.tsx
@@ -240,7 +240,7 @@ export default function PricingOverviewPanel({
     <>
       {editPricing.modal}
       <Stack gap='xs'>
-        <SimpleGrid cols={2}>
+        <SimpleGrid cols={{ base: 1, md: 2 }}>
           <Stack gap='xs'>
             <Paper p='xs'>
               <Group justify='space-between' wrap='nowrap'>
diff --git a/src/frontend/src/pages/part/pricing/PurchaseHistoryPanel.tsx b/src/frontend/src/pages/part/pricing/PurchaseHistoryPanel.tsx
index ce3ea98e33..aeec576b76 100644
--- a/src/frontend/src/pages/part/pricing/PurchaseHistoryPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/PurchaseHistoryPanel.tsx
@@ -103,7 +103,7 @@ export default function PurchaseHistoryPanel({
   }, [table.records]);
 
   return (
-    <SimpleGrid cols={2}>
+    <SimpleGrid cols={{ base: 1, md: 2 }}>
       <InvenTreeTable
         tableState={table}
         url={apiUrl(ApiEndpoints.purchase_order_line_list)}
diff --git a/src/frontend/src/pages/part/pricing/SaleHistoryPanel.tsx b/src/frontend/src/pages/part/pricing/SaleHistoryPanel.tsx
index 7bbee81ed7..442686fb44 100644
--- a/src/frontend/src/pages/part/pricing/SaleHistoryPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/SaleHistoryPanel.tsx
@@ -63,7 +63,7 @@ export default function SaleHistoryPanel({
   }, [table.records]);
 
   return (
-    <SimpleGrid cols={2}>
+    <SimpleGrid cols={{ base: 1, md: 2 }}>
       <InvenTreeTable
         tableState={table}
         url={apiUrl(ApiEndpoints.sales_order_line_list)}
diff --git a/src/frontend/src/pages/part/pricing/SupplierPricingPanel.tsx b/src/frontend/src/pages/part/pricing/SupplierPricingPanel.tsx
index a4ad956816..4a3b7a2718 100644
--- a/src/frontend/src/pages/part/pricing/SupplierPricingPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/SupplierPricingPanel.tsx
@@ -45,7 +45,7 @@ export default function SupplierPricingPanel({
   }, [table.records]);
 
   return (
-    <SimpleGrid cols={2}>
+    <SimpleGrid cols={{ base: 1, md: 2 }}>
       <InvenTreeTable
         url={apiUrl(ApiEndpoints.supplier_part_pricing_list)}
         columns={columns}
diff --git a/src/frontend/src/pages/part/pricing/VariantPricingPanel.tsx b/src/frontend/src/pages/part/pricing/VariantPricingPanel.tsx
index 224736929d..69ed90d60e 100644
--- a/src/frontend/src/pages/part/pricing/VariantPricingPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/VariantPricingPanel.tsx
@@ -73,7 +73,7 @@ export default function VariantPricingPanel({
 
   return (
     <Stack gap='xs'>
-      <SimpleGrid cols={2}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
         <InvenTreeTable
           tableState={table}
           url={apiUrl(ApiEndpoints.part_list)}