From bdfbd1c281d47ed39ebec9c182d05dea53c7f446 Mon Sep 17 00:00:00 2001 From: Peter Amiri Date: Thu, 15 Oct 2026 12:47:04 -0700 Subject: [PATCH] fix(web): let long inline code wrap so posts don't scroll sideways on phones A long inline span (an identifier or URL) overflowed the .prose column at phone width and pushed the whole page about 26-30px wide. .prose :not(pre) > code now uses overflow-wrap: anywhere, so inline code breaks inside the column. Fenced blocks (pre > code) are excluded and keep scrolling horizontally inside their own box. Fixes #4609 Co-Authored-By: Claude Opus 5.5 Signed-off-by: Peter Amiri --- web/packages/ui/src/styles/base.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/web/packages/ui/src/styles/base.css b/web/packages/ui/src/styles/base.css index d29e084459..5b8644f4ad 100644 --- a/web/packages/ui/src/styles/base.css +++ b/web/packages/ui/src/styles/base.css @@ -196,6 +196,13 @@ video { font-size: inherit; } +/* Long inline code (identifiers, URLs) must break inside the column rather + than push the page sideways at phone width. Scoped away from `pre`, so + fenced blocks keep their own horizontal scroll (#4609). */ +.prose :not(pre) > code { + overflow-wrap: anywhere; +} + .prose ul, .prose ol { padding-left: var(--space-5);