diff options
| author | Peter Stone <thepeterstone@gmail.com> | 2026-07-30 01:03:36 +0000 |
|---|---|---|
| committer | Peter Stone <thepeterstone@gmail.com> | 2026-07-30 01:03:36 +0000 |
| commit | 240c8bc1adf75f0087503298ffc5cd732d95944f (patch) | |
| tree | 6f021c95d9e5a9656c4ca3c1bc32901e1c50760c /app/src/main | |
| parent | 19bfb97fb30b7bfc861d1d17c3b406e6157f6d02 (diff) | |
Clamp WordPress caption wrappers so inline images stay in-column
img { max-width: 100% } only bounded the <img> itself; a WordPress
<figure class="wp-caption" style="width: 448px"> wrapper sized for the
source site's column was left unconstrained, so the wrapper (and the
image filling it) overflowed the reader's own narrower column.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017Zwte3cyUJFUVycc3sDmjM
Diffstat (limited to 'app/src/main')
| -rw-r--r-- | app/src/main/java/org/terst/feedreader/ui/ReaderWebView.kt | 7 |
1 files changed, 7 insertions, 0 deletions
diff --git a/app/src/main/java/org/terst/feedreader/ui/ReaderWebView.kt b/app/src/main/java/org/terst/feedreader/ui/ReaderWebView.kt index 1fd2411..e69dd9b 100644 --- a/app/src/main/java/org/terst/feedreader/ui/ReaderWebView.kt +++ b/app/src/main/java/org/terst/feedreader/ui/ReaderWebView.kt @@ -126,6 +126,13 @@ fun wrapReaderHtml(bodyContent: String, title: String? = null): String = """ a { color: #8ab4f8; } img { max-width: 100%; height: auto; } svg { max-width: 100%; } + /* WordPress captioned images (<figure class="wp-caption" style="width: 448px">, or the + older <div class="wp-caption" style="width: ...">) carry a fixed pixel width inline on + the wrapper itself, sized for the source site's wider column. Our img rule above only + clamps the <img>, which then just fills that oversized wrapper -- so the wrapper (and + the image with it) blows past the reader's own column edge on a narrow screen. Clamp + the wrapper too; max-width still wins over the inline width per the CSS box model. */ + figure, .wp-caption { max-width: 100%; box-sizing: border-box; } /* A decorative icon (section badge, share glyph, etc.) that slipped through extraction relies on the source site's own stylesheet for its real display size (commonly Tailwind classes like "h-5 w-5") -- which we don't load here. |