From 4a9717caa5fa26c60c38268cc65c84e4e1618d87 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <aneurin@aneur.in>
Date: Fri, 4 Sep 2026 21:18:26 +0100
Subject: [PATCH] Keep the header buttons right-aligned once the title wraps
 below

.project-head__actions stretches full width on mobile along with the
title (align-items: stretch), but its own content was left-aligned by
default. Add justify-content: flex-end there under the same
breakpoint, and wrap ProjectView's ProjectManageMenu in a
.project-head__actions div (it wasn't before) so both views share one
selector for this instead of ProjectView needing its own.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 web/src/style.css             |  7 +++++++
 web/src/views/ProjectView.vue | 12 +++++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/web/src/style.css b/web/src/style.css
index c77fc8d..4b3d45f 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -216,6 +216,13 @@ body {
     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 {
diff --git a/web/src/views/ProjectView.vue b/web/src/views/ProjectView.vue
index 8fbedaf..e183340 100644
--- a/web/src/views/ProjectView.vue
+++ b/web/src/views/ProjectView.vue
@@ -149,11 +149,13 @@ async function onCreate() {
       <div class="project-head">
         <h1 class="project-head__title">{{ project.title }}</h1>
 
-        <ProjectManageMenu
-          :project-id="projectId"
-          :project-title="project.title"
-          :card-count="cards.cards.length"
-        />
+        <div class="project-head__actions">
+          <ProjectManageMenu
+            :project-id="projectId"
+            :project-title="project.title"
+            :card-count="cards.cards.length"
+          />
+        </div>
       </div>
 
       <p v-if="actionError" class="form-error">{{ actionError }}</p>