hanna/fabrica

style(web): comprehensive mobile overflow fixes

dbf4278 · hanna committed on 2026-07-26

Several stacked flex layouts kept a non-stretch align-items when the
mobile query switched them to a column, so the content column shrank to
its widest child and overflowed the viewport; long action clusters also
squeezed row bodies to an unreadable sliver.

- .settings-layout (admin + account settings): reset align-items:stretch
  and give .settings-content width:100% so cards/lists fill the screen.
- Settings/admin tab rail scrolls horizontally (like repo tabs) instead
  of wrapping onto multiple rows.
- Stat cards fill the width in as many columns as fit.
- List rows (.entry-row: admin users, keys, emails, commits, branches)
  stack — body above, actions wrapping below — so nothing is clipped;
  long meta (fingerprints, emails) wraps.
- Repo branch/clone actions split the row 50/50 at full width.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Signed by hannaSSH key fingerprint: SHA256:4g9cWhkAAw8gwqhJUcVbSnGEvdGwklW+1Aa/fMUu59k

assets/base.css +46 −1

   min-width: 12rem;
+}
 @media (max-width: 48rem) {
+  /* Stack the rail above the content. align-items must reset to stretch or the
+     content column shrinks to its widest child and overflows the viewport. */
   .settings-layout {
     flex-direction: column;
+    align-items: stretch;
     gap: 1rem;
+  }
+  .settings-content {
+    width: 100%;
+  }
   .settings-nav {
     width: 100%;
     position: static;
+  }
+  /* The tab rail scrolls horizontally (like the repo tabs) instead of wrapping
+     onto several rows. */
   .settings-nav nav {
     flex-direction: row;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .settings-nav nav a {
+    flex: 0 0 auto;
+  }
+  /* Stat cards fill the width in as many columns as fit. */
+  .stat-grid {
+    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+  }
+}
   .repo-tabs a {
     flex: 0 0 auto;
+  }
+  /* Branch switcher and Clone split the row 50/50, full width. */
+  .repo-actions {
+    width: 100%;
+  }
+  .repo-actions > * {
+    flex: 1;
+    min-width: 0;
+  }
+  .repo-actions summary.btn,
+  .repo-actions > a.btn {
+    width: 100%;
+    justify-content: center;
+  }
+  /* List rows stack so a wide action cluster drops below the body instead of
+     squeezing it to an unreadable sliver (admin users, keys, emails, commits). */
+  .entry-row,
+  .key-list .entry-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.5rem;
+  }
+  .entry-row-actions {
+    flex-wrap: wrap;
+  }
+  /* Long unbroken meta (key fingerprints, emails) wraps rather than overflowing. */
+  .entry-row-meta {
+    overflow-wrap: anywhere;
+  }
   /* Diff tables scroll within their own box (the blob wrapper already does). */
   table.diff {
     display: block;