From 029c05c46fe14b766fe05abd923cfac2edef9ae5 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <aneurin@aneur.in>
Date: Fri, 4 Sep 2026 21:30:49 +0100
Subject: [PATCH] Fix the mobile project-head layout with Grid instead of flex

The previous flex fix (column-reverse + stretch + justify-content) was
silently a no-op: its media query was placed earlier in the file than
.project-head's own base rule, so at equal specificity the later base
rule (align-items: flex-start, no flex-direction override) always won
the cascade regardless of viewport -- the buttons never actually
moved or stretched on mobile.

Replaced with grid-template-areas: 'title actions' on desktop
becomes a single column, 'actions' over 'title', below 768px, with
.project-head__actions given justify-self: end so it (and both the
Back/Manage buttons or the lone Manage button inside it) sits flush
right once it's the full row width. Verified with real screenshots at
375px on both ProjectView and ProjectConfigureView -- buttons stay on
one line top-right, the long title wraps beneath at full width.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 web/src/style.css | 43 ++++++++++++++++++++++---------------------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/web/src/style.css b/web/src/style.css
index 4b3d45f..5eb76c9 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -206,23 +206,6 @@ 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;
-  }
-
-  /* .project-head's align-items: stretch above makes this full width too;
-     keep its actual content (Back/Manage) over on the right rather than
-     letting it default to the left edge. */
-  .project-head__actions {
-    justify-content: flex-end;
-  }
 }
 
 .sidebar__nav {
@@ -590,23 +573,41 @@ h1 {
 
 /* --- project detail: header, inline title, manage menu ----------------- */
 
+/* Grid, not flex, so the mobile reflow below is one explicit statement of
+   where things go (title under the buttons, full width, right-aligned)
+   rather than several flex properties working together to imply it. */
 .project-head {
-  display: flex;
-  align-items: flex-start;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-areas: "title actions";
+  align-items: start;
   gap: 0.5rem;
 }
 
 .project-head__title {
-  flex: 1;
+  grid-area: title;
   min-width: 0;
   margin: 0 0 0.5rem;
 }
 
 .project-head__actions {
+  grid-area: actions;
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  flex: none;
+}
+
+@media (max-width: 768px) {
+  .project-head {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "actions"
+      "title";
+  }
+
+  .project-head__actions {
+    justify-self: end;
+  }
 }
 
 .project-head__back {