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;
}
/* A card of settings rules its rows apart; they keep the grid's columns, so
the labels still line up. */
.page-card.profile-appearance-grid {
padding-block: 0;
/* A card of settings, its grid being the card or the card's one child (a list
such as GrantList), rules its rows apart; they keep the grid's columns, so
the labels still line up. Every such card's label column has one width, so
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;
}
.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;
grid-column: 1 / -1;
grid-template-columns: subgrid;
@@ -2784,12 +2794,13 @@ body.has-player .chat-fab {
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);
}
@media (max-width: 512px) {
.page-card > .profile-appearance-row {
.page-card > .profile-appearance-row,
.page-card > .profile-appearance-grid > .profile-appearance-row {
display: flex;
align-items: flex-start;
}