updates on the changes

src/pages/nearle/orders/OrdersPreview.js

@@ -411,7 +411,7 @@ const OrdersPreview = () => {
               <Table density="balanced" dividers="rows" hasHover>
                 <TableHeader>
                   <TableRow>
-                    <TableHeaderCell>#</TableHeaderCell>
+                    <TableHeaderCell style={{ minWidth: 40, width: 40, maxWidth: 40 }}>#</TableHeaderCell>
                     {aiMode == 1 && <TableHeaderCell>Zone</TableHeaderCell>}
                     <TableHeaderCell>Tenant</TableHeaderCell>
                     <TableHeaderCell>Order Location</TableHeaderCell>

src/pages/nearle/orders/multipleOrders.js

@@ -1047,7 +1047,7 @@ const MultipleOrders = () => {
                   <Table density="compact" dividers="rows" hasHover>
                     <TableHeader>
                       <TableRow>
-                        <TableHeaderCell>#</TableHeaderCell>
+                        <TableHeaderCell style={{ minWidth: 40, width: 40, maxWidth: 40 }}>#</TableHeaderCell>
                         <TableHeaderCell>Customer</TableHeaderCell>
                         <TableHeaderCell>Address</TableHeaderCell>
                         <TableHeaderCell style={{ textAlign: 'center' }}>Qty</TableHeaderCell>
@@ -1159,7 +1159,7 @@ const MultipleOrders = () => {
                   <Table density="compact" dividers="rows" hasHover>
                     <TableHeader>
                       <TableRow>
-                        <TableHeaderCell>#</TableHeaderCell>
+                        <TableHeaderCell style={{ minWidth: 40, width: 40, maxWidth: 40 }}>#</TableHeaderCell>
                         <TableHeaderCell>Name</TableHeaderCell>
                         <TableHeaderCell>Contact</TableHeaderCell>
                         <TableHeaderCell>Address</TableHeaderCell>

src/pages/nearle/orders/orders.js

@@ -533,8 +533,8 @@ const Orders = () => {
       },
       {
         id: 'serial',
-        size: 50,
-        minSize: 44,
+        size: 30,
+        minSize: 20,
         enableSorting: false,
         meta: { label: '#' },
         header: () => <SectionLabel>#</SectionLabel>,
@@ -590,8 +590,8 @@ const Orders = () => {
       {
         id: 'pickup',
         accessorKey: 'pickupaddress',
-        size: 280,
-        minSize: 220,
+        size: 320,
+        minSize: 260,
         meta: { label: 'Pickup' },
         header: () => <SectionLabel>Pickup</SectionLabel>,
         cell: ({ getValue, row }) => (
@@ -605,8 +605,8 @@ const Orders = () => {
           const customer = customerMap?.get(row.appcustomerid);
           return customer?.firstname || customer?.name || `Customer #${row.appcustomerid ?? '—'}`;
         },
-        size: 320,
-        minSize: 240,
+        size: 360,
+        minSize: 280,
         meta: { label: 'Drop' },
         header: () => <SectionLabel>Drop</SectionLabel>,
         cell: ({ getValue, row }) => {
@@ -957,7 +957,7 @@ const Orders = () => {
                   whole toolbar — filter tabs, search, column visibility —
                   reads as one control strip instead of two stacked rows. */}
               <HStack gap={2} vAlign="center">
-                <VStack width={260} padding={0} gap={0}>
+                <VStack maxWidth={260} width="100%" padding={0} gap={0}>
                   <DebounceSearchBar
                     value={searchword}
                     onChange={setSearchword}
@@ -1032,7 +1032,7 @@ const Orders = () => {
                             // readers announce the column's sort state from
                             // here, not from the clickable content inside.
                             aria-sort={sorted === 'asc' ? 'ascending' : sorted === 'desc' ? 'descending' : canSort ? 'none' : undefined}
-                            style={{ width: header.getSize(), textAlign: align, position: 'relative' }}
+                            style={{ width: header.getSize(), minWidth: header.column.columnDef.minSize, maxWidth: header.column.columnDef.maxSize || header.getSize(), textAlign: align, position: 'relative' }}
                           >
                             <HStack
                               gap={1}
@@ -1160,7 +1160,7 @@ const Orders = () => {
                       {row.getVisibleCells().map((cell) => (
                         <TableCell
                           key={cell.id}
-                          style={{ textAlign: cell.column.columnDef.meta?.align }}
+                          style={{ textAlign: cell.column.columnDef.meta?.align, maxWidth: cell.column.columnDef.maxSize || cell.column.getSize() }}
                           onClick={cell.column.id === 'select' ? (e) => e.stopPropagation() : undefined}
                         >
                           {flexRender(cell.column.columnDef.cell, cell.getContext())}