vincent/gerbeur
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v4: the settings' controls line up down the page — each card of /settings was a grid of its own, its label column as wide as its longest label, so the controls began at a different place in every card, and the other instances, a grid inside their card, at yet another. Every card of settings now has a label column of one width, 10rem, a longer label wrapping, and a list such as GrantList, the card's one child, takes the card's rows: their padding, their rules, their columns.

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
khannurien
2026-10-09 20:53:29 +00:00
parent 2c3ba6ad11
commit 5f2fb4479a
1 changed files with 18 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/App.css
View File

@@ -2768,14 +2768,24 @@ body.has-player .chat-fab {
max-width: none; max-width: none;
} }
/* A card of settings rules its rows apart; they keep the grid's columns, so /* A card of settings, its grid being the card or the card's one child (a list
the labels still line up. */ such as GrantList), rules its rows apart; they keep the grid's columns, so
.page-card.profile-appearance-grid { the labels still line up. Every such card's label column has one width, so
padding-block: 0; the controls line up down the page too, not only within a card; a longer
label wraps. */
.page-card.profile-appearance-grid,
.page-card > .profile-appearance-grid {
grid-template-columns: 10rem minmax(0, 1fr);
row-gap: 0; row-gap: 0;
} }
.page-card > .profile-appearance-row { .page-card.profile-appearance-grid,
.page-card:has(> .profile-appearance-grid) {
padding-block: 0;
}
.page-card > .profile-appearance-row,
.page-card > .profile-appearance-grid > .profile-appearance-row {
display: grid; display: grid;
grid-column: 1 / -1; grid-column: 1 / -1;
grid-template-columns: subgrid; grid-template-columns: subgrid;
@@ -2784,12 +2794,13 @@ body.has-player .chat-fab {
padding-block: 0.75rem; padding-block: 0.75rem;
} }
.page-card > .profile-appearance-row + .profile-appearance-row { .page-card .profile-appearance-row + .profile-appearance-row {
border-top: 1px solid var(--color-border-subtle); border-top: 1px solid var(--color-border-subtle);
} }
@media (max-width: 512px) { @media (max-width: 512px) {
.page-card > .profile-appearance-row { .page-card > .profile-appearance-row,
.page-card > .profile-appearance-grid > .profile-appearance-row {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
} }