Enhance Dashboard Navigation Fade Logic and Styles

- Introduced a new hook for managing delayed visibility of navigation elements, improving fade transitions. - Updated CSS transitions for smoother visibility changes, ensuring better user experience during interactions. - Refactored NavigationFade component to accept a className prop for enhanced styling flexibility. - Adjusted logic for rendering window titles and dashboard items based on Electron context, improving overall navigation behavior.
Refactor Dashboard Component Styles for Consistency and Readability
2026-09-18 16:19:33 +01:00 · 2026-09-18 16:10:08 +01:00
57 changed files with 411 additions and 329 deletions
--- a/assets/stylesheets/App.css
+++ b/assets/stylesheets/App.css
@ -124,6 +124,7 @@
 .dashboard-navigation-fade {
  opacity: 1;
  visibility: visible;
+  /* Incoming chrome waits for the outgoing fade, then fades in. */
  transition:
    opacity 0.2s ease 0.2s,
    visibility 0s linear 0.2s;
@ -133,9 +134,14 @@
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
+  /*
+    Visibility must use a non-zero duration on hide. A 0s visibility
+    transition makes WebKit apply hidden immediately, so opacity never
+    animates and the chrome glitches out instead of fading.
+  */
  transition:
    opacity 0.2s ease 0s,
-    visibility 0s linear 0.2s;
+    visibility 0.2s linear 0s;
 }

 .dashboard-navigation-window-title {
@ -162,7 +168,7 @@
  pointer-events: none;
  opacity: 1;
  /* Wait for outgoing chrome to finish fading before this line appears. */
-  transition: opacity 0s ease 0s;
+  transition: opacity 0.2s ease 0s;
 }

 .dashboard-navigation-center-border-hidden {
--- a/src/components/Dashboard/Finance/Invoices/InvoiceInfo.jsx
+++ b/src/components/Dashboard/Finance/Invoices/InvoiceInfo.jsx
@ -27,7 +27,10 @@ import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import InfoActionButtons from '../../common/InfoActionButtons.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
-import { getModelProperty, getModelByName } from '../../../../database/ObjectModels.js'
+import {
+  getModelProperty,
+  getModelByName
+} from '../../../../database/ObjectModels.js'
 import OrderItemIcon from '../../../Icons/OrderItemIcon.jsx'
 import ShipmentIcon from '../../../Icons/ShipmentIcon.jsx'

@ -91,7 +94,7 @@ const InvoiceInfo = () => {
    finishEdit: () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
-    },
+    }
  }

  return (
@ -100,6 +103,7 @@ const InvoiceInfo = () => {
      vertical='true'
      style={{
        maxHeight: '100%',
+        height: '100%',
        minHeight: 0
      }}
    >
@ -257,7 +261,9 @@ const InvoiceInfo = () => {
            ) : (
              <ObjectTable
                type='payment'
-                masterFilter={{ invoice: getModelByName('invoice').prefix + ':' + invoiceId }}
+                masterFilter={{
+                  invoice: getModelByName('invoice').prefix + ':' + invoiceId
+                }}
                visibleColumns={{ invoice: false }}
              />
            )}
@ -291,10 +297,7 @@ const InvoiceInfo = () => {
              <ObjectTable
                type='auditLog'
                masterFilter={{
-                    parent:
-                      getModelByName('invoice').prefix +
-                      ':' +
-                      invoiceId
+                  parent: getModelByName('invoice').prefix + ':' + invoiceId
                }}
                visibleColumns={{ _id: false, parent: false }}
              />
--- a/src/components/Dashboard/Finance/PaymentPolicies/PaymentPolicyInfo.jsx
+++ b/src/components/Dashboard/Finance/PaymentPolicies/PaymentPolicyInfo.jsx
@ -93,7 +93,7 @@ const PaymentPolicyInfo = () => {
      <Flex
        gap='large'
        vertical='true'
-        style={{ maxHeight: '100%', minHeight: 0 }}
+        style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
      >
        <Flex justify={'space-between'}>
          <Space size='small'>
--- a/src/components/Dashboard/Finance/Payments/PaymentInfo.jsx
+++ b/src/components/Dashboard/Finance/Payments/PaymentInfo.jsx
@ -84,7 +84,7 @@ const PaymentInfo = () => {
    finishEdit: () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
-    },
+    }
  }

  return (
@ -93,6 +93,7 @@ const PaymentInfo = () => {
      vertical='true'
      style={{
        maxHeight: '100%',
+        height: '100%',
        minHeight: 0
      }}
    >
--- a/src/components/Dashboard/Finance/TaxRecords/TaxRecordInfo.jsx
+++ b/src/components/Dashboard/Finance/TaxRecords/TaxRecordInfo.jsx
@ -77,7 +77,7 @@ const TaxRecordInfo = () => {
    finishEdit: () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
-    },
+    }
  }

  return (
@ -85,7 +85,7 @@ const TaxRecordInfo = () => {
      <Flex
        gap='large'
        vertical='true'
-        style={{ maxHeight: '100%', minHeight: 0 }}
+        style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
      >
        <Flex justify={'space-between'}>
          <Space size='small'>
@ -213,9 +213,7 @@ const TaxRecordInfo = () => {
                  type='auditLog'
                  masterFilter={{
                    parent:
-                        getModelByName('taxRecord').prefix +
-                        ':' +
-                        taxRecordId
+                      getModelByName('taxRecord').prefix + ':' + taxRecordId
                  }}
                  visibleColumns={{ _id: false, parent: false }}
                />
--- a/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx
+++ b/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx
@ -87,7 +87,7 @@ const FilamentStockInfo = () => {
      <Flex
        gap='large'
        vertical='true'
-        style={{ maxHeight: '100%', minHeight: 0 }}
+        style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
      >
        <Flex justify={'space-between'}>
          <Space size='small'>
@ -197,7 +197,12 @@ const FilamentStockInfo = () => {
              ) : (
                <ObjectTable
                  type='stockEvent'
-                  masterFilter={{ parent: getModelByName('filamentStock').prefix + ':' + filamentStockId }}
+                  masterFilter={{
+                    parent:
+                      getModelByName('filamentStock').prefix +
+                      ':' +
+                      filamentStockId
+                  }}
                  visibleColumns={{ parent: false }}
                />
              )}
--- a/src/components/Dashboard/Inventory/OrderItems/OrderItemInfo.jsx
+++ b/src/components/Dashboard/Inventory/OrderItems/OrderItemInfo.jsx
@ -78,7 +78,7 @@ const OrderItemInfo = () => {
    finishEdit: () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
-    },
+    }
  }

  return (
@ -88,6 +88,7 @@ const OrderItemInfo = () => {
        vertical='true'
        style={{
          maxHeight: '100%',
+          height: '100%',
          minHeight: 0
        }}
      >
@ -224,9 +225,7 @@ const OrderItemInfo = () => {
                  type='auditLog'
                  masterFilter={{
                    parent:
-                        getModelByName('orderItem').prefix +
-                        ':' +
-                        orderItemId
+                      getModelByName('orderItem').prefix + ':' + orderItemId
                  }}
                  visibleColumns={{ _id: false, parent: false }}
                />
--- a/src/components/Dashboard/Inventory/PartStocks/PartStockInfo.jsx
+++ b/src/components/Dashboard/Inventory/PartStocks/PartStockInfo.jsx
@ -93,6 +93,7 @@ const PartStockInfo = () => {
        vertical='true'
        style={{
          maxHeight: '100%',
+          height: '100%',
          minHeight: 0
        }}
      >
@ -214,7 +215,10 @@ const PartStockInfo = () => {
              ) : (
                <ObjectTable
                  type='stockEvent'
-                  masterFilter={{ parent: getModelByName('partStock').prefix + ':' + partStockId }}
+                  masterFilter={{
+                    parent:
+                      getModelByName('partStock').prefix + ':' + partStockId
+                  }}
                  visibleColumns={{ parent: false }}
                />
              )}
@ -272,9 +276,7 @@ const PartStockInfo = () => {
                  type='auditLog'
                  masterFilter={{
                    parent:
-                        getModelByName('partStock').prefix +
-                        ':' +
-                        partStockId
+                      getModelByName('partStock').prefix + ':' + partStockId
                  }}
                  visibleColumns={{ _id: false, parent: false }}
                />
--- a/src/components/Dashboard/Inventory/ProductStocks/ProductStockInfo.jsx
+++ b/src/components/Dashboard/Inventory/ProductStocks/ProductStockInfo.jsx
@ -109,6 +109,7 @@ const ProductStockInfo = () => {
      vertical='true'
      style={{
        maxHeight: '100%',
+        height: '100%',
        minHeight: 0
      }}
    >
--- a/src/components/Dashboard/Inventory/PurchaseOrders/PurchaseOrderInfo.jsx
+++ b/src/components/Dashboard/Inventory/PurchaseOrders/PurchaseOrderInfo.jsx
@ -102,7 +102,7 @@ const PurchaseOrderInfo = () => {
      orderItemsTableRef?.current?.handleUpdate?.()
      objectFormRef?.current?.handleUpdate?.()
      return true
-    },
+    }
  }

  return (
@ -111,6 +111,7 @@ const PurchaseOrderInfo = () => {
      vertical='true'
      style={{
        maxHeight: '100%',
+        height: '100%',
        minHeight: 0
      }}
    >
@ -230,7 +231,10 @@ const PurchaseOrderInfo = () => {
                    <ObjectTable
                      type='orderItem'
                      masterFilter={{
-                        order: getModelByName('purchaseOrder').prefix + ':' + purchaseOrderId,
+                        order:
+                          getModelByName('purchaseOrder').prefix +
+                          ':' +
+                          purchaseOrderId,
                        orderType: 'purchaseOrder'
                      }}
                      visibleColumns={{ order: false }}
@ -249,7 +253,10 @@ const PurchaseOrderInfo = () => {
                    <ObjectTable
                      type='shipment'
                      masterFilter={{
-                        order: getModelByName('purchaseOrder').prefix + ':' + purchaseOrderId,
+                        order:
+                          getModelByName('purchaseOrder').prefix +
+                          ':' +
+                          purchaseOrderId,
                        orderType: 'purchaseOrder'
                      }}
                      visibleColumns={{ order: false }}
@ -271,7 +278,10 @@ const PurchaseOrderInfo = () => {
                      <ObjectTable
                        type='invoice'
                        masterFilter={{
-                          order: getModelByName('purchaseOrder').prefix + ':' + purchaseOrderId,
+                          order:
+                            getModelByName('purchaseOrder').prefix +
+                            ':' +
+                            purchaseOrderId,
                          orderType: 'purchaseOrder'
                        }}
                        visibleColumns={{ order: false }}
@ -293,7 +303,10 @@ const PurchaseOrderInfo = () => {
                      <ObjectTable
                        type='stockEvent'
                        masterFilter={{
-                          owner: getModelByName('purchaseOrder').prefix + ':' + purchaseOrderId
+                          owner:
+                            getModelByName('purchaseOrder').prefix +
+                            ':' +
+                            purchaseOrderId
                        }}
                      />
                    )}
--- a/src/components/Dashboard/Inventory/Shipments/PurchaseOrderInfo.jsx
+++ b/src/components/Dashboard/Inventory/Shipments/PurchaseOrderInfo.jsx
@ -121,6 +121,7 @@ const PurchaseOrderInfo = () => {
        vertical='true'
        style={{
          maxHeight: '100%',
+          height: '100%',
          minHeight: 0
        }}
      >
@ -233,7 +234,10 @@ const PurchaseOrderInfo = () => {
                      <ObjectTable
                        type='orderItem'
                        masterFilter={{
-                          order: getModelByName('purchaseOrder').prefix + ':' + purchaseOrderId,
+                          order:
+                            getModelByName('purchaseOrder').prefix +
+                            ':' +
+                            purchaseOrderId,
                          orderType: 'purchaseOrder'
                        }}
                        visibleColumns={{ order: false }}
@ -252,7 +256,10 @@ const PurchaseOrderInfo = () => {
                      <ObjectTable
                        type='shipment'
                        masterFilter={{
-                          order: getModelByName('purchaseOrder').prefix + ':' + purchaseOrderId,
+                          order:
+                            getModelByName('purchaseOrder').prefix +
+                            ':' +
+                            purchaseOrderId,
                          orderType: 'purchaseOrder'
                        }}
                        visibleColumns={{ order: false }}
--- a/src/components/Dashboard/Inventory/Shipments/ShipmentInfo.jsx
+++ b/src/components/Dashboard/Inventory/Shipments/ShipmentInfo.jsx
@ -96,6 +96,7 @@ const ShipmentInfo = () => {
      vertical='true'
      style={{
        maxHeight: '100%',
+        height: '100%',
        minHeight: 0
      }}
    >
--- a/src/components/Dashboard/Inventory/StockAudits/StockAuditInfo.jsx
+++ b/src/components/Dashboard/Inventory/StockAudits/StockAuditInfo.jsx
@ -26,7 +26,10 @@ import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import InfoActionButtons from '../../common/InfoActionButtons.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
-import { getModelProperty, getModelByName } from '../../../../database/ObjectModels.js'
+import {
+  getModelProperty,
+  getModelByName
+} from '../../../../database/ObjectModels.js'
 import ScrollBox from '../../common/ScrollBox.jsx'

 const log = loglevel.getLogger('StockAuditInfo')
@ -92,6 +95,7 @@ const StockAuditInfo = () => {
      vertical='true'
      style={{
        maxHeight: '100%',
+        height: '100%',
        minHeight: 0
      }}
    >
@ -180,7 +184,9 @@ const StockAuditInfo = () => {
                    title='Stock Audit Information'
                    icon={<InfoCircleIcon />}
                    active={collapseState.info}
-                    onToggle={(expanded) => updateCollapseState('info', expanded)}
+                    onToggle={(expanded) =>
+                      updateCollapseState('info', expanded)
+                    }
                    collapseKey='info'
                  >
                    <ObjectInfo
@ -262,9 +268,7 @@ const StockAuditInfo = () => {
            title='Audit Logs'
            icon={<AuditLogIcon />}
            active={collapseState.auditLogs}
-            onToggle={(expanded) =>
-              updateCollapseState('auditLogs', expanded)
-            }
+            onToggle={(expanded) => updateCollapseState('auditLogs', expanded)}
            collapseKey='auditLogs'
          >
            {objectFormState.loading ? (
@ -274,9 +278,7 @@ const StockAuditInfo = () => {
                type='auditLog'
                masterFilter={{
                  parent:
-                    getModelByName('stockAudit').prefix +
-                    ':' +
-                    stockAuditId
+                    getModelByName('stockAudit').prefix + ':' + stockAuditId
                }}
                visibleColumns={{ _id: false, parent: false }}
              />
--- a/src/components/Dashboard/Inventory/StockLocations/StockLocationInfo.jsx
+++ b/src/components/Dashboard/Inventory/StockLocations/StockLocationInfo.jsx
@ -98,6 +98,7 @@ const StockLocationInfo = () => {
        vertical='true'
        style={{
          maxHeight: '100%',
+          height: '100%',
          minHeight: 0
        }}
      >
--- a/src/components/Dashboard/Inventory/StockTransfers/StockTransferInfo.jsx
+++ b/src/components/Dashboard/Inventory/StockTransfers/StockTransferInfo.jsx
@ -8,7 +8,10 @@ import InfoCollapse from '../../common/InfoCollapse.jsx'
 import ObjectInfo from '../../common/ObjectInfo.jsx'
 import ObjectProperty from '../../common/ObjectProperty.jsx'
 import ViewButton from '../../common/ViewButton.jsx'
-import { getModelProperty, getModelByName } from '../../../../database/ObjectModels.js'
+import {
+  getModelProperty,
+  getModelByName
+} from '../../../../database/ObjectModels.js'
 import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
 import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
@ -89,7 +92,7 @@ const StockTransferInfo = () => {
    finishEdit: () => {
      objectFormRef?.current.handleUpdate()
      return true
-    },
+    }
  }

  return (
@ -98,6 +101,7 @@ const StockTransferInfo = () => {
      vertical='true'
      style={{
        maxHeight: '100%',
+        height: '100%',
        minHeight: 0
      }}
    >
--- a/src/components/Dashboard/Management/AppPasswords/AppPasswordInfo.jsx
+++ b/src/components/Dashboard/Management/AppPasswords/AppPasswordInfo.jsx
@ -87,7 +87,7 @@ const AppPasswordInfo = () => {
    <Flex
      gap='large'
      vertical='true'
-      style={{ maxHeight: '100%', minHeight: 0 }}
+      style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
    >
      <Flex justify={'space-between'}>
        <Space size='small'>
@ -197,9 +197,7 @@ const AppPasswordInfo = () => {
                type='auditLog'
                masterFilter={{
                  parent:
-                      getModelByName('appPassword').prefix +
-                      ':' +
-                      appPasswordId
+                    getModelByName('appPassword').prefix + ':' + appPasswordId
                }}
                visibleColumns={{ _id: false, parent: false }}
              />
--- a/src/components/Dashboard/Management/CourierServices/CourierServiceInfo.jsx
+++ b/src/components/Dashboard/Management/CourierServices/CourierServiceInfo.jsx
@ -25,7 +25,10 @@ import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import InfoActionButtons from '../../common/InfoActionButtons.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
-import { getModelProperty, getModelByName } from '../../../../database/ObjectModels.js'
+import {
+  getModelProperty,
+  getModelByName
+} from '../../../../database/ObjectModels.js'
 import ScrollBox from '../../common/ScrollBox.jsx'

 const log = loglevel.getLogger('CourierServiceInfo')
@ -82,7 +85,7 @@ const CourierServiceInfo = () => {
    finishEdit: () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
-    },
+    }
  }

  return (
@ -90,7 +93,7 @@ const CourierServiceInfo = () => {
      <Flex
        gap='large'
        vertical='true'
-        style={{ maxHeight: '100%', minHeight: 0 }}
+        style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
      >
        <Flex justify={'space-between'}>
          <Space size='small'>
--- a/src/components/Dashboard/Management/Couriers/CourierInfo.jsx
+++ b/src/components/Dashboard/Management/Couriers/CourierInfo.jsx
@ -75,7 +75,7 @@ const CourierInfo = () => {
    finishEdit: () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
-    },
+    }
  }

  return (
@ -83,7 +83,7 @@ const CourierInfo = () => {
      <Flex
        gap='large'
        vertical='true'
-        style={{ maxHeight: '100%', minHeight: 0 }}
+        style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
      >
        <Flex justify={'space-between'}>
          <Space size='small'>
@ -193,7 +193,9 @@ const CourierInfo = () => {
              ) : (
                <ObjectTable
                  type='courierService'
-                  masterFilter={{ courier: getModelByName('courier').prefix + ':' + courierId }}
+                  masterFilter={{
+                    courier: getModelByName('courier').prefix + ':' + courierId
+                  }}
                  visibleColumns={{
                    courier: false
                  }}
@ -231,10 +233,7 @@ const CourierInfo = () => {
                <ObjectTable
                  type='auditLog'
                  masterFilter={{
-                      parent:
-                        getModelByName('courier').prefix +
-                        ':' +
-                        courierId
+                    parent: getModelByName('courier').prefix + ':' + courierId
                  }}
                  visibleColumns={{ _id: false, parent: false }}
                />
--- a/src/components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx
+++ b/src/components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx
@ -87,7 +87,7 @@ const DocumentJobInfo = () => {
      <Flex
        gap='large'
        vertical='true'
-        style={{ maxHeight: '100%', minHeight: 0 }}
+        style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
      >
        <Flex justify={'space-between'}>
          <Space size='small'>
@ -216,9 +216,7 @@ const DocumentJobInfo = () => {
                  type='auditLog'
                  masterFilter={{
                    parent:
-                        getModelByName('documentJob').prefix +
-                        ':' +
-                        documentJobId
+                      getModelByName('documentJob').prefix + ':' + documentJobId
                  }}
                  visibleColumns={{ _id: false, parent: false }}
                />
--- a/src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx
+++ b/src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx
@ -91,6 +91,7 @@ const DocumentPrinterInfo = () => {
        vertical='true'
        style={{
          maxHeight: '100%',
+          height: '100%',
          minHeight: 0
        }}
      >
--- a/src/components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx
+++ b/src/components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx
@ -87,7 +87,7 @@ const DocumentSizeInfo = () => {
      <Flex
        gap='large'
        vertical='true'
-        style={{ maxHeight: '100%', minHeight: 0 }}
+        style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
      >
        <Flex justify={'space-between'}>
          <Space size='small'>
--- a/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx
+++ b/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx
@ -97,6 +97,7 @@ const DocumentTemplateInfo = () => {
        vertical='true'
        style={{
          maxHeight: '100%',
+          height: '100%',
          minHeight: 0
        }}
      >
--- a/src/components/Dashboard/Management/EmailAccounts/EmailAccountInfo.jsx
+++ b/src/components/Dashboard/Management/EmailAccounts/EmailAccountInfo.jsx
@ -88,7 +88,7 @@ const EmailAccountInfo = () => {
      <Flex
        gap='large'
        vertical='true'
-        style={{ maxHeight: '100%', minHeight: 0 }}
+        style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
      >
        <Flex justify={'space-between'}>
          <Space size='small'>
--- a/src/components/Dashboard/Management/EmailMessages/EmailMessageInfo.jsx
+++ b/src/components/Dashboard/Management/EmailMessages/EmailMessageInfo.jsx
@ -23,7 +23,10 @@ import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import InfoActionButtons from '../../common/InfoActionButtons.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
-import { getModelByName, getModelProperty } from '../../../../database/ObjectModels.js'
+import {
+  getModelByName,
+  getModelProperty
+} from '../../../../database/ObjectModels.js'
 import ScrollBox from '../../common/ScrollBox.jsx'
 import TemplatePreview from '../../common/TemplatePreview.jsx'

@ -74,7 +77,7 @@ const EmailMessageInfo = () => {
      <Flex
        gap='large'
        vertical='true'
-        style={{ maxHeight: '100%', minHeight: 0 }}
+        style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
      >
        <Flex justify={'space-between'}>
          <Space size='small'>
--- a/src/components/Dashboard/Management/EmailTemplates/EmailTemplateInfo.jsx
+++ b/src/components/Dashboard/Management/EmailTemplates/EmailTemplateInfo.jsx
@ -25,7 +25,10 @@ import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import InfoActionButtons from '../../common/InfoActionButtons.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
-import { getModelByName, getModelProperty } from '../../../../database/ObjectModels.js'
+import {
+  getModelByName,
+  getModelProperty
+} from '../../../../database/ObjectModels.js'
 import ScrollBox from '../../common/ScrollBox.jsx'

 const log = loglevel.getLogger('EmailTemplateInfo')
@ -92,7 +95,7 @@ const EmailTemplateInfo = () => {
      <Flex
        gap='large'
        vertical='true'
-        style={{ maxHeight: '100%', minHeight: 0 }}
+        style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
      >
        <Flex justify={'space-between'}>
          <Space size='small'>
--- a/src/components/Dashboard/Management/FilamentSkus/FilamentSkuInfo.jsx
+++ b/src/components/Dashboard/Management/FilamentSkus/FilamentSkuInfo.jsx
@ -74,7 +74,7 @@ const FilamentSkuInfo = () => {
    finishEdit: () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
-    },
+    }
  }

  return (
@ -82,7 +82,7 @@ const FilamentSkuInfo = () => {
      <Flex
        gap='large'
        vertical='true'
-        style={{ maxHeight: '100%', minHeight: 0 }}
+        style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
      >
        <Flex justify={'space-between'}>
          <Space size='small'>
@ -210,9 +210,7 @@ const FilamentSkuInfo = () => {
                  type='auditLog'
                  masterFilter={{
                    parent:
-                        getModelByName('filamentSku').prefix +
-                        ':' +
-                        filamentSkuId
+                      getModelByName('filamentSku').prefix + ':' + filamentSkuId
                  }}
                  visibleColumns={{ _id: false, parent: false }}
                />
--- a/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx
+++ b/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx
@ -92,7 +92,7 @@ const FilamentInfo = () => {
    finishEdit: () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
-    },
+    }
  }

  return (
@ -101,6 +101,7 @@ const FilamentInfo = () => {
      vertical='true'
      style={{
        maxHeight: '100%',
+        height: '100%',
        minHeight: 0
      }}
    >
@ -220,7 +221,9 @@ const FilamentInfo = () => {
              <ObjectTable
                ref={filamentSkusTableRef}
                type='filamentSku'
-                masterFilter={{ filament: getModelByName('filament').prefix + ':' + filamentId }}
+                masterFilter={{
+                  filament: getModelByName('filament').prefix + ':' + filamentId
+                }}
                visibleColumns={{ filament: false }}
              />
            )}
@ -238,7 +241,9 @@ const FilamentInfo = () => {
            ) : (
              <ObjectTable
                type='filamentStock'
-                masterFilter={{ filament: getModelByName('filament').prefix + ':' + filamentId }}
+                masterFilter={{
+                  filament: getModelByName('filament').prefix + ':' + filamentId
+                }}
                visibleColumns={{
                  filament: false,
                  startingWeight: false
@ -277,10 +282,7 @@ const FilamentInfo = () => {
              <ObjectTable
                type='auditLog'
                masterFilter={{
-                    parent:
-                      getModelByName('filament').prefix +
-                      ':' +
-                      filamentId
+                  parent: getModelByName('filament').prefix + ':' + filamentId
                }}
                visibleColumns={{ _id: false, parent: false }}
              />
--- a/src/components/Dashboard/Management/Files/FileInfo.jsx
+++ b/src/components/Dashboard/Management/Files/FileInfo.jsx
@ -98,7 +98,7 @@ const FileInfo = () => {
      <Flex
        gap='large'
        vertical='true'
-        style={{ maxHeight: '100%', minHeight: 0 }}
+        style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
      >
        <Flex justify={'space-between'}>
          <Space size='small'>
--- a/src/components/Dashboard/Management/Hosts/HostInfo.jsx
+++ b/src/components/Dashboard/Management/Hosts/HostInfo.jsx
@ -87,7 +87,7 @@ const HostInfo = () => {
    finishEdit: () => {
      objectFormRef?.current.handleUpdate()
      return true
-    },
+    }
  }

  return (
@ -96,6 +96,7 @@ const HostInfo = () => {
      vertical='true'
      style={{
        maxHeight: '100%',
+        height: '100%',
        minHeight: 0
      }}
    >
@ -213,7 +214,9 @@ const HostInfo = () => {
            ) : (
              <ObjectTable
                type='printer'
-                masterFilter={{ host: getModelByName('host').prefix + ':' + hostId }}
+                masterFilter={{
+                  host: getModelByName('host').prefix + ':' + hostId
+                }}
                visibleColumns={{
                  host: false
                }}
@ -234,7 +237,9 @@ const HostInfo = () => {
            ) : (
              <ObjectTable
                type='documentPrinter'
-                masterFilter={{ host: getModelByName('host').prefix + ':' + hostId }}
+                masterFilter={{
+                  host: getModelByName('host').prefix + ':' + hostId
+                }}
                visibleColumns={{
                  host: false
                }}
@ -272,10 +277,7 @@ const HostInfo = () => {
              <ObjectTable
                type='auditLog'
                masterFilter={{
-                    parent:
-                      getModelByName('host').prefix +
-                      ':' +
-                      hostId
+                  parent: getModelByName('host').prefix + ':' + hostId
                }}
                visibleColumns={{ _id: false, parent: false }}
              />
--- a/src/components/Dashboard/Management/Materials/MaterialInfo.jsx
+++ b/src/components/Dashboard/Management/Materials/MaterialInfo.jsx
@ -77,7 +77,7 @@ const MaterialInfo = () => {
    finishEdit: () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
-    },
+    }
  }

  return (
@ -85,7 +85,7 @@ const MaterialInfo = () => {
      <Flex
        gap='large'
        vertical='true'
-        style={{ maxHeight: '100%', minHeight: 0 }}
+        style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
      >
        <Flex justify={'space-between'}>
          <Space size='small'>
@ -212,10 +212,7 @@ const MaterialInfo = () => {
                <ObjectTable
                  type='auditLog'
                  masterFilter={{
-                      parent:
-                        getModelByName('material').prefix +
-                        ':' +
-                        materialId
+                    parent: getModelByName('material').prefix + ':' + materialId
                  }}
                  visibleColumns={{ _id: false, parent: false }}
                />
--- a/src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx
+++ b/src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx
@ -77,7 +77,7 @@ const NoteTypeInfo = () => {
      <Flex
        gap='large'
        vertical='true'
-        style={{ maxHeight: '100%', minHeight: 0 }}
+        style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
      >
        <Flex justify={'space-between'}>
          <Space size='small'>
@ -188,10 +188,7 @@ const NoteTypeInfo = () => {
                <ObjectTable
                  type='auditLog'
                  masterFilter={{
-                      parent:
-                        getModelByName('noteType').prefix +
-                        ':' +
-                        noteTypeId
+                    parent: getModelByName('noteType').prefix + ':' + noteTypeId
                  }}
                  visibleColumns={{ _id: false, parent: false }}
                />
--- a/src/components/Dashboard/Management/Notes/NoteInfo.jsx
+++ b/src/components/Dashboard/Management/Notes/NoteInfo.jsx
@ -27,7 +27,10 @@ import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import InfoActionButtons from '../../common/InfoActionButtons.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
-import { getModelProperty, getModelByName } from '../../../../database/ObjectModels.js'
+import {
+  getModelProperty,
+  getModelByName
+} from '../../../../database/ObjectModels.js'

 const log = loglevel.getLogger('NoteInfo')
 log.setLevel(config.logLevel)
@ -83,7 +86,7 @@ const NoteInfo = () => {
    finishEdit: () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
-    },
+    }
  }

  return (
@ -91,7 +94,7 @@ const NoteInfo = () => {
      <Flex
        gap='large'
        vertical='true'
-        style={{ maxHeight: '100%', minHeight: 0 }}
+        style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
      >
        <Flex justify={'space-between'}>
          <Space size='small'>
@ -245,10 +248,7 @@ const NoteInfo = () => {
                <ObjectTable
                  type='auditLog'
                  masterFilter={{
-                      parent:
-                        getModelByName('note').prefix +
-                        ':' +
-                        noteId
+                    parent: getModelByName('note').prefix + ':' + noteId
                  }}
                  visibleColumns={{ _id: false, parent: false }}
                />
--- a/src/components/Dashboard/Management/PartSkus/PartSkuInfo.jsx
+++ b/src/components/Dashboard/Management/PartSkus/PartSkuInfo.jsx
@ -69,7 +69,7 @@ const PartSkuInfo = () => {
    finishEdit: () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
-    },
+    }
  }

  return (
@ -77,7 +77,7 @@ const PartSkuInfo = () => {
      <Flex
        gap='large'
        vertical='true'
-        style={{ maxHeight: '100%', minHeight: 0 }}
+        style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
      >
        <Flex justify={'space-between'}>
          <Space size='small'>
@ -204,10 +204,7 @@ const PartSkuInfo = () => {
                <ObjectTable
                  type='auditLog'
                  masterFilter={{
-                      parent:
-                        getModelByName('partSku').prefix +
-                        ':' +
-                        partSkuId
+                    parent: getModelByName('partSku').prefix + ':' + partSkuId
                  }}
                  visibleColumns={{ _id: false, parent: false }}
                />
--- a/src/components/Dashboard/Management/Parts/PartInfo.jsx
+++ b/src/components/Dashboard/Management/Parts/PartInfo.jsx
@ -88,7 +88,7 @@ const PartInfo = () => {
    <Flex
      gap='large'
      vertical='true'
-      style={{ maxHeight: '100%', minHeight: 0 }}
+      style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
    >
      <Flex justify={'space-between'}>
        <Space size='small'>
@ -197,7 +197,9 @@ const PartInfo = () => {
                <ObjectTable
                  ref={partSkusTableRef}
                  type='partSku'
-                  masterFilter={{ part: getModelByName('part').prefix + ':' + partId }}
+                  masterFilter={{
+                    part: getModelByName('part').prefix + ':' + partId
+                  }}
                  visibleColumns={{ part: false }}
                />
              )}
@ -232,10 +234,7 @@ const PartInfo = () => {
              <ObjectTable
                type='auditLog'
                masterFilter={{
-                    parent:
-                      getModelByName('part').prefix +
-                      ':' +
-                      partId
+                  parent: getModelByName('part').prefix + ':' + partId
                }}
                visibleColumns={{ _id: false, parent: false }}
              />
--- a/src/components/Dashboard/Management/PermissionSettings/PermissionSettingInfo.jsx
+++ b/src/components/Dashboard/Management/PermissionSettings/PermissionSettingInfo.jsx
@ -80,7 +80,7 @@ const PermissionSettingInfo = () => {
    finishEdit: () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
-    },
+    }
  }

  return (
@ -88,7 +88,7 @@ const PermissionSettingInfo = () => {
      <Flex
        gap='large'
        vertical='true'
-        style={{ maxHeight: '100%', minHeight: 0 }}
+        style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
      >
        <Flex justify={'space-between'}>
          <Space size='small'>
--- a/src/components/Dashboard/Management/ProductCategories/ProductCategoryInfo.jsx
+++ b/src/components/Dashboard/Management/ProductCategories/ProductCategoryInfo.jsx
@ -23,7 +23,10 @@ import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import InfoActionButtons from '../../common/InfoActionButtons.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
-import { getModelProperty, getModelByName } from '../../../../database/ObjectModels.js'
+import {
+  getModelProperty,
+  getModelByName
+} from '../../../../database/ObjectModels.js'
 import ScrollBox from '../../common/ScrollBox.jsx'

 const ProductCategoryInfo = () => {
@ -77,7 +80,7 @@ const ProductCategoryInfo = () => {
    finishEdit: () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
-    },
+    }
  }

  return (
@ -85,7 +88,7 @@ const ProductCategoryInfo = () => {
      <Flex
        gap='large'
        vertical='true'
-        style={{ maxHeight: '100%', minHeight: 0 }}
+        style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
      >
        <Flex justify={'space-between'}>
          <Space size='small'>
--- a/src/components/Dashboard/Management/ProductSkus/ProductSkuInfo.jsx
+++ b/src/components/Dashboard/Management/ProductSkus/ProductSkuInfo.jsx
@ -23,7 +23,10 @@ import InfoActionButtons from '../../common/InfoActionButtons.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
 import ObjectProperty from '../../common/ObjectProperty.jsx'
-import { getModelProperty, getModelByName } from '../../../../database/ObjectModels.js'
+import {
+  getModelProperty,
+  getModelByName
+} from '../../../../database/ObjectModels.js'
 import PartIcon from '../../../Icons/PartIcon.jsx'

 const ProductSkuInfo = () => {
@ -75,7 +78,7 @@ const ProductSkuInfo = () => {
    finishEdit: () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
-    },
+    }
  }

  return (
@ -83,7 +86,7 @@ const ProductSkuInfo = () => {
      <Flex
        gap='large'
        vertical='true'
-        style={{ maxHeight: '100%', minHeight: 0 }}
+        style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
      >
        <Flex justify={'space-between'}>
          <Space size='small'>
@ -237,9 +240,7 @@ const ProductSkuInfo = () => {
                    type='auditLog'
                    masterFilter={{
                      parent:
-                          getModelByName('productSku').prefix +
-                          ':' +
-                          productSkuId
+                        getModelByName('productSku').prefix + ':' + productSkuId
                    }}
                    visibleColumns={{ _id: false, parent: false }}
                  />
--- a/src/components/Dashboard/Management/Products/ProductInfo.jsx
+++ b/src/components/Dashboard/Management/Products/ProductInfo.jsx
@ -88,7 +88,7 @@ const ProductInfo = () => {
    <Flex
      gap='large'
      vertical='true'
-      style={{ maxHeight: '100%', minHeight: 0 }}
+      style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
    >
      <Flex justify={'space-between'}>
        <Space size='small'>
@ -200,7 +200,10 @@ const ProductInfo = () => {
                      <ObjectTable
                        ref={productSkusTableRef}
                        type='productSku'
-                        masterFilter={{ product: getModelByName('product').prefix + ':' + productId }}
+                        masterFilter={{
+                          product:
+                            getModelByName('product').prefix + ':' + productId
+                        }}
                        visibleColumns={{ product: false }}
                      />
                    )}
@ -239,10 +242,7 @@ const ProductInfo = () => {
              <ObjectTable
                type='auditLog'
                masterFilter={{
-                    parent:
-                      getModelByName('product').prefix +
-                      ':' +
-                      productId
+                  parent: getModelByName('product').prefix + ':' + productId
                }}
                visibleColumns={{ _id: false, parent: false }}
              />
--- a/src/components/Dashboard/Management/StockAuditLevels/StockAuditLevelInfo.jsx
+++ b/src/components/Dashboard/Management/StockAuditLevels/StockAuditLevelInfo.jsx
@ -22,7 +22,10 @@ import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import InfoActionButtons from '../../common/InfoActionButtons.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
-import { getModelProperty, getModelByName } from '../../../../database/ObjectModels.js'
+import {
+  getModelProperty,
+  getModelByName
+} from '../../../../database/ObjectModels.js'
 import ScrollBox from '../../common/ScrollBox.jsx'

 const StockAuditLevelInfo = () => {
@ -82,7 +85,7 @@ const StockAuditLevelInfo = () => {
    <Flex
      gap='large'
      vertical='true'
-      style={{ maxHeight: '100%', minHeight: 0 }}
+      style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
    >
      <Flex justify={'space-between'}>
        <Space size='small'>
@ -232,9 +235,7 @@ const StockAuditLevelInfo = () => {
            title='Audit Logs'
            icon={<AuditLogIcon />}
            active={collapseState.auditLogs}
-            onToggle={(expanded) =>
-              updateCollapseState('auditLogs', expanded)
-            }
+            onToggle={(expanded) => updateCollapseState('auditLogs', expanded)}
            collapseKey='auditLogs'
          >
            {objectFormState.loading ? (
--- a/src/components/Dashboard/Management/TaxRates/TaxRateInfo.jsx
+++ b/src/components/Dashboard/Management/TaxRates/TaxRateInfo.jsx
@ -25,7 +25,10 @@ import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import InfoActionButtons from '../../common/InfoActionButtons.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
-import { getModelProperty, getModelByName } from '../../../../database/ObjectModels.js'
+import {
+  getModelProperty,
+  getModelByName
+} from '../../../../database/ObjectModels.js'
 import ScrollBox from '../../common/ScrollBox.jsx'

 const log = loglevel.getLogger('TaxRateInfo')
@ -77,7 +80,7 @@ const TaxRateInfo = () => {
    finishEdit: () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
-    },
+    }
  }

  return (
@ -85,7 +88,7 @@ const TaxRateInfo = () => {
      <Flex
        gap='large'
        vertical='true'
-        style={{ maxHeight: '100%', minHeight: 0 }}
+        style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
      >
        <Flex justify={'space-between'}>
          <Space size='small'>
@ -236,10 +239,7 @@ const TaxRateInfo = () => {
                <ObjectTable
                  type='auditLog'
                  masterFilter={{
-                      parent:
-                        getModelByName('taxRate').prefix +
-                        ':' +
-                        taxRateId
+                    parent: getModelByName('taxRate').prefix + ':' + taxRateId
                  }}
                  visibleColumns={{ _id: false, parent: false }}
                />
--- a/src/components/Dashboard/Management/UserGroups/UserGroupInfo.jsx
+++ b/src/components/Dashboard/Management/UserGroups/UserGroupInfo.jsx
@ -80,14 +80,14 @@ const UserGroupInfo = () => {
    finishEdit: () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
-    },
+    }
  }

  return (
    <Flex
      gap='large'
      vertical='true'
-      style={{ maxHeight: '100%', minHeight: 0 }}
+      style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
    >
      <Flex justify={'space-between'}>
        <Space size='small'>
--- a/src/components/Dashboard/Management/Users/UserInfo.jsx
+++ b/src/components/Dashboard/Management/Users/UserInfo.jsx
@ -86,7 +86,7 @@ const UserInfo = () => {
    <Flex
      gap='large'
      vertical='true'
-      style={{ maxHeight: '100%', minHeight: 0 }}
+      style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
    >
      <Flex justify={'space-between'}>
        <Space size='small'>
--- a/src/components/Dashboard/Management/Vendors/VendorInfo.jsx
+++ b/src/components/Dashboard/Management/Vendors/VendorInfo.jsx
@ -74,7 +74,7 @@ const VendorInfo = () => {
    finishEdit: () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
-    },
+    }
  }

  return (
@ -82,7 +82,7 @@ const VendorInfo = () => {
      <Flex
        gap='large'
        vertical='true'
-        style={{ maxHeight: '100%', minHeight: 0 }}
+        style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
      >
        <Flex justify={'space-between'}>
          <Space size='small'>
@ -209,10 +209,7 @@ const VendorInfo = () => {
                <ObjectTable
                  type='auditLog'
                  masterFilter={{
-                      parent:
-                        getModelByName('vendor').prefix +
-                        ':' +
-                        vendorId
+                    parent: getModelByName('vendor').prefix + ':' + vendorId
                  }}
                  visibleColumns={{ _id: false, parent: false }}
                />
--- a/src/components/Dashboard/Production/FilamentProfiles/FilamentProfileInfo.jsx
+++ b/src/components/Dashboard/Production/FilamentProfiles/FilamentProfileInfo.jsx
@ -111,14 +111,14 @@ const FilamentProfileInfo = () => {
    finishEdit: () => {
      objectFormRef.current?.handleUpdate?.()
      return true
-    },
+    }
  }

  return (
    <Flex
      gap='large'
      vertical='true'
-      style={{ maxHeight: '100%', minHeight: 0 }}
+      style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
    >
      <Flex justify='space-between'>
        <Space size='small'>
--- a/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx
+++ b/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx
@ -25,7 +25,10 @@ import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import InfoActionButtons from '../../common/InfoActionButtons.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
-import { getModelProperty, getModelByName } from '../../../../database/ObjectModels.js'
+import {
+  getModelProperty,
+  getModelByName
+} from '../../../../database/ObjectModels.js'
 import PartIcon from '../../../Icons/PartIcon.jsx'

 const log = loglevel.getLogger('GCodeFileInfo')
@ -91,6 +94,7 @@ const GCodeFileInfo = () => {
        vertical='true'
        style={{
          maxHeight: '100%',
+          height: '100%',
          minHeight: 0
        }}
      >
@ -251,9 +255,7 @@ const GCodeFileInfo = () => {
                  type='auditLog'
                  masterFilter={{
                    parent:
-                        getModelByName('gcodeFile').prefix +
-                        ':' +
-                        gcodeFileId
+                      getModelByName('gcodeFile').prefix + ':' + gcodeFileId
                  }}
                  visibleColumns={{ _id: false, parent: false }}
                />
--- a/src/components/Dashboard/Production/Jobs/JobInfo.jsx
+++ b/src/components/Dashboard/Production/Jobs/JobInfo.jsx
@ -97,6 +97,7 @@ const JobInfo = () => {
      vertical='true'
      style={{
        maxHeight: '100%',
+        height: '100%',
        minHeight: 0
      }}
    >
@ -242,10 +243,7 @@ const JobInfo = () => {
              <ObjectTable
                type='auditLog'
                masterFilter={{
-                    parent:
-                      getModelByName('job').prefix +
-                      ':' +
-                      jobId
+                  parent: getModelByName('job').prefix + ':' + jobId
                }}
                visibleColumns={{ _id: false, parent: false }}
              />
--- a/src/components/Dashboard/Production/PrinterProfiles/PrinterProfileInfo.jsx
+++ b/src/components/Dashboard/Production/PrinterProfiles/PrinterProfileInfo.jsx
@ -27,7 +27,10 @@ import UserNotifierToggle from '../../common/UserNotifierToggle'
 import ViewButton from '../../common/ViewButton'
 import useCollapseState from '../../hooks/useCollapseState'
 import ObjectProperty from '../../common/ObjectProperty'
-import { getModelProperty, getModelByName } from '../../../../database/ObjectModels'
+import {
+  getModelProperty,
+  getModelByName
+} from '../../../../database/ObjectModels'
 import GCodeFileIcon from '../../../Icons/GCodeFileIcon'
 import SettingsIcon from '../../../Icons/SettingsIcon'
 import ExclamationOctagonIcon from '../../../Icons/ExclamationOctagonIcon'
@ -89,14 +92,14 @@ const PrinterProfileInfo = () => {
    finishEdit: () => {
      objectFormRef.current?.handleUpdate?.()
      return true
-    },
+    }
  }

  return (
    <Flex
      gap='large'
      vertical='true'
-      style={{ maxHeight: '100%', minHeight: 0 }}
+      style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
    >
      <Flex justify='space-between'>
        <Space size='small'>
--- a/src/components/Dashboard/Production/Printers/PrinterInfo.jsx
+++ b/src/components/Dashboard/Production/Printers/PrinterInfo.jsx
@ -98,6 +98,7 @@ const PrinterInfo = () => {
      vertical='true'
      style={{
        maxHeight: '100%',
+        height: '100%',
        minHeight: 0
      }}
    >
@ -223,7 +224,9 @@ const PrinterInfo = () => {
              <ObjectTable
                ref={profilesTableRef}
                type='printerProfile'
-                masterFilter={{ printer: getModelByName('printer').prefix + ':' + printerId }}
+                masterFilter={{
+                  printer: getModelByName('printer').prefix + ':' + printerId
+                }}
                visibleColumns={{
                  printer: false,
                  'printer._id': false
@ -262,10 +265,7 @@ const PrinterInfo = () => {
              <ObjectTable
                type='auditLog'
                masterFilter={{
-                    parent:
-                      getModelByName('printer').prefix +
-                      ':' +
-                      printerId
+                  parent: getModelByName('printer').prefix + ':' + printerId
                }}
                visibleColumns={{ _id: false, parent: false }}
              />
--- a/src/components/Dashboard/Production/SubJobs/SubJobInfo.jsx
+++ b/src/components/Dashboard/Production/SubJobs/SubJobInfo.jsx
@ -77,7 +77,7 @@ const SubJobInfo = () => {
      <Flex
        gap='large'
        vertical='true'
-        style={{ maxHeight: '100%', minHeight: 0 }}
+        style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
      >
        <Flex justify={'space-between'}>
          <Space size='small'>
@ -183,7 +183,9 @@ const SubJobInfo = () => {
              ) : (
                <ObjectTable
                  type='stockEvent'
-                  masterFilter={{ owner: getModelByName('subJob').prefix + ':' + subJobId }}
+                  masterFilter={{
+                    owner: getModelByName('subJob').prefix + ':' + subJobId
+                  }}
                  visibleColumns={{
                    owner: false,
                    'owner.type': false
@ -222,10 +224,7 @@ const SubJobInfo = () => {
                <ObjectTable
                  type='auditLog'
                  masterFilter={{
-                      parent:
-                        getModelByName('subJob').prefix +
-                        ':' +
-                        subJobId
+                    parent: getModelByName('subJob').prefix + ':' + subJobId
                  }}
                  visibleColumns={{ _id: false, parent: false }}
                />
--- a/src/components/Dashboard/Sales/Clients/ClientInfo.jsx
+++ b/src/components/Dashboard/Sales/Clients/ClientInfo.jsx
@ -74,7 +74,7 @@ const ClientInfo = () => {
    finishEdit: () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
-    },
+    }
  }

  return (
@ -82,7 +82,7 @@ const ClientInfo = () => {
      <Flex
        gap='large'
        vertical='true'
-        style={{ maxHeight: '100%', minHeight: 0 }}
+        style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
      >
        <Flex justify={'space-between'}>
          <Space size='small'>
@ -209,10 +209,7 @@ const ClientInfo = () => {
                <ObjectTable
                  type='auditLog'
                  masterFilter={{
-                      parent:
-                        getModelByName('client').prefix +
-                        ':' +
-                        clientId
+                    parent: getModelByName('client').prefix + ':' + clientId
                  }}
                  visibleColumns={{ _id: false, parent: false }}
                />
--- a/src/components/Dashboard/Sales/FulfillmentPolicies/FulfillmentPolicyInfo.jsx
+++ b/src/components/Dashboard/Sales/FulfillmentPolicies/FulfillmentPolicyInfo.jsx
@ -93,7 +93,7 @@ const FulfillmentPolicyInfo = () => {
      <Flex
        gap='large'
        vertical='true'
-        style={{ maxHeight: '100%', minHeight: 0 }}
+        style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
      >
        <Flex justify={'space-between'}>
          <Space size='small'>
--- a/src/components/Dashboard/Sales/ListingVarients/ListingVarientInfo.jsx
+++ b/src/components/Dashboard/Sales/ListingVarients/ListingVarientInfo.jsx
@ -96,14 +96,14 @@ const ListingVarientInfo = () => {
    finishEdit: () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
-    },
+    }
  }

  return (
    <Flex
      gap='large'
      vertical='true'
-      style={{ maxHeight: '100%', minHeight: 0 }}
+      style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
    >
      <Flex justify={'space-between'}>
        <Space size='small'>
--- a/src/components/Dashboard/Sales/Listings/ListingInfo.jsx
+++ b/src/components/Dashboard/Sales/Listings/ListingInfo.jsx
@ -101,7 +101,7 @@ const ListingInfo = () => {
    <Flex
      gap='large'
      vertical='true'
-      style={{ maxHeight: '100%', minHeight: 0 }}
+      style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
    >
      <Flex justify={'space-between'}>
        <Space size='small'>
--- a/src/components/Dashboard/Sales/Marketplaces/MarketplaceInfo.jsx
+++ b/src/components/Dashboard/Sales/Marketplaces/MarketplaceInfo.jsx
@ -162,7 +162,7 @@ const MarketplaceInfo = () => {
    <Flex
      gap='large'
      vertical='true'
-      style={{ maxHeight: '100%', minHeight: 0 }}
+      style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
    >
      <Flex justify={'space-between'}>
        <Space size='small'>
--- a/src/components/Dashboard/Sales/ReturnPolicies/ReturnPolicyInfo.jsx
+++ b/src/components/Dashboard/Sales/ReturnPolicies/ReturnPolicyInfo.jsx
@ -93,7 +93,7 @@ const ReturnPolicyInfo = () => {
      <Flex
        gap='large'
        vertical='true'
-        style={{ maxHeight: '100%', minHeight: 0 }}
+        style={{ maxHeight: '100%', height: '100%', minHeight: 0 }}
      >
        <Flex justify={'space-between'}>
          <Space size='small'>
--- a/src/components/Dashboard/Sales/SalesOrders/SalesOrderInfo.jsx
+++ b/src/components/Dashboard/Sales/SalesOrders/SalesOrderInfo.jsx
@ -100,7 +100,7 @@ const SalesOrderInfo = () => {
      orderItemsTableRef?.current?.handleUpdate?.()
      objectFormRef?.current?.handleUpdate?.()
      return true
-    },
+    }
  }

  return (
@ -109,6 +109,7 @@ const SalesOrderInfo = () => {
      vertical='true'
      style={{
        maxHeight: '100%',
+        height: '100%',
        minHeight: 0
      }}
    >
@ -228,7 +229,10 @@ const SalesOrderInfo = () => {
                    <ObjectTable
                      type='orderItem'
                      masterFilter={{
-                        order: getModelByName('salesOrder').prefix + ':' + salesOrderId,
+                        order:
+                          getModelByName('salesOrder').prefix +
+                          ':' +
+                          salesOrderId,
                        orderType: 'salesOrder'
                      }}
                      visibleColumns={{ order: false }}
@ -247,7 +251,10 @@ const SalesOrderInfo = () => {
                    <ObjectTable
                      type='shipment'
                      masterFilter={{
-                        order: getModelByName('salesOrder').prefix + ':' + salesOrderId,
+                        order:
+                          getModelByName('salesOrder').prefix +
+                          ':' +
+                          salesOrderId,
                        orderType: 'salesOrder'
                      }}
                      visibleColumns={{ order: false }}
@ -269,7 +276,10 @@ const SalesOrderInfo = () => {
                      <ObjectTable
                        type='invoice'
                        masterFilter={{
-                          order: getModelByName('salesOrder').prefix + ':' + salesOrderId,
+                          order:
+                            getModelByName('salesOrder').prefix +
+                            ':' +
+                            salesOrderId,
                          orderType: 'salesOrder'
                        }}
                        visibleColumns={{ order: false }}
@ -291,7 +301,10 @@ const SalesOrderInfo = () => {
                      <ObjectTable
                        type='stockEvent'
                        masterFilter={{
-                          owner: getModelByName('salesOrder').prefix + ':' + salesOrderId
+                          owner:
+                            getModelByName('salesOrder').prefix +
+                            ':' +
+                            salesOrderId
                        }}
                      />
                    )}
@ -330,9 +343,7 @@ const SalesOrderInfo = () => {
                type='auditLog'
                masterFilter={{
                  parent:
-                      getModelByName('salesOrder').prefix +
-                      ':' +
-                      salesOrderId
+                    getModelByName('salesOrder').prefix + ':' + salesOrderId
                }}
                visibleColumns={{ _id: false, parent: false }}
              />
--- a/src/components/Dashboard/common/DashboardNavigation.jsx
+++ b/src/components/Dashboard/common/DashboardNavigation.jsx
@ -86,19 +86,40 @@ const NAV_BADGE_STYLE = { padding: 0, fontWeight: 600 }
 const NAV_UPDATE_TAG_STYLE = { cursor: 'pointer', margin: '2px 0 0 0' }
 const NAV_OVERFLOW_BUTTON_STYLE = { marginBottom: '4px' }

+const NAV_FADE_MS = 200
+
 const navigationFadeClass = (visible) =>
  `dashboard-navigation-fade${visible ? '' : ' dashboard-navigation-fade-hidden'}`

+const useDelayedInactive = (visible) => {
+  const [inactive, setInactive] = useState(!visible)
+
+  useEffect(() => {
+    if (visible) {
+      setInactive(false)
+      return undefined
+    }
+
+    const timeoutId = window.setTimeout(() => setInactive(true), NAV_FADE_MS)
+    return () => window.clearTimeout(timeoutId)
+  }, [visible])
+
+  return inactive
+}
+
 const NavigationFade = memo(function NavigationFade({
  visible,
  children,
-  style
+  style,
+  className
 }) {
+  const inactive = useDelayedInactive(visible)
+
  return (
    <div
-      className={navigationFadeClass(visible)}
-      inert={visible ? undefined : true}
-      aria-hidden={visible ? undefined : true}
+      className={classNames(navigationFadeClass(visible), className)}
+      inert={inactive ? true : undefined}
+      aria-hidden={inactive ? true : undefined}
      style={style}
    >
      {children}
@ -109,7 +130,8 @@ const NavigationFade = memo(function NavigationFade({
 NavigationFade.propTypes = {
  visible: PropTypes.bool,
  children: PropTypes.node,
-  style: PropTypes.object
+  style: PropTypes.object,
+  className: PropTypes.string
 }

 const DashboardNavigationTrailingItems = memo(
@ -246,13 +268,17 @@ DashboardElectronCenterItems.propTypes = {
 const DashboardNavigationTrailing = memo(function DashboardNavigationTrailing({
  showControls,
  isOtherApp,
+  isElectron,
  ...itemProps
 }) {
  return (
    <>
      <div className='electrobun-webkit-app-region-no-drag'>
-        <NavigationFade visible={showControls}>
-          <DashboardNavigationTrailingItems {...itemProps} />
+        <NavigationFade visible={!isElectron || showControls}>
+          <DashboardNavigationTrailingItems
+            isElectron={isElectron}
+            {...itemProps}
+          />
        </NavigationFade>
      </div>
      {isOtherApp ? <DashboardWindowButtons /> : null}
@ -470,6 +496,11 @@ const DashboardNavigation = () => {
  const showMobileLogo = !isElectron && isMobile

  useEffect(() => {
+    if (!isElectron) {
+      setAnyModalVisible(false)
+      return
+    }
+
    const isModalWrapVisible = (node) => {
      if (!(node instanceof Element)) return false
      if (node.getAttribute('aria-hidden') === 'true') return false
@ -508,7 +539,7 @@ const DashboardNavigation = () => {
      observer.disconnect()
      if (frameId) window.cancelAnimationFrame(frameId)
    }
-  }, [])
+  }, [isElectron])

  const controlsReady = !isElectron || authenticated
  const showControls = controlsReady && !anyModalVisible
@ -618,16 +649,15 @@ const DashboardNavigation = () => {
    </>
  )

+  const showWindowTitle = isElectron && !showControls
+
  const windowTitle = (
-    <div
-      className={`dashboard-navigation-window-title ${navigationFadeClass(
-        !showControls
-      )}`}
-      aria-hidden={showControls}
-      inert={showControls ? true : undefined}
+    <NavigationFade
+      visible={showWindowTitle}
+      className='dashboard-navigation-window-title'
    >
      <Text type='secondary'>Farm Control</Text>
-    </div>
+    </NavigationFade>
  )

  const navigationCenterBorder = (
@ -644,12 +674,11 @@ const DashboardNavigation = () => {
      {navigationLeading}
      <div className='dashboard-navigation-center'>
        {!isMobile ? (
-          <NavigationFade visible={showControls} style={NAV_CENTER_FADE_STYLE}>
+          <NavigationFade visible style={NAV_CENTER_FADE_STYLE}>
            {menu}
          </NavigationFade>
        ) : null}
        {windowTitle}
-        {navigationCenterBorder}
      </div>
      {navigationTrailing}
    </Flex>