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>
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -149,12 +149,14 @@ async function onCreate() {
|
||||
<div class="project-head">
|
||||
<h1 class="project-head__title">{{ project.title }}</h1>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user