Refactor ObjectCard and ObjectTable components for improved layout and responsiveness

- Introduced a new method to dynamically calculate card column span based on container width in ObjectTable, enhancing responsiveness. - Updated ObjectCard to simplify rendering logic by extracting name and state properties into a separate component. - Added min-width: 0 to relevant CSS classes in App.css to ensure proper layout handling and prevent overflow issues.
Enhance layout and styling across various components
2026-08-01 00:05:10 +01:00 · 2026-07-31 23:41:49 +01:00
51 changed files with 305 additions and 176 deletions
--- a/assets/stylesheets/App.css
+++ b/assets/stylesheets/App.css
@ -640,6 +640,7 @@ body {

 .h-100 {
  height: 100%;
+  min-height: 0;
 }

 .ant-table.ant-table-middle .ant-table-filter-trigger {
@ -804,6 +805,15 @@ 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
@ -812,3 +822,23 @@ 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%;
+}
--- a/src/components/Dashboard/Finance/Invoices.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Finance/Payments.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Finance/TaxRecords.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Inventory/FilamentStocks.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Inventory/OrderItems.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Inventory/PartStocks.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Inventory/ProductStocks.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Inventory/PurchaseOrders.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Inventory/Shipments.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Inventory/StockAudits.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Inventory/StockEvents.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Inventory/StockLocations.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Inventory/StockTransfers.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Management/AppPasswords.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Management/AuditLogs.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Management/CourierServices.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Management/Couriers.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Management/DocumentJobs.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Management/DocumentPrinters.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Management/DocumentSizes.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Management/DocumentTemplates.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Management/FilamentSkus.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Management/Filaments.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Management/Files.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Management/Hosts.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Management/Materials.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Management/NoteTypes.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Management/PartSkus.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Management/Parts.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Management/ProductCategories.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Management/ProductSkus.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Management/Products.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Management/TaxRates.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Management/Users.jsx
+++ b/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'}>
+      <Flex justify={'space-between'} style={{ minHeight: 0 }}>
        <Space size='small'>
          <Dropdown menu={actionItems}>
            <Button>Actions</Button>
--- a/src/components/Dashboard/Management/Vendors.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Production/FilamentProfiles.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Production/GCodeFiles.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Production/Jobs.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Production/PrinterProfiles.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Production/Printers.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Production/SubJobs.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Sales/Clients.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Sales/Listings.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Sales/Marketplaces.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/Sales/SalesOrders.jsx
+++ b/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'}>
+        <Flex justify={'space-between'} style={{ minHeight: 0 }}>
          <Space size='small'>
            <Dropdown menu={actionItems}>
              <Button>Actions</Button>
--- a/src/components/Dashboard/common/FilePreview.jsx
+++ b/src/components/Dashboard/common/FilePreview.jsx
@ -36,6 +36,8 @@ const FilePreview = ({ file, style = {} }) => {
    }
  }, [file._id, file?.type, fetchPreview, token])

+  console.log(file)
+
  if (loading == true || !file?.type) {
    return <LoadingPlaceholder message={'Loading file preview...'} />
  }
@ -44,13 +46,11 @@ const FilePreview = ({ file, style = {} }) => {
    return <div style={{ color: 'red' }}>{error}</div>
  }

-  const isGcode = ['.g', '.gcode'].includes(
-    (file?.extension || '').toLowerCase()
-  )
+  const isGcode =
+    ['.g', '.gcode'].includes((file?.extension || '').toLowerCase()) || false

-  const is3DModel = ['.stl', '.3mf'].includes(
-    (file?.extension || '').toLowerCase()
-  )
+  const is3DModel =
+    ['.stl', '.3mf'].includes((file?.extension || '').toLowerCase()) || false

  const isImage = file?.type.startsWith('image/')

