From 490edf9e9f2911231df6c76ef4afeb3b1fb763d2 Mon Sep 17 00:00:00 2001
From: Adam Mathes <adam@adammathes.com>
Date: Sat, 14 Feb 2026 14:49:09 -0800
Subject: task: improve mobile responsiveness of React UI\n\n- Added media
 queries to App.css to handle mobile sidebar layout (overlay with backdrop)\n-
 Implemented auto-hiding sidebar on mobile when links are clicked\n- Reduced
 padding and adjusted max-widths for smaller screens in App.css, FeedItem.css,
 and Settings.css\n- Added window resize listener to Dashboard to manage
 sidebar visibility based on width\n- Verified all existing tests
 pass\n\nFixes NK-g818qn

---
 frontend/src/App.tsx | 33 ++++++++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 5 deletions(-)

(limited to 'frontend/src/App.tsx')

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 1812451..478444c 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -44,24 +44,47 @@ interface DashboardProps {
 }
 
 function Dashboard({ theme, setTheme, fontTheme, setFontTheme }: DashboardProps) {
-  const [sidebarVisible, setSidebarVisible] = useState(true);
+  const [sidebarVisible, setSidebarVisible] = useState(window.innerWidth > 768);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth > 768) {
+        setSidebarVisible(true);
+      } else {
+        setSidebarVisible(false);
+      }
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
 
   return (
     <div
       className={`dashboard ${sidebarVisible ? 'sidebar-visible' : 'sidebar-hidden'} theme-${theme} font-${fontTheme}`}
     >
       <div className="dashboard-content">
-        {!sidebarVisible && (
+        {(!sidebarVisible || window.innerWidth <= 768) && (
           <button
             className="sidebar-toggle fixed-toggle"
-            onClick={() => setSidebarVisible(true)}
-            title="Show Sidebar"
+            onClick={() => setSidebarVisible(!sidebarVisible)}
+            title={sidebarVisible ? "Hide Sidebar" : "Show Sidebar"}
           >
             🐱
           </button>
         )}
+        {sidebarVisible && (
+          <div
+            className="sidebar-backdrop"
+            onClick={() => setSidebarVisible(false)}
+          />
+        )}
         <aside className={`dashboard-sidebar ${sidebarVisible ? '' : 'hidden'}`}>
-          <FeedList theme={theme} setTheme={setTheme} setSidebarVisible={setSidebarVisible} />
+          <FeedList
+            theme={theme}
+            setTheme={setTheme}
+            setSidebarVisible={setSidebarVisible}
+            isMobile={window.innerWidth <= 768}
+          />
         </aside>
         <main className="dashboard-main">
           <Routes>
-- 
cgit v1.2.3