From f5218782e9c07524ad86e318f12a6ebeac4c696c Mon Sep 17 00:00:00 2001
From: Thom Lamb <thomlamb@gmail.com>
Date: Thu, 13 Aug 2026 17:51:15 -0500
Subject: [PATCH] Fix header overflow on mobile viewports

---
 frontend/src/App.tsx         | 16 +++++++-------
 frontend/src/admin/Admin.tsx | 18 +++++++++-------
 frontend/src/styles.css      | 42 ++++++++++++++++++++++++++++++++++++
 3 files changed, 60 insertions(+), 16 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 0afce90..106cd63 100755
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback } from 'react';
-import { Layout, Typography, Switch, Space, Row, Col, Spin, Button, theme } from 'antd';
+import { Layout, Typography, Switch, Row, Col, Spin, Button, theme } from 'antd';
 import { Link } from 'react-router-dom';
 import { Item, SiteConfig, fetchItems, fetchConfig } from './api';
 import ItemCard from './components/ItemCard';
@@ -28,16 +28,16 @@ export default function App() {
   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 }}>Redefined Designs</Title>
-        <Space>
+        <Title level={3} className="site-header-title" style={{ color: token.colorText }}>
+          Redefined Designs
+        </Title>
+        <div className="site-header-actions">
           <Switch checked={mode === 'dark'} onChange={toggle} checkedChildren="Dark" unCheckedChildren="Light" />
           {customer ? (
             <Link to="/account"><Button>My Account</Button></Link>
@@ -47,7 +47,7 @@ export default function App() {
               <Link to="/register"><Button type="primary">Sign up</Button></Link>
             </>
           )}
-        </Space>
+        </div>
       </Header>
       <Content style={{ padding: 24 }}>
         {!config ? <Spin /> : (
@@ -65,4 +65,4 @@ export default function App() {
       </Footer>
     </Layout>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/admin/Admin.tsx b/frontend/src/admin/Admin.tsx
index da3a9ea..19f1096 100755
--- a/frontend/src/admin/Admin.tsx
+++ b/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>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 1e2fef5..78d3dc2 100755
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -31,3 +31,45 @@ body { margin: 0; }
 .markdown-body p { margin: 4px 0; }
 .markdown-body ul, .markdown-body ol { margin: 4px 0; padding-left: 20px; }
 .markdown-body h1, .markdown-body h2, .markdown-body h3 { font-size: 15px; margin: 8px 0 4px; }
+
+/* Site header — wraps to two rows on narrow viewports instead of overflowing */
+.site-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+  height: auto;
+  min-height: 64px;
+  padding: 12px 24px;
+  line-height: normal;
+}
+
+.site-header-title {
+  margin: 0 !important;
+  font-size: clamp(16px, 5vw, 24px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.site-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+}
+
+@media (max-width: 480px) {
+  .site-header {
+    padding: 10px 12px;
+  }
+  .site-header-actions .ant-btn {
+    padding-left: 10px;
+    padding-right: 10px;
+    font-size: 13px;
+  }
+}
\ No newline at end of file