--- a/src/components/Dashboard/common/ObjectCard.jsx
+++ b/src/components/Dashboard/common/ObjectCard.jsx
@ -66,6 +66,31 @@ 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 } }}
@ -88,28 +113,7 @@ const ObjectCard = ({
              size={128}
            />
            <Flex vertical gap={10} style={{ minWidth: 0 }}>
-              {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>
-              )}
+              {visibleColumns?.name == true && nameContent}
              {primaryDescriptionItems.length > 0 && (
                <Descriptions
                  column={1}
@ -123,6 +127,7 @@ const ObjectCard = ({
          </Flex>
        )}
        <Flex vertical gap={8}>
+          {visibleColumns?.name == true && !thumbnailPresent && nameContent}
          {remainingDescriptionItems.length > 0 && (
            <Descriptions
              column={1}
--- a/src/components/Dashboard/common/ObjectTable.jsx
+++ b/src/components/Dashboard/common/ObjectTable.jsx
@ -45,6 +45,7 @@ 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)
@ -52,6 +53,14 @@ 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(() => {
@ -132,7 +141,7 @@ const ObjectTable = forwardRef(
    const navigate = useNavigate()
    var adjustedScrollHeight = scrollHeight
    if (isMobile) {
-      adjustedScrollHeight = 'calc(var(--unit-100vh) - 316px)'
+      adjustedScrollHeight = 'calc(var(--unit-100vh) - 298px)'
    }
    if (cards) {
      adjustedScrollHeight = 'calc(var(--unit-100vh) - 210px)'
@ -1037,13 +1046,68 @@ const ObjectTable = forwardRef(
    }

    // Card view rendering
-    const cardsContainerRef = useRef(null)
+    const [cardColSpan, setCardColSpan] = useState(24)
+    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 = cardsContainerRef.current
+      const container = cardsContainerNodeRef.current
      if (!container) return
+      const scrollEl = container.querySelector('.simplebar-content-wrapper')
+      if (!scrollEl) return

      const handleCardsScroll = (e) => {
        const { scrollTop, scrollHeight, clientHeight } = e.target
@ -1055,45 +1119,35 @@ const ObjectTable = forwardRef(
          scrollHeight - scrollTop - clientHeight < 100 &&
          !lazyLoading
        ) {
-          loadNextPage()
+          loadNextPage(scrollEl)
        } else if (
          firstPage?.isSkeletonPage &&
          scrollTop < 100 &&
          !lazyLoading
        ) {
-          loadPreviousPage()
+          loadPreviousPage(scrollEl)
        }
      }

-      container.addEventListener('scroll', handleCardsScroll)
-      return () => container.removeEventListener('scroll', handleCardsScroll)
+      scrollEl.addEventListener('scroll', handleCardsScroll)
+      return () => scrollEl.removeEventListener('scroll', handleCardsScroll)
    }, [cards, pages, lazyLoading, loadNextPage, loadPreviousPage])

    const renderCards = () => {
      return (
-        <Row
-          gutter={[16, 16]}
+        <ScrollBox
          style={{
-            overflowY: 'auto',
-            maxHeight: adjustedScrollHeight
+            maxHeight: `100%`
          }}
-          ref={cardsContainerRef}
        >
+          <div className='objectTableCards'>
+            <Row gutter={[16, 16]} key={cardColSpan}>
              {tableData.map((record) => {
                if (record?._id == undefined) {
                  return null
                }
                return (
-              <Col
-                xs={24}
-                sm={24}
-                md={24}
-                lg={12}
-                xl={12}
-                xxl={8}
-                xxxl={6}
-                key={record._id}
-              >
+                  <Col span={cardColSpan} key={record._id}>
                    <div style={{ width: '100%', overflow: 'hidden' }}>
                      <RowForm
                        record={record}
@ -1117,6 +1171,8 @@ const ObjectTable = forwardRef(
                )
              })}
            </Row>
+          </div>
+        </ScrollBox>
      )
    }

@ -1139,13 +1195,30 @@ const ObjectTable = forwardRef(
    )

    const tableContent = (
-      <Flex gap={'middle'} vertical style={{ flex: 1, minWidth: 0 }}>
-        <Splitter className={'farmcontrol-splitter'}>
+      <Flex
+        gap={'middle'}
+        vertical
+        style={{ flex: 1, minWidth: 0, minHeight: 0 }}
+      >
+        <Splitter
+          className={'farmcontrol-splitter'}
+          onResize={measureCardColSpan}
+          onResizeEnd={measureCardColSpan}
+        >
          <Splitter.Panel>
            {cards ? (
-              <Spin indicator={<LoadingOutlined />} spinning={loading}>
+              <div
+                className='objectTableCardsContainer'
+                ref={objectTableCardsContainerRef}
+              >
+                <Spin
+                  indicator={<LoadingOutlined />}
+                  spinning={loading}
+                  style={{ height: '100%' }}
+                >
                  {renderCards()}
                </Spin>
+              </div>
            ) : (
              <Table
                ref={tableRef}
--- a/src/components/Dashboard/context/ApiServerContext.jsx
+++ b/src/components/Dashboard/context/ApiServerContext.jsx
@ -145,17 +145,23 @@ const ApiServerProvider = ({ children }) => {
    notificationListenersRef.current.clear()
  }, [])

-  const resubscribeActivityListeners = useCallback((socket = socketRef.current) => {
+  const resubscribeActivityListeners = useCallback(
+    (socket = socketRef.current) => {
      if (!socket?.connected) {
        return
      }

-    subscribedActivityCallbacksRef.current.forEach((callbacks, callbacksRefKey) => {
+      subscribedActivityCallbacksRef.current.forEach(
+        (callbacks, callbacksRefKey) => {
          if (!callbacks?.length) {
            return
          }

-      if (subscribedActivityServerSubscriptionsRef.current.has(callbacksRefKey)) {
+          if (
+            subscribedActivityServerSubscriptionsRef.current.has(
+              callbacksRefKey
+            )
+          ) {
            return
          }

@ -172,21 +178,29 @@ const ApiServerProvider = ({ children }) => {
            { _id: objectId, objectType },
            (result) => {
              if (result?.success) {
-            subscribedActivityServerSubscriptionsRef.current.add(callbacksRefKey)
+                subscribedActivityServerSubscriptionsRef.current.add(
+                  callbacksRefKey
+                )
                if (Array.isArray(result.activities)) {
                  callbacks.forEach((callback) => {
                    try {
                      callback(null, result.activities)
                    } catch (error) {
-                  logger.error('Error in activity resubscribe callback:', error)
+                      logger.error(
+                        'Error in activity resubscribe callback:',
+                        error
+                      )
                    }
                  })
                }
              }
            }
          )
-    })
-  }, [])
+        }
+      )
+    },
+    []
+  )

  const registerNotificationListener = useCallback((callback) => {
    notificationListenersRef.current.add(callback)
@ -966,7 +980,9 @@ const ApiServerProvider = ({ children }) => {
          { _id: id, objectType: type },
          (result) => {
            if (result?.success) {
-              subscribedActivityServerSubscriptionsRef.current.add(callbacksRefKey)
+              subscribedActivityServerSubscriptionsRef.current.add(
+                callbacksRefKey
+              )
              if (Array.isArray(result.activities)) {
                subscribedActivityCallbacksRef.current
                  .get(callbacksRefKey)
@ -974,7 +990,10 @@ const ApiServerProvider = ({ children }) => {
                    try {
                      activityCallback(null, result.activities)
                    } catch (error) {
-                      logger.error('Error in activity subscribe callback:', error)
+                      logger.error(
+                        'Error in activity subscribe callback:',
+                        error
+                      )
                    }
                  })
              }
--- a/src/database/models/User.js
+++ b/src/database/models/User.js
@ -68,6 +68,13 @@ export const User = {
      readOnly: true,
      columnWidth: 180
    },
+    {
+      name: 'updatedAt',
+      label: 'Updated At',
+      type: 'dateTime',
+      readOnly: true,
+      columnWidth: 175
+    },
    {
      name: 'name',
      label: 'Name',
@ -76,12 +83,13 @@ export const User = {
      type: 'text',
      columnWidth: 200
    },
+
    {
-      name: 'updatedAt',
-      label: 'Updated At',
-      type: 'dateTime',
-      readOnly: true,
-      columnWidth: 175
+      name: 'username',
+      label: 'Username',
+      required: true,
+      type: 'text',
+      columnWidth: 150
    },

    {
@ -90,13 +98,7 @@ export const User = {
      type: 'text',
      columnWidth: 130
    },
-    {
-      name: 'username',
-      label: 'Username',
-      required: true,
-      type: 'text',
-      columnWidth: 150
-    },
+
    {
      name: 'lastName',
      label: 'Last Name',