fixed width

frontend/src/App.tsx

@@ -221,7 +221,14 @@ const App: React.FC = () => {
     <ThemeProvider theme={theme}>
       <CssBaseline />
       <Router>
-        <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh', width: '100%', overflowX: 'hidden' }}>
+        <Box sx={{ 
+            display: 'flex', 
+            flexDirection: 'column', 
+            minHeight: '100vh', 
+            width: '100vw', 
+            maxWidth: '100%', 
+            overflowX: 'hidden' 
+        }}>
           <AppBar position="fixed" elevation={1}>
             <Toolbar sx={{ minHeight: { xs: 56, sm: 64 }, px: { xs: 1, sm: 4, md: 6 } }}>
                 <IconButton
@@ -286,7 +293,7 @@ const App: React.FC = () => {
           </AppBar>
           <Toolbar sx={{ minHeight: { xs: 56, sm: 64 } }} />
 
-          <Box sx={{ flexGrow: 1, py: 4, width: '100%' }}>
+          <Box sx={{ flexGrow: 1, width: '100%' }}>
             <Routes>
               <Route path="/" element={<CategoryList />} />
               <Route path="/category/:slug" element={<CategoryFlavors />} />

frontend/src/pages/CategoryList.tsx

@@ -94,7 +94,7 @@ const CategoryList: React.FC = () => {
       );
 
       return (
-          <Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 6 } }}>
+          <Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 6 }, py: 4 }}>
               <Typography variant="h4" gutterBottom sx={{ overflowWrap: 'break-word' }}>Search Results for "{query}"</Typography>
               <Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
                   Found {filteredFlavors.length} items
@@ -150,7 +150,6 @@ const CategoryList: React.FC = () => {
             textAlign: 'center',
             borderBottom: '1px solid rgba(255,255,255,0.1)',
             width: '100%',
-            mt: -4, // Counter the parent Box py: 4
             boxSizing: 'border-box',
             overflow: 'hidden'
         }}
@@ -185,7 +184,7 @@ const CategoryList: React.FC = () => {
       </Paper>
 
       {/* Main Content inside Container */}
-      <Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 6 } }}>
+      <Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 6 }, pb: 8 }}>
         {/* Top Rated Flavors */}
         {topFlavors.length > 0 && (
           <Box sx={{ mb: 10 }}>
@@ -224,7 +223,7 @@ const CategoryList: React.FC = () => {
         <Typography variant="h4" sx={{ mb: 4, fontWeight: 'bold' }}>Browse by Category</Typography>
         <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 3 }}>
             {categories.map(category => (
-            <Box key={category.id} sx={{ flex: { xs: '1 1 100%', sm: '1 1 45%', lg: '1 1 30%' }, minWidth: 280 }}>
+            <Box key={category.id} sx={{ flex: { xs: '1 1 100%', sm: '1 1 45%', lg: '1 1 23%' }, minWidth: 280 }}>
                 <Link to={`/category/${category.slug}`} style={{ textDecoration: 'none' }}>
                 <Card sx={{ 
                     height: 120, 

frontend/src/pages/Dashboard.tsx

@@ -42,7 +42,7 @@ const Dashboard: React.FC = () => {
   if (!data) return <Typography>Please login to view dashboard.</Typography>;
 
   return (
-    <Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 6 } }}>
+    <Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 6 }, py: 4 }}>
       <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4, flexWrap: 'wrap', gap: 2 }}>
           <Typography variant="h4">Personal Dashboard</Typography>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>

frontend/src/pages/Login.tsx

@@ -219,7 +219,7 @@ const Login: React.FC<LoginProps> = () => {
   const adminUrl = (import.meta.env.VITE_API_URL || 'http://localhost:8000/api/').replace('/api/', '/admin/');
 
   return (
-    <Container maxWidth="xs" sx={{ mt: 8 }}>
+    <Container maxWidth="xs" sx={{ py: 8 }}>
       <Paper sx={{ p: 3 }}>
         {message && <Alert severity={message.type} sx={{ mb: 2 }}>{message.text}</Alert>}
         {renderContent()}

frontend/src/pages/PublicProfile.tsx

@@ -57,7 +57,7 @@ const PublicProfile: React.FC = () => {
   const others = data.ratings.filter(r => r.score < 8);
 
   return (
-    <Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 6 } }}>
+    <Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 6 }, py: 4 }}>
       <Box sx={{ display: 'flex', alignItems: 'center', mb: 6, gap: 3 }}>
         <Avatar sx={{ width: 80, height: 80, fontSize: '2rem', bgcolor: 'primary.main' }}>
             {data.username.charAt(0).toUpperCase()}

frontend/src/pages/Settings.tsx

@@ -78,7 +78,7 @@ const Settings: React.FC = () => {
   };
 
   return (
-    <Container maxWidth="sm">
+    <Container maxWidth="sm" sx={{ py: 4 }}>
       <Typography variant="h4" gutterBottom sx={{ mt: 4 }}>Account Settings</Typography>
       
       {message && (

frontend/src/pages/categories/CategoryFlavors.tsx

@@ -63,7 +63,7 @@ const CategoryFlavors: React.FC = () => {
   if (loading) return <Box sx={{ display: 'flex', justifyContent: 'center', mt: 8 }}><CircularProgress /></Box>;
 
   return (
-    <Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 6 } }}>
+    <Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 6 }, py: 4 }}>
       <Box sx={{ mb: 4 }}>
           <Typography variant="h4" gutterBottom>{categoryName || 'Flavors'}</Typography>
           <Link to="/" style={{ textDecoration: 'none' }}>

frontend/src/pages/flavors/FlavorDetail.tsx

@@ -146,7 +146,7 @@ const FlavorDetail: React.FC = () => {
   if (!flavor) return <Typography>Flavor not found</Typography>;
 
   return (
-    <Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 6 } }}>
+    <Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 6 }, py: 4 }}>
       <Button component={Link} to={`/category/${flavor.category_slug}`} sx={{ mb: 2 }}>
         &larr; Back to {flavor.category_name}
       </Button>