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.

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 {

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:
+                  parent: getModelByName('invoice').prefix + ':' + invoiceId
-                      getModelByName('invoice').prefix +
-                      ':' +
-                      invoiceId
                 }}
                 visibleColumns={{ _id: false, parent: false }}
               />

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

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

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 +
+                      getModelByName('taxRecord').prefix + ':' + taxRecordId
-                        ':' +
-                        taxRecordId
                   }}
                   visibleColumns={{ _id: false, parent: false }}
                 />

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

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 +
+                      getModelByName('orderItem').prefix + ':' + orderItemId
-                        ':' +
-                        orderItemId
                   }}
                   visibleColumns={{ _id: false, parent: false }}
                 />

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 +
+                      getModelByName('partStock').prefix + ':' + partStockId
-                        ':' +
-                        partStockId
                   }}
                   visibleColumns={{ _id: false, parent: false }}
                 />

src/components/Dashboard/Inventory/ProductStocks/ProductStockInfo.jsx

@@ -109,6 +109,7 @@ const ProductStockInfo = () => {
       vertical='true'
       style={{
         maxHeight: '100%',
+        height: '100%',
         minHeight: 0
       }}
     >

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

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

src/components/Dashboard/Inventory/Shipments/ShipmentInfo.jsx

@@ -96,6 +96,7 @@ const ShipmentInfo = () => {
       vertical='true'
       style={{
         maxHeight: '100%',
+        height: '100%',
         minHeight: 0
       }}
     >

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) =>
+            onToggle={(expanded) => updateCollapseState('auditLogs', expanded)}
-              updateCollapseState('auditLogs', expanded)
-            }
             collapseKey='auditLogs'
           >
             {objectFormState.loading ? (
@@ -274,9 +278,7 @@ const StockAuditInfo = () => {
                 type='auditLog'
                 masterFilter={{
                   parent:
-                    getModelByName('stockAudit').prefix +
+                    getModelByName('stockAudit').prefix + ':' + stockAuditId
-                    ':' +
-                    stockAuditId
                 }}
                 visibleColumns={{ _id: false, parent: false }}
               />

src/components/Dashboard/Inventory/StockLocations/StockLocationInfo.jsx

@@ -98,6 +98,7 @@ const StockLocationInfo = () => {
         vertical='true'
         style={{
           maxHeight: '100%',
+          height: '100%',
           minHeight: 0
         }}
       >

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

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 +
+                    getModelByName('appPassword').prefix + ':' + appPasswordId
-                      ':' +
-                      appPasswordId
                 }}
                 visibleColumns={{ _id: false, parent: false }}
               />

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

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:
+                    parent: getModelByName('courier').prefix + ':' + courierId
-                        getModelByName('courier').prefix +
-                        ':' +
-                        courierId
                   }}
                   visibleColumns={{ _id: false, parent: false }}
                 />

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 +
+                      getModelByName('documentJob').prefix + ':' + documentJobId
-                        ':' +
-                        documentJobId
                   }}
                   visibleColumns={{ _id: false, parent: false }}
                 />

src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx

