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 {