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/components/FeedItem.css | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

(limited to 'frontend/src/components/FeedItem.css')

diff --git a/frontend/src/components/FeedItem.css b/frontend/src/components/FeedItem.css
index 4eca2b1..944b66a 100644
--- a/frontend/src/components/FeedItem.css
+++ b/frontend/src/components/FeedItem.css
@@ -123,4 +123,26 @@
 
 .scrape-btn:hover {
   background: var(--sidebar-bg);
+}
+
+@media (max-width: 768px) {
+  .feed-item {
+    margin-top: 2rem;
+    padding: 0.5rem;
+  }
+
+  .item-title {
+    font-size: 1.4rem;
+    word-break: break-word;
+  }
+
+  .item-header {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .item-actions {
+    margin-left: 0;
+    margin-bottom: 0.5rem;
+  }
 }
\ No newline at end of file
-- 
cgit v1.2.3