thallada/the-daily-epub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Keep article pages within the viewport on phones

Browse Source 
Long unbroken strings, inline code tokens and many-column tables could push
the reader column wider than a phone screen, causing horizontal scrolling
(and a jump while the browser's URL bar collapses). Let text wrap anywhere
inside the reader column and turn prose tables into horizontal scroll
containers.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QVPagF6jfDv78CC5Jv2wp4
This commit is contained in:
thallada
2026-09-07 17:34:40 +00:00
co-authored by Claude Fable 5.1
parent 72b32dc69b
commit 20991fedfc
2 changed files with 3 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/static/app.css
+1 -1
View File
File diff suppressed because one or more lines are too long
src/web/tailwind.css
+2
View File
@@ -162,6 +162,7 @@
.scroll-x > table { min-width:max-content; } .scroll-x > table { min-width:max-content; }
.scroll-x.tall { @apply max-h-[70vh] overflow-y-auto; overscroll-behavior-block:contain; } .scroll-x.tall { @apply max-h-[70vh] overflow-y-auto; overscroll-behavior-block:contain; }
.reader-page { @apply min-w-0; overflow-wrap:anywhere; }
.prose-body { @apply text-[1.0625rem] leading-[1.72] text-ink; } .prose-body { @apply text-[1.0625rem] leading-[1.72] text-ink; }
.prose-body > * + * { @apply mt-5; } .prose-body > * + * { @apply mt-5; }
.prose-body p, .index-summary { text-wrap:pretty; } .prose-body p, .index-summary { text-wrap:pretty; }
@@ -171,6 +172,7 @@
.prose-body img { @apply mx-auto my-7 block h-auto max-w-full rounded-sm text-center font-sans text-xs italic text-muted; outline:1px solid oklch(0 0 0 / 0.1); outline-offset:-1px; } .prose-body img { @apply mx-auto my-7 block h-auto max-w-full rounded-sm text-center font-sans text-xs italic text-muted; outline:1px solid oklch(0 0 0 / 0.1); outline-offset:-1px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .prose-body img { outline-color:oklch(1 0 0 / 0.1); } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .prose-body img { outline-color:oklch(1 0 0 / 0.1); } }
:root[data-theme="dark"] .prose-body img { outline-color:oklch(1 0 0 / 0.1); } :root[data-theme="dark"] .prose-body img { outline-color:oklch(1 0 0 / 0.1); }
.prose-body table { @apply block max-w-full overflow-x-auto; overscroll-behavior-inline:contain; }
.prose-body pre { @apply max-w-full overflow-x-auto rounded-sm bg-paper-2 p-4 text-sm leading-relaxed; } .prose-body pre { @apply max-w-full overflow-x-auto rounded-sm bg-paper-2 p-4 text-sm leading-relaxed; }
.prose-body :not(pre) > code { @apply rounded-sm bg-paper-2 px-1 py-0.5 text-[0.9em]; } .prose-body :not(pre) > code { @apply rounded-sm bg-paper-2 px-1 py-0.5 text-[0.9em]; }
.prose-body blockquote { @apply my-7 border-l-2 border-rule-strong pl-5 text-ink-2; } .prose-body blockquote { @apply my-7 border-l-2 border-rule-strong pl-5 text-ink-2; }