Fix header overflow on mobile viewports

frontend/src/admin/Admin.tsx

@@ -121,11 +121,11 @@ function Inventory() {
 
   return (
     <div>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16, flexWrap: 'wrap', gap: 8 }}>
         <Title level={4} style={{ margin: 0 }}>Inventory</Title>
         <Button type="primary" onClick={openNew}>Add Item</Button>
       </div>
-      <Table rowKey="id" dataSource={items} columns={columns} />
+      <Table rowKey="id" dataSource={items} columns={columns} scroll={{ x: true }} />
 
       <Modal
         title={editingItem ? 'Edit Item' : 'Add Item'}
@@ -196,16 +196,18 @@ export default function Admin() {
   return (
     <Layout style={{ minHeight: '100vh' }}>
       <Header
+        className="site-header"
         style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
           background: token.colorBgContainer,
           borderBottom: `1px solid ${token.colorBorderSecondary}`
         }}
       >
-        <Title level={3} style={{ color: token.colorText, margin: 0 }}>Admin</Title>
-        <Switch checked={mode === 'dark'} onChange={toggle} checkedChildren="Dark" unCheckedChildren="Light" />
+        <Title level={3} className="site-header-title" style={{ color: token.colorText }}>
+          Admin
+        </Title>
+        <div className="site-header-actions">
+          <Switch checked={mode === 'dark'} onChange={toggle} checkedChildren="Dark" unCheckedChildren="Light" />
+        </div>
       </Header>
       <Content style={{ padding: 24 }}>
         <Tabs
@@ -218,4 +220,4 @@ export default function Admin() {
       </Content>
     </Layout>
   );
-}
+}