assets/stylesheets/App.css

@@ -640,7 +640,6 @@ body {
 
 .h-100 {
   height: 100%;
-  min-height: 0;
 }
 
 .ant-table.ant-table-middle .ant-table-filter-trigger {
@@ -805,15 +804,6 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
   margin-left: 4px;
 }
 
-.farmcontrol-splitter .ant-splitter-panel {
-  overflow: visible;
-}
-
-.farmcontrol-splitter.ant-splitter-horizontal .ant-splitter-panel {
-  width: 100%;
-  min-width: 0;
-}
-
 .farmcontrol-splitter
   .ant-splitter-panel:has(~ .ant-splitter-panel)
   .info-collapse.ant-collapse.ant-collapse-icon-position-end
@@ -822,23 +812,3 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
   .ant-collapse-expand-icon {
   padding-inline-end: 2px;
 }
-
-.objectTableCards {
-  overflow: hidden;
-}
-
-.objectTableCardsContainer {
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-}
-
-.objectTableCardsContainer .ant-spin-nested-loading {
-  width: 100%;
-  height: 100%;
-}
-
-.objectTableCardsContainer .ant-spin-container {
-  width: 100%;
-  height: 100%;
-}

src/components/Dashboard/Finance/Invoices.jsx

@@ -50,7 +50,7 @@ const Invoices = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Finance/Payments.jsx

@@ -50,7 +50,7 @@ const Payments = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Finance/TaxRecords.jsx

@@ -50,7 +50,7 @@ const TaxRecords = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Inventory/FilamentStocks.jsx

@@ -55,7 +55,7 @@ const FilamentStocks = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Inventory/OrderItems.jsx

@@ -50,7 +50,7 @@ const OrderItems = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Inventory/PartStocks.jsx

@@ -55,7 +55,7 @@ const PartStocks = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Inventory/ProductStocks.jsx

@@ -56,7 +56,7 @@ const ProductStocks = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Inventory/PurchaseOrders.jsx

@@ -50,7 +50,7 @@ const PurchaseOrders = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Inventory/Shipments.jsx

@@ -50,7 +50,7 @@ const Shipments = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Inventory/StockAudits.jsx

@@ -55,7 +55,7 @@ const StockAudits = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Inventory/StockEvents.jsx

@@ -38,7 +38,7 @@ const StockEvents = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Inventory/StockLocations.jsx

@@ -53,7 +53,7 @@ const StockLocations = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Inventory/StockTransfers.jsx

@@ -53,7 +53,7 @@ const StockTransfers = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Management/AppPasswords.jsx

@@ -49,7 +49,7 @@ const AppPasswords = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Management/AuditLogs.jsx

@@ -36,7 +36,7 @@ const AuditLogs = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Management/CourierServices.jsx

@@ -50,7 +50,7 @@ const CourierServices = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Management/Couriers.jsx

@@ -49,7 +49,7 @@ const Couriers = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Management/DocumentJobs.jsx

@@ -50,7 +50,7 @@ const DocumentJobs = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Management/DocumentPrinters.jsx

@@ -49,7 +49,7 @@ const DocumentPrinters = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Management/DocumentSizes.jsx

@@ -48,7 +48,7 @@ const DocumentSizes = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Management/DocumentTemplates.jsx

@@ -50,7 +50,7 @@ const DocumentTemplates = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Management/FilamentSkus.jsx

@@ -53,7 +53,7 @@ const FilamentSkus = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Management/Filaments.jsx

@@ -55,7 +55,7 @@ const Filaments = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Management/Files.jsx

@@ -38,7 +38,7 @@ const Files = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Management/Hosts.jsx

@@ -54,7 +54,7 @@ const Hosts = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Management/Materials.jsx

@@ -52,7 +52,7 @@ const Materials = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Management/NoteTypes.jsx

@@ -50,7 +50,7 @@ const NoteTypes = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Management/PartSkus.jsx

@@ -52,7 +52,7 @@ const PartSkus = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Management/Parts.jsx

@@ -54,7 +54,7 @@ const Parts = (filter) => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Management/ProductCategories.jsx

@@ -52,7 +52,7 @@ const ProductCategories = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Management/ProductSkus.jsx

@@ -53,7 +53,7 @@ const ProductSkus = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Management/Products.jsx

@@ -325,7 +325,7 @@ const Products = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Management/TaxRates.jsx

@@ -49,7 +49,7 @@ const TaxRates = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Management/Users.jsx

@@ -37,7 +37,7 @@ const Users = () => {
 
   return (
     <Flex vertical={'true'} gap='large' className='h-100'>
-      <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+      <Flex justify={'space-between'}>
         <Space size='small'>
           <Dropdown menu={actionItems}>
             <Button>Actions</Button>

src/components/Dashboard/Management/Vendors.jsx

@@ -49,7 +49,7 @@ const Vendors = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Production/FilamentProfiles.jsx

@@ -77,7 +77,7 @@ const FilamentProfiles = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Production/GCodeFiles.jsx

@@ -52,7 +52,7 @@ const GCodeFiles = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Production/Jobs.jsx

@@ -54,7 +54,7 @@ const Jobs = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Production/PrinterProfiles.jsx

@@ -66,7 +66,7 @@ const PrinterProfiles = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Production/Printers.jsx

@@ -55,7 +55,7 @@ const Printers = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Production/SubJobs.jsx

@@ -39,7 +39,7 @@ const SubJobs = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Sales/Clients.jsx

@@ -49,7 +49,7 @@ const Clients = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Sales/Listings.jsx

@@ -50,7 +50,7 @@ const Listings = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Sales/Marketplaces.jsx

@@ -50,7 +50,7 @@ const Marketplaces = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/Sales/SalesOrders.jsx

@@ -50,7 +50,7 @@ const SalesOrders = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
-        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
+        <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
               <Button>Actions</Button>

src/components/Dashboard/common/FilePreview.jsx

@@ -36,8 +36,6 @@ const FilePreview = ({ file, style = {} }) => {
     }
   }, [file._id, file?.type, fetchPreview, token])
 
-  console.log(file)
-
   if (loading == true || !file?.type) {
     return <LoadingPlaceholder message={'Loading file preview...'} />
   }
@@ -46,11 +44,13 @@ const FilePreview = ({ file, style = {} }) => {
     return <div style={{ color: 'red' }}>{error}</div>
   }
 
-  const isGcode =
+  const isGcode = ['.g', '.gcode'].includes(
-    ['.g', '.gcode'].includes((file?.extension || '').toLowerCase()) || false
+    (file?.extension || '').toLowerCase()
+  )
 
-  const is3DModel =
+  const is3DModel = ['.stl', '.3mf'].includes(
-    ['.stl', '.3mf'].includes((file?.extension || '').toLowerCase()) || false
+    (file?.extension || '').toLowerCase()
+  )
 
   const isImage = file?.type.startsWith('image/')
 

src/components/Dashboard/common/ObjectCard.jsx

@@ -66,31 +66,6 @@ const ObjectCard = ({
     ? descriptionItems.slice(2)
     : descriptionItems
 
-  const nameContent = (
-    <>
-      <Flex align='center' gap={12} style={{ minWidth: 0 }}>
-        {modelIcon}
-        <ObjectProperty
-          {...model.properties.find((p) => p.name === 'name')}
-          objectData={record}
-          isEditing={isEditing}
-          style={{
-            fontSize: 20,
-            fontWeight: '600',
-            lineHeight: 1.2,
-            minWidth: 0
-          }}
-        />
-        {visibleColumns?.state == true && (
-          <ObjectProperty
-            {...model.properties.find((p) => p.name === 'state')}
-            objectData={record}
-          />
-        )}
-      </Flex>
-    </>
-  )
-
   return (
     <Card
       styles={{ body: { padding: 18 } }}
@@ -113,7 +88,28 @@ const ObjectCard = ({
               size={128}
             />
             <Flex vertical gap={10} style={{ minWidth: 0 }}>
-              {visibleColumns?.name == true && nameContent}
+              {visibleColumns?.name == true && (
+                <Flex align='center' gap={12} style={{ minWidth: 0 }}>
+                  {modelIcon}
+                  <ObjectProperty
+                    {...model.properties.find((p) => p.name === 'name')}
+                    objectData={record}
+                    isEditing={isEditing}
+                    style={{
+                      fontSize: 20,
+                      fontWeight: '600',
+                      lineHeight: 1.2,
+                      minWidth: 0
+                    }}
+                  />
+                  {visibleColumns?.state == true && (
+                    <ObjectProperty
+                      {...model.properties.find((p) => p.name === 'state')}
+                      objectData={record}
+                    />
+                  )}
+                </Flex>
+              )}
               {primaryDescriptionItems.length > 0 && (
                 <Descriptions
                   column={1}
@@ -127,7 +123,6 @@ const ObjectCard = ({
           </Flex>
         )}
         <Flex vertical gap={8}>
-          {visibleColumns?.name == true && !thumbnailPresent && nameContent}
           {remainingDescriptionItems.length > 0 && (
             <Descriptions
               column={1}

src/components/Dashboard/common/ObjectTable.jsx

@@ -45,7 +45,6 @@ import { AuthContext } from '../context/AuthContext'
 import { ElectronContext } from '../context/ElectronContext'
 import ActionsIcon from '../../Icons/ActionsIcon'
 import FilterIcon from '../../Icons/FilterIcon'
-import ScrollBox from './ScrollBox'
 
 const logger = loglevel.getLogger('DasboardTable')
 logger.setLevel(config.logLevel)
@@ -53,14 +52,6 @@ logger.setLevel(config.logLevel)
 const SCROLL_THRESHOLD = 50
 const SKELETON_HEIGHT = 49.5
 
-const getCardColSpan = (containerWidth) => {
-  if (containerWidth >= 2980) return 2
-  if (containerWidth >= 1780) return 4
-  if (containerWidth >= 1080) return 8
-  if (containerWidth >= 680) return 12
-  return 24
-}
-
 const RowForm = ({ record, isEditing, onRegister, children }) => {
   const [form] = Form.useForm()
   useEffect(() => {
@@ -141,7 +132,7 @@ const ObjectTable = forwardRef(
     const navigate = useNavigate()
     var adjustedScrollHeight = scrollHeight
     if (isMobile) {
-      adjustedScrollHeight = 'calc(var(--unit-100vh) - 298px)'
+      adjustedScrollHeight = 'calc(var(--unit-100vh) - 316px)'
     }
     if (cards) {
       adjustedScrollHeight = 'calc(var(--unit-100vh) - 210px)'
@@ -1046,68 +1037,13 @@ const ObjectTable = forwardRef(
     }
 
     // Card view rendering
-    const [cardColSpan, setCardColSpan] = useState(24)
+    const cardsContainerRef = useRef(null)
-    const cardsContainerNodeRef = useRef(null)
-    const cardsResizeObserverRef = useRef(null)
-
-    const measureCardColSpan = useCallback(() => {
-      const node = cardsContainerNodeRef.current
-      if (!node) return
-      const panel = node.closest('.ant-splitter-panel')
-      const width = (panel ?? node).getBoundingClientRect().width
-      if (width <= 0) return
-      const nextSpan = getCardColSpan(width)
-      setCardColSpan((prev) => (prev === nextSpan ? prev : nextSpan))
-    }, [])
-
-    const objectTableCardsContainerRef = useCallback(
-      (node) => {
-        cardsResizeObserverRef.current?.disconnect()
-        cardsResizeObserverRef.current = null
-        cardsContainerNodeRef.current = node
-
-        if (!node) return
-
-        let rafId = null
-        const scheduleMeasure = () => {
-          if (rafId != null) cancelAnimationFrame(rafId)
-          rafId = requestAnimationFrame(() => {
-            rafId = null
-            measureCardColSpan()
-          })
-        }
-
-        scheduleMeasure()
-
-        const observer = new ResizeObserver(scheduleMeasure)
-        const panel = node.closest('.ant-splitter-panel')
-        if (panel) {
-          observer.observe(panel)
-        } else {
-          observer.observe(node)
-        }
-
-        cardsResizeObserverRef.current = observer
-      },
-      [measureCardColSpan]
-    )
-
-    useLayoutEffect(() => {
-      if (!cards) return
-      measureCardColSpan()
-    }, [cards, showFilterSidebar, measureCardColSpan])
-
-    useEffect(() => {
-      return () => cardsResizeObserverRef.current?.disconnect()
-    }, [])
 
     // Card view scroll handler
     useEffect(() => {
       if (!cards) return
-      const container = cardsContainerNodeRef.current
+      const container = cardsContainerRef.current
       if (!container) return
-      const scrollEl = container.querySelector('.simplebar-content-wrapper')
-      if (!scrollEl) return
 
       const handleCardsScroll = (e) => {
         const { scrollTop, scrollHeight, clientHeight } = e.target
@@ -1119,60 +1055,68 @@ const ObjectTable = forwardRef(
           scrollHeight - scrollTop - clientHeight < 100 &&
           !lazyLoading
         ) {
-          loadNextPage(scrollEl)
+          loadNextPage()
         } else if (
           firstPage?.isSkeletonPage &&
           scrollTop < 100 &&
           !lazyLoading
         ) {
-          loadPreviousPage(scrollEl)
+          loadPreviousPage()
         }
       }
 
-      scrollEl.addEventListener('scroll', handleCardsScroll)
+      container.addEventListener('scroll', handleCardsScroll)
-      return () => scrollEl.removeEventListener('scroll', handleCardsScroll)
+      return () => container.removeEventListener('scroll', handleCardsScroll)
     }, [cards, pages, lazyLoading, loadNextPage, loadPreviousPage])
 
     const renderCards = () => {
       return (
-        <ScrollBox
+        <Row
+          gutter={[16, 16]}
           style={{
-            maxHeight: `100%`
+            overflowY: 'auto',
+            maxHeight: adjustedScrollHeight
           }}
+          ref={cardsContainerRef}
         >
-          <div className='objectTableCards'>
+          {tableData.map((record) => {
-            <Row gutter={[16, 16]} key={cardColSpan}>
+            if (record?._id == undefined) {
-              {tableData.map((record) => {
+              return null
-                if (record?._id == undefined) {
+            }
-                  return null
+            return (
-                }
+              <Col
-                return (
+                xs={24}
-                  <Col span={cardColSpan} key={record._id}>
+                sm={24}
-                    <div style={{ width: '100%', overflow: 'hidden' }}>
+                md={24}
-                      <RowForm
+                lg={12}
+                xl={12}
+                xxl={8}
+                xxxl={6}
+                key={record._id}
+              >
+                <div style={{ width: '100%', overflow: 'hidden' }}>
+                  <RowForm
+                    record={record}
+                    isEditing={isEditing}
+                    onRegister={registerForm}
+                  >
+                    <Flex align={'center'} vertical gap={'middle'}>
+                      <ObjectCard
+                        model={model}
+                        modelProperties={modelProperties}
+                        visibleColumns={visibleColumns}
                         record={record}
                         isEditing={isEditing}
-                        onRegister={registerForm}
+                        rowActions={rowActions}
-                      >
+                        renderActions={renderActions}
-                        <Flex align={'center'} vertical gap={'middle'}>
+                      />
-                          <ObjectCard
+                    </Flex>
-                            model={model}
+                  </RowForm>
-                            modelProperties={modelProperties}
+                </div>
-                            visibleColumns={visibleColumns}
+              </Col>
-                            record={record}
+            )
-                            isEditing={isEditing}
+          })}
-                            rowActions={rowActions}
+        </Row>
-                            renderActions={renderActions}
-                          />
-                        </Flex>
-                      </RowForm>
-                    </div>
-                  </Col>
-                )
-              })}
-            </Row>
-          </div>
-        </ScrollBox>
       )
     }
 
@@ -1195,30 +1139,13 @@ const ObjectTable = forwardRef(
     )
 
     const tableContent = (
-      <Flex
+      <Flex gap={'middle'} vertical style={{ flex: 1, minWidth: 0 }}>
-        gap={'middle'}
+        <Splitter className={'farmcontrol-splitter'}>
-        vertical
-        style={{ flex: 1, minWidth: 0, minHeight: 0 }}
-      >
-        <Splitter
-          className={'farmcontrol-splitter'}
-          onResize={measureCardColSpan}
-          onResizeEnd={measureCardColSpan}
-        >
           <Splitter.Panel>
             {cards ? (
-              <div
+              <Spin indicator={<LoadingOutlined />} spinning={loading}>
-                className='objectTableCardsContainer'
+                {renderCards()}
-                ref={objectTableCardsContainerRef}
+              </Spin>
-              >
-                <Spin
-                  indicator={<LoadingOutlined />}
-                  spinning={loading}
-                  style={{ height: '100%' }}
-                >
-                  {renderCards()}
-                </Spin>
-              </div>
             ) : (
               <Table
                 ref={tableRef}

src/components/Dashboard/context/ApiServerContext.jsx

@@ -145,62 +145,48 @@ const ApiServerProvider = ({ children }) => {
     notificationListenersRef.current.clear()
   }, [])
 
-  const resubscribeActivityListeners = useCallback(
+  const resubscribeActivityListeners = useCallback((socket = socketRef.current) => {
-    (socket = socketRef.current) => {
+    if (!socket?.connected) {
-      if (!socket?.connected) {
+      return
+    }
+
+    subscribedActivityCallbacksRef.current.forEach((callbacks, callbacksRefKey) => {
+      if (!callbacks?.length) {
         return
       }
 
-      subscribedActivityCallbacksRef.current.forEach(
+      if (subscribedActivityServerSubscriptionsRef.current.has(callbacksRefKey)) {
-        (callbacks, callbacksRefKey) => {
+        return
-          if (!callbacks?.length) {
+      }
-            return
-          }
 
-          if (
+      const colonIndex = callbacksRefKey.indexOf(':')
-            subscribedActivityServerSubscriptionsRef.current.has(
+      if (colonIndex === -1) {
-              callbacksRefKey
+        return
-            )
+      }
-          ) {
-            return
-          }
 
-          const colonIndex = callbacksRefKey.indexOf(':')
+      const objectType = callbacksRefKey.slice(0, colonIndex)
-          if (colonIndex === -1) {
+      const objectId = callbacksRefKey.slice(colonIndex + 1)
-            return
-          }
 
-          const objectType = callbacksRefKey.slice(0, colonIndex)
+      socket.emit(
-          const objectId = callbacksRefKey.slice(colonIndex + 1)
+        'subscribeToObjectActivity',
-
+        { _id: objectId, objectType },
-          socket.emit(
+        (result) => {
-            'subscribeToObjectActivity',
+          if (result?.success) {
-            { _id: objectId, objectType },
+            subscribedActivityServerSubscriptionsRef.current.add(callbacksRefKey)
-            (result) => {
+            if (Array.isArray(result.activities)) {
-              if (result?.success) {
+              callbacks.forEach((callback) => {
-                subscribedActivityServerSubscriptionsRef.current.add(
+                try {
-                  callbacksRefKey
+                  callback(null, result.activities)
-                )
+                } catch (error) {
-                if (Array.isArray(result.activities)) {
+                  logger.error('Error in activity resubscribe callback:', error)
-                  callbacks.forEach((callback) => {
-                    try {
-                      callback(null, result.activities)
-                    } catch (error) {
-                      logger.error(
-                        'Error in activity resubscribe callback:',
-                        error
-                      )
-                    }
-                  })
                 }
-              }
+              })
             }
-          )
+          }
         }
       )
-    },
+    })
-    []
+  }, [])
-  )
 
   const registerNotificationListener = useCallback((callback) => {
     notificationListenersRef.current.add(callback)
@@ -980,9 +966,7 @@ const ApiServerProvider = ({ children }) => {
           { _id: id, objectType: type },
           (result) => {
             if (result?.success) {
-              subscribedActivityServerSubscriptionsRef.current.add(
+              subscribedActivityServerSubscriptionsRef.current.add(callbacksRefKey)
-                callbacksRefKey
-              )
               if (Array.isArray(result.activities)) {
                 subscribedActivityCallbacksRef.current
                   .get(callbacksRefKey)
@@ -990,10 +974,7 @@ const ApiServerProvider = ({ children }) => {
                     try {
                       activityCallback(null, result.activities)
                     } catch (error) {
-                      logger.error(
+                      logger.error('Error in activity subscribe callback:', error)
-                        'Error in activity subscribe callback:',
-                        error
-                      )
                     }
                   })
               }

src/database/models/User.js

@@ -68,13 +68,6 @@ export const User = {
       readOnly: true,
       columnWidth: 180
     },
-    {
-      name: 'updatedAt',
-      label: 'Updated At',
-      type: 'dateTime',
-      readOnly: true,
-      columnWidth: 175
-    },
     {
       name: 'name',
       label: 'Name',
@@ -83,13 +76,12 @@ export const User = {
       type: 'text',
       columnWidth: 200
     },
-
     {
-      name: 'username',
+      name: 'updatedAt',
-      label: 'Username',
+      label: 'Updated At',
-      required: true,
+      type: 'dateTime',
-      type: 'text',
+      readOnly: true,
-      columnWidth: 150
+      columnWidth: 175
     },
 
     {
@@ -98,7 +90,13 @@ export const User = {
       type: 'text',
       columnWidth: 130
     },
-
+    {
+      name: 'username',
+      label: 'Username',
+      required: true,
+      type: 'text',
+      columnWidth: 150
+    },
     {
       name: 'lastName',
       label: 'Last Name',