From ba84c0e81b5ecfcc7e193098e95d497dd53b6227 Mon Sep 17 00:00:00 2001 From: Aneurin Barker Snook Date: Fri, 4 Sep 2026 21:15:47 +0100 Subject: [PATCH] Mobile: stack project-head instead of squeezing it, wrap headings cleanly .project-head (title + action buttons, shared by ProjectView and ProjectConfigureView) was a plain flex row at every width, so on a narrow screen the title and the Manage/Back buttons fought over space instead of wrapping. Below 768px it's now flex-direction: column-reverse -- the buttons (last in the DOM in both views) render on top on one line, and the title wraps to as many lines as it needs underneath, full width. Also add a global h1/h2/h3 overflow-wrap: break-word so a long, unbroken heading (a project title with no spaces, say) wraps instead of overflowing its container, without breaking ordinary multi-word headings mid-word. Drops .project-head__title's now-redundant own word-break rule, since it's an

and the global rule covers it. Co-Authored-By: Claude Sonnet 5 --- web/src/style.css | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/web/src/style.css b/web/src/style.css index a58550a..c77fc8d 100644 --- a/web/src/style.css +++ b/web/src/style.css @@ -206,6 +206,16 @@ body { z-index: 150; background: rgba(0, 0, 0, 0.45); } + + /* Buttons stay on one line on top; the title, which can't shrink to fit + alongside them, wraps to however many lines it needs underneath instead + of squeezing into whatever space is left. column-reverse rather than + reordering the markup -- the title comes first in both .project-head's + users (ProjectView, ProjectConfigureView). */ + .project-head { + flex-direction: column-reverse; + align-items: stretch; + } } .sidebar__nav { @@ -302,6 +312,14 @@ body { padding: 1.75rem; } +h1, +h2, +h3 { + /* Wrap at word boundaries where possible; only break inside a word (a long + name, an unbroken URL, ...) when a single word wouldn't otherwise fit. */ + overflow-wrap: break-word; +} + h1 { margin: 0 0 0.75rem; font-size: 1.4rem; @@ -575,7 +593,6 @@ h1 { flex: 1; min-width: 0; margin: 0 0 0.5rem; - word-break: break-word; } .project-head__actions {