From 27f5989eb80c3a63efd58a7968b5f4e567b96d6c Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sat, 20 Jun 2026 22:56:07 +0100
Subject: [PATCH] Added splitter to filter sidebar.

---
 .../Dashboard/common/FilterSidebar.jsx        |  6 +-
 .../Dashboard/common/ObjectTable.jsx          | 84 +++++++++----------
 2 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/src/components/Dashboard/common/FilterSidebar.jsx b/src/components/Dashboard/common/FilterSidebar.jsx
index c57decb..0f3a092 100644
--- a/src/components/Dashboard/common/FilterSidebar.jsx
+++ b/src/components/Dashboard/common/FilterSidebar.jsx
@@ -136,7 +136,7 @@ const FilterSidebar = ({
   }
 
   return (
-    <Card style={{ width: '25%', flexShrink: 0, height: '100%' }}>
+    <Card style={{ flexShrink: 0, height: '100%' }}>
       <Flex vertical gap='middle'>
         <Flex justify='space-between'>
           <Dropdown menu={menuItems} trigger={['hover']} placement='bottomLeft'>
@@ -158,14 +158,14 @@ const FilterSidebar = ({
                 value={row.field || undefined}
                 onChange={(v) => changeField(row.field, v)}
                 options={availableOptions(row.field)}
-                style={{ minWidth: 80, flex: 1 }}
+                style={{ minWidth: 80 }}
                 allowClear={false}
               />
               <Input
                 placeholder='Value'
                 value={row.value}
                 onChange={(e) => changeValue(row.field, e.target.value)}
-                style={{ width: 160 }}
+                style={{ flex: 1 }}
               />
               <Button
                 icon={<CloseOutlined />}
diff --git a/src/components/Dashboard/common/ObjectTable.jsx b/src/components/Dashboard/common/ObjectTable.jsx
index 26cf3fe..6ab3fea 100644
--- a/src/components/Dashboard/common/ObjectTable.jsx
+++ b/src/components/Dashboard/common/ObjectTable.jsx
@@ -19,7 +19,8 @@ import {
   Input,
   Space,
   Tooltip,
-  Form
+  Form,
+  Splitter
 } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import PropTypes from 'prop-types'
@@ -940,50 +941,49 @@ const ObjectTable = forwardRef(
 
     const tableContent = (
       <Flex gap={'middle'} vertical style={{ flex: 1, minWidth: 0 }}>
-        {cards ? (
-          <Spin indicator={<LoadingOutlined />} spinning={loading}>
-            {renderCards()}
-          </Spin>
-        ) : (
-          <Table
-            ref={tableRef}
-            dataSource={tableData}
-            columns={columnsWithSkeleton}
-            className='dashboard-table'
-            pagination={false}
-            scroll={{ y: adjustedScrollHeight }}
-            rowKey='_id'
-            loading={{ spinning: loading, indicator: <LoadingOutlined spin /> }}
-            onScroll={handleScroll}
-            onChange={handleTableChange}
-            showSorterTooltip={false}
-            style={{ height: '100%' }}
-            size={size}
-            components={components}
-            onRow={onRow}
-          />
-        )}
+        <Splitter className={'farmcontrol-splitter'}>
+          <Splitter.Panel>
+            {cards ? (
+              <Spin indicator={<LoadingOutlined />} spinning={loading}>
+                {renderCards()}
+              </Spin>
+            ) : (
+              <Table
+                ref={tableRef}
+                dataSource={tableData}
+                columns={columnsWithSkeleton}
+                className='dashboard-table'
+                pagination={false}
+                scroll={{ y: adjustedScrollHeight }}
+                rowKey='_id'
+                loading={{
+                  spinning: loading,
+                  indicator: <LoadingOutlined spin />
+                }}
+                onScroll={handleScroll}
+                onChange={handleTableChange}
+                showSorterTooltip={false}
+                style={{ height: '100%' }}
+                size={size}
+                components={components}
+                onRow={onRow}
+              />
+            )}
+          </Splitter.Panel>
+          {showFilterSidebar && (
+            <Splitter.Panel>
+              <FilterSidebar
+                type={type}
+                filter={sidebarFilter}
+                onFilterChange={handleSidebarFilterChange}
+                masterFilter={masterFilter}
+              />
+            </Splitter.Panel>
+          )}
+        </Splitter>
       </Flex>
     )
 
-    if (showFilterSidebar) {
-      return (
-        <Flex
-          gap='middle'
-          align='flex-start'
-          style={{ width: '100%', height: '100%' }}
-        >
-          {tableContent}
-          <FilterSidebar
-            type={type}
-            filter={sidebarFilter}
-            onFilterChange={handleSidebarFilterChange}
-            masterFilter={masterFilter}
-          />
-        </Flex>
-      )
-    }
-
     return tableContent
   }
 )