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


			@@ -1121,17 +1121,34 @@ body.drawer-open .drawer-backdrop {
1121	1121		min-width: 12rem;
1122	1122		}
1123	1123		@media (max-width: 48rem) {
	1124	+	/* Stack the rail above the content. align-items must reset to stretch or the
	1125	+	content column shrinks to its widest child and overflows the viewport. */
1124	1126		.settings-layout {
1125	1127		flex-direction: column;
	1128	+	align-items: stretch;
1126	1129		gap: 1rem;
1127	1130		}
	1131	+	.settings-content {
	1132	+	width: 100%;
	1133	+	}
1128	1134		.settings-nav {
1129	1135		width: 100%;
1130	1136		position: static;
1131	1137		}
	1138	+	/* The tab rail scrolls horizontally (like the repo tabs) instead of wrapping
	1139	+	onto several rows. */
1132	1140		.settings-nav nav {
1133	1141		flex-direction: row;
1134		-	flex-wrap: wrap;
	1142	+	flex-wrap: nowrap;
	1143	+	overflow-x: auto;
	1144	+	-webkit-overflow-scrolling: touch;
	1145	+	}
	1146	+	.settings-nav nav a {
	1147	+	flex: 0 0 auto;
	1148	+	}
	1149	+	/* Stat cards fill the width in as many columns as fit. */
	1150	+	.stat-grid {
	1151	+	grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
1135	1152		}
1136	1153		}
1137	1154

			@@ -2559,6 +2576,34 @@ td.diff-empty {
2559	2576		.repo-tabs a {
2560	2577		flex: 0 0 auto;
2561	2578		}
	2579	+	/* Branch switcher and Clone split the row 50/50, full width. */
	2580	+	.repo-actions {
	2581	+	width: 100%;
	2582	+	}
	2583	+	.repo-actions > * {
	2584	+	flex: 1;
	2585	+	min-width: 0;
	2586	+	}
	2587	+	.repo-actions summary.btn,
	2588	+	.repo-actions > a.btn {
	2589	+	width: 100%;
	2590	+	justify-content: center;
	2591	+	}
	2592	+	/* List rows stack so a wide action cluster drops below the body instead of
	2593	+	squeezing it to an unreadable sliver (admin users, keys, emails, commits). */
	2594	+	.entry-row,
	2595	+	.key-list .entry-row {
	2596	+	flex-direction: column;
	2597	+	align-items: stretch;
	2598	+	gap: 0.5rem;
	2599	+	}
	2600	+	.entry-row-actions {
	2601	+	flex-wrap: wrap;
	2602	+	}
	2603	+	/* Long unbroken meta (key fingerprints, emails) wraps rather than overflowing. */
	2604	+	.entry-row-meta {
	2605	+	overflow-wrap: anywhere;
	2606	+	}
2562	2607		/* Diff tables scroll within their own box (the blob wrapper already does). */
2563	2608		table.diff {
2564	2609		display: block;