diff --git a/src/App.css b/src/App.css
index 30e204dd..8250a3df 100644
--- a/src/App.css
+++ b/src/App.css
@@ -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;
   }