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;
|
flex-direction: column-reverse;
|
||||||
align-items: stretch;
|
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 {
|
.sidebar__nav {
|
||||||
|
|||||||
@@ -149,12 +149,14 @@ async function onCreate() {
|
|||||||
<div class="project-head">
|
<div class="project-head">
|
||||||
<h1 class="project-head__title">{{ project.title }}</h1>
|
<h1 class="project-head__title">{{ project.title }}</h1>
|
||||||
|
|
||||||
|
<div class="project-head__actions">
|
||||||
<ProjectManageMenu
|
<ProjectManageMenu
|
||||||
:project-id="projectId"
|
:project-id="projectId"
|
||||||
:project-title="project.title"
|
:project-title="project.title"
|
||||||
:card-count="cards.cards.length"
|
:card-count="cards.cards.length"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p v-if="actionError" class="form-error">{{ actionError }}</p>
|
<p v-if="actionError" class="form-error">{{ actionError }}</p>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user