From 6baba1315b7577153240444f0cf635545103ce55 Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Mon, 16 Feb 2026 21:20:22 +0100
Subject: [PATCH] fixed mobile layout

---
 frontend/src/App.tsx                 | 34 +++++++++++++++++++++++++++-
 frontend/src/pages/CommunityFeed.tsx |  4 ++--
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index bc33842..8e9d47d 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -22,7 +22,9 @@ import {
   TextField,
   InputAdornment,
   Autocomplete,
-  CircularProgress
+  CircularProgress,
+  ListItemAvatar,
+  ListSubheader
 } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
 import SearchIcon from '@mui/icons-material/Search';
@@ -153,6 +155,7 @@ const App: React.FC = () => {
   const [catAnchorEl, setCatAnchorEl] = useState<null | HTMLElement>(null);
   const [categories, setCategories] = useState<{name: string, slug: string}[]>([]);
   const [user, setUser] = useState<{username: string, avatar: string | null} | null>(null);
+  const [following, setFollowing] = useState<{id: number, username: string, avatar: string | null}[]>([]);
   const [loadingUser, setLoadingUser] = useState(true);
   const [drawerOpen, setDrawerOpen] = useState(false);
   const [catOpen, setCatOpen] = useState(false);
@@ -169,6 +172,14 @@ const App: React.FC = () => {
         if (userRes.data && userRes.data.username) {
             setUser(userRes.data);
             if (userRes.data.theme) setThemeName(userRes.data.theme);
+            
+            // Also fetch following list for the mobile sidebar
+            try {
+                const followRes = await api.get('users/following_list/');
+                setFollowing(followRes.data);
+            } catch (err) {
+                console.error('Failed to fetch following list');
+            }
         } else {
             setUser(null);
         }
@@ -202,6 +213,7 @@ const App: React.FC = () => {
   const handleLogout = () => {
     localStorage.removeItem('token');
     setUser(null);
+    setFollowing([]);
     window.location.href = '/';
   };
 
@@ -266,6 +278,26 @@ const App: React.FC = () => {
                         <ListItemText primary="Account Settings" />
                     </ListItemButton>
                 </ListItem>
+
+                {following.length > 0 && (
+                    <>
+                        <Divider sx={{ my: 1 }} />
+                        <ListSubheader sx={{ bgcolor: 'transparent', fontWeight: 'bold', lineHeight: '32px' }}>Following</ListSubheader>
+                        {following.map(f => (
+                            <ListItem key={f.id} disablePadding>
+                                <ListItemButton component={Link} to={`/profile/${f.username}`} onClick={() => setDrawerOpen(false)}>
+                                    <ListItemAvatar>
+                                        <Avatar src={f.avatar || undefined} sx={{ width: 32, height: 32 }}>
+                                            {!f.avatar && f.username.charAt(0).toUpperCase()}
+                                        </Avatar>
+                                    </ListItemAvatar>
+                                    <ListItemText primary={f.username} primaryTypographyProps={{ variant: 'body2' }} />
+                                </ListItemButton>
+                            </ListItem>
+                        ))}
+                    </>
+                )}
+
                 <ListItem disablePadding>
                     <ListItemButton onClick={handleLogout}>
                         <ListItemText primary="Logout" sx={{ color: 'error.main' }} />
diff --git a/frontend/src/pages/CommunityFeed.tsx b/frontend/src/pages/CommunityFeed.tsx
index 0d663d2..2c4de79 100644
--- a/frontend/src/pages/CommunityFeed.tsx
+++ b/frontend/src/pages/CommunityFeed.tsx
@@ -198,8 +198,8 @@ const CommunityFeed: React.FC = () => {
             )}
           </Grid>
 
-          {/* Sidebar */}
-          <Grid size={{ xs: 12, md: 4 }}>
+          {/* Sidebar - Desktop Only */}
+          <Grid size={{ xs: 12, md: 4 }} sx={{ display: { xs: 'none', md: 'block' } }}>
               <Card sx={{ borderRadius: 3, position: { md: 'sticky' }, top: { md: 100 } }}>
                   <CardContent sx={{ p: 0 }}>
                       <Box sx={{ p: 2, bgcolor: 'action.hover', borderBottom: '1px solid', borderColor: 'divider' }}>