Added splitter to filter sidebar.

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

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 ? (
+        <Splitter className={'farmcontrol-splitter'}>
-          <Spin indicator={<LoadingOutlined />} spinning={loading}>
+          <Splitter.Panel>
-            {renderCards()}
+            {cards ? (
-          </Spin>
+              <Spin indicator={<LoadingOutlined />} spinning={loading}>
-        ) : (
+                {renderCards()}
-          <Table
+              </Spin>
-            ref={tableRef}
+            ) : (
-            dataSource={tableData}
+              <Table
-            columns={columnsWithSkeleton}
+                ref={tableRef}
-            className='dashboard-table'
+                dataSource={tableData}
-            pagination={false}
+                columns={columnsWithSkeleton}
-            scroll={{ y: adjustedScrollHeight }}
+                className='dashboard-table'
-            rowKey='_id'
+                pagination={false}
-            loading={{ spinning: loading, indicator: <LoadingOutlined spin /> }}
+                scroll={{ y: adjustedScrollHeight }}
-            onScroll={handleScroll}
+                rowKey='_id'
-            onChange={handleTableChange}
+                loading={{
-            showSorterTooltip={false}
+                  spinning: loading,
-            style={{ height: '100%' }}
+                  indicator: <LoadingOutlined spin />
-            size={size}
+                }}
-            components={components}
+                onScroll={handleScroll}
-            onRow={onRow}
+                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
   }
 )