imrpoved table view

admin/src/components/ItemTable.tsx

@@ -10,6 +10,7 @@ import {
   Heading,
   Icon,
   Input,
+  Box, // added
 } from "@chakra-ui/react";
 import { Tooltip } from "@/components/ui/tooltip";
 import MyAlert from "./myChakra/MyAlert";
@@ -177,7 +178,15 @@ const ItemTable: React.FC = () => {
         />
       )}
 
-      <Table.Root size="sm" striped>
+      {/* make table content-sized with horizontal scroll if needed */}
+      <Box overflowX="auto">
+        <Table.Root
+          size="sm"
+          striped
+          tableLayout="auto"
+          w="max-content"
+          whiteSpace="nowrap"
+        >
           <Table.Header>
             <Table.Row>
               <Table.ColumnHeader>
@@ -215,6 +224,8 @@ const ItemTable: React.FC = () => {
                 <Table.Cell>{item.id}</Table.Cell>
                 <Table.Cell>
                   <Input
+                    size="sm"
+                    w="max-content"
                     onChange={(e) =>
                       handleItemNameChange(item.id, e.target.value)
                     }
@@ -223,6 +234,8 @@ const ItemTable: React.FC = () => {
                 </Table.Cell>
                 <Table.Cell>
                   <Input
+                    size="sm"
+                    w="max-content"
                     onChange={(e) =>
                       handleCanBorrowRoleChange(item.id, e.target.value)
                     }
@@ -319,6 +332,7 @@ const ItemTable: React.FC = () => {
             ))}
           </Table.Body>
         </Table.Root>
+      </Box>
     </>
   );
 };