From 2802ccf8c1212e5ef49226e7063fbf008ea4c13e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 27 Feb 2026 15:38:08 +0000
Subject: Fix mobile horizontal scrolling caused by wide RSS content

RSS feeds can contain tables, iframes, and other elements with explicit
widths that overflow the viewport on mobile. Added overflow-x: hidden to
.item-description and .main-content, and extended max-width: 100% to
cover table and iframe elements inside item descriptions.

Includes TDD tests verifying the CSS containment rules.

https://claude.ai/code/session_0141nhxmYfoFPVPZ813K1XFD
---
 frontend-vanilla/src/style.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'frontend-vanilla/src/style.css')

diff --git a/frontend-vanilla/src/style.css b/frontend-vanilla/src/style.css
index 27a8d28..4d69390 100644
--- a/frontend-vanilla/src/style.css
+++ b/frontend-vanilla/src/style.css
@@ -288,6 +288,7 @@ html {
   width: 100%;
   height: 100%;
   min-width: 0;
+  overflow-x: hidden;
   overflow-y: auto;
   background-color: var(--bg-color);
   padding: 1.5rem 2rem;
@@ -517,6 +518,7 @@ select:focus {
   margin-top: 1rem;
   overflow-wrap: break-word;
   word-break: break-word;
+  overflow-x: hidden;
 }
 
 .item-description a {
@@ -526,7 +528,9 @@ select:focus {
 
 .item-description img,
 .item-description video,
-.item-description pre {
+.item-description pre,
+.item-description table,
+.item-description iframe {
   max-width: 100%;
   height: auto;
   display: block;
-- 
cgit v1.2.3


From f1a829f25540c4eff1b4b50548ba44518f8b231a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 28 Feb 2026 03:57:02 +0000
Subject: Fix feed-item overflow and flex shrink bug causing mobile horizontal
 scroll

The previous fix (overflow-x:hidden on .main-content and .item-description)
was insufficient because mobile Safari ignores overflow-x:hidden on elements
with overflow-y:auto. The real fix is item-level containment:

- .feed-item: add overflow:hidden to create a BFC so no child content can
  push the viewport wider, even during async image load reflows
- .item-title: add min-width:0 (fixes flex min-width:auto bug that prevents
  shrinking below content width) and overflow-wrap:break-word for long titles

https://claude.ai/code/session_0141nhxmYfoFPVPZ813K1XFD
---
 frontend-vanilla/src/style.css | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'frontend-vanilla/src/style.css')

diff --git a/frontend-vanilla/src/style.css b/frontend-vanilla/src/style.css
index 4d69390..47b2de2 100644
--- a/frontend-vanilla/src/style.css
+++ b/frontend-vanilla/src/style.css
@@ -452,6 +452,7 @@ select:focus {
   border-bottom: none;
   border-radius: 8px;
   transition: background-color 0.2s ease, opacity 0.3s ease;
+  overflow: hidden;
 }
 
 
@@ -471,6 +472,8 @@ select:focus {
   color: var(--link-color);
   display: block;
   flex: 1;
+  min-width: 0;
+  overflow-wrap: break-word;
   cursor: pointer;
 }
 
-- 
cgit v1.2.3