Fix header overflow on mobile viewports

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>
   );
-}
+}