cloud/project-manager
3
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Fix the mobile project-head layout with Grid instead of flex

Browse Source 
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>
This commit is contained in:
aneurin
2026-09-04 21:30:49 +01:00
co-authored by Claude Sonnet 5
parent 91c0e8d6af
commit 029c05c46f
1 changed files with 22 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/style.css
+22 -21
View File
@@ -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 {