@@ -91,6 +91,7 @@ const DocumentPrinterInfo = () => {
         vertical='true'
         style={{
           maxHeight: '100%',
+          height: '100%',
           minHeight: 0
         }}
       >

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

src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx

@@ -97,6 +97,7 @@ const DocumentTemplateInfo = () => {
         vertical='true'
         style={{
           maxHeight: '100%',
+          height: '100%',
           minHeight: 0
         }}
       >

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

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

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

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 +
+                      getModelByName('filamentSku').prefix + ':' + filamentSkuId
-                        ':' +
-                        filamentSkuId
                   }}
                   visibleColumns={{ _id: false, parent: false }}
                 />

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:
+                  parent: getModelByName('filament').prefix + ':' + filamentId
-                      getModelByName('filament').prefix +
-                      ':' +
-                      filamentId
                 }}
                 visibleColumns={{ _id: false, parent: false }}
               />

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

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:
+                  parent: getModelByName('host').prefix + ':' + hostId
-                      getModelByName('host').prefix +
-                      ':' +
-                      hostId
                 }}
                 visibleColumns={{ _id: false, parent: false }}
               />

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:
+                    parent: getModelByName('material').prefix + ':' + materialId
-                        getModelByName('material').prefix +
-                        ':' +
-                        materialId
                   }}
                   visibleColumns={{ _id: false, parent: false }}
                 />

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:
+                    parent: getModelByName('noteType').prefix + ':' + noteTypeId
-                        getModelByName('noteType').prefix +
-                        ':' +
-                        noteTypeId
                   }}
                   visibleColumns={{ _id: false, parent: false }}
                 />

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:
+                    parent: getModelByName('note').prefix + ':' + noteId
-                        getModelByName('note').prefix +
-                        ':' +
-                        noteId
                   }}
                   visibleColumns={{ _id: false, parent: false }}
                 />

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:
+                    parent: getModelByName('partSku').prefix + ':' + partSkuId
-                        getModelByName('partSku').prefix +
-                        ':' +
-                        partSkuId
                   }}
                   visibleColumns={{ _id: false, parent: false }}
                 />

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:
+                  parent: getModelByName('part').prefix + ':' + partId
-                      getModelByName('part').prefix +
-                      ':' +
-                      partId
                 }}
                 visibleColumns={{ _id: false, parent: false }}
               />

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

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

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 +
+                        getModelByName('productSku').prefix + ':' + productSkuId
-                          ':' +
-                          productSkuId
                     }}
                     visibleColumns={{ _id: false, parent: false }}
                   />

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:
+                  parent: getModelByName('product').prefix + ':' + productId
-                      getModelByName('product').prefix +
-                      ':' +
-                      productId
                 }}
                 visibleColumns={{ _id: false, parent: false }}
               />

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) =>
+            onToggle={(expanded) => updateCollapseState('auditLogs', expanded)}
-              updateCollapseState('auditLogs', expanded)
-            }
             collapseKey='auditLogs'
           >
             {objectFormState.loading ? (

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:
+                    parent: getModelByName('taxRate').prefix + ':' + taxRateId
-                        getModelByName('taxRate').prefix +
-                        ':' +
-                        taxRateId
                   }}
                   visibleColumns={{ _id: false, parent: false }}
                 />

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

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

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:
+                    parent: getModelByName('vendor').prefix + ':' + vendorId
-                        getModelByName('vendor').prefix +
-                        ':' +
-                        vendorId
                   }}
                   visibleColumns={{ _id: false, parent: false }}
                 />

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

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 +
+                      getModelByName('gcodeFile').prefix + ':' + gcodeFileId
-                        ':' +
-                        gcodeFileId
                   }}
                   visibleColumns={{ _id: false, parent: false }}
                 />

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:
+                  parent: getModelByName('job').prefix + ':' + jobId
-                      getModelByName('job').prefix +
-                      ':' +
-                      jobId
                 }}
                 visibleColumns={{ _id: false, parent: false }}
               />

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

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:
+                  parent: getModelByName('printer').prefix + ':' + printerId
-                      getModelByName('printer').prefix +
-                      ':' +
-                      printerId
                 }}
                 visibleColumns={{ _id: false, parent: false }}
               />

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:
+                    parent: getModelByName('subJob').prefix + ':' + subJobId
-                        getModelByName('subJob').prefix +
-                        ':' +
-                        subJobId
                   }}
                   visibleColumns={{ _id: false, parent: false }}
                 />

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:
+                    parent: getModelByName('client').prefix + ':' + clientId
-                        getModelByName('client').prefix +
-                        ':' +
-                        clientId
                   }}
                   visibleColumns={{ _id: false, parent: false }}
                 />

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

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

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

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

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

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 +
+                    getModelByName('salesOrder').prefix + ':' + salesOrderId
-                      ':' +
-                      salesOrderId
                 }}
                 visibleColumns={{ _id: false, parent: false }}
               />

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)}
+      className={classNames(navigationFadeClass(visible), className)}
-      inert={visible ? undefined : true}
+      inert={inactive ? true : undefined}
-      aria-hidden={visible ? undefined : true}
+      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}>
+        <NavigationFade visible={!isElectron || showControls}>
-          <DashboardNavigationTrailingItems {...itemProps} />
+          <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
+    <NavigationFade
-      className={`dashboard-navigation-window-title ${navigationFadeClass(
+      visible={showWindowTitle}
-        !showControls
+      className='dashboard-navigation-window-title'
-      )}`}
-      aria-hidden={showControls}
-      inert={showControls ? true : undefined}
     >
       <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>