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/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' }}>

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

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

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>

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}

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}

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

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}

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'>

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

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

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}

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