fix: stop overview README column overflowing on mobile
commit
a8fe419fix: stop overview README column overflowing on mobile
The .overview grid used a bare 1fr track, which resolves to
minmax(auto, 1fr); the README’s min-content (long code spans) blew the
track past the viewport, leaving the column flush left with overflow on
the right. Use minmax(0, 1fr) so the column wraps to the viewport,
matching the convention already used for the other grids.
Assisted-by: Claude:claude-opus-4-8
Reviews
No reviews of this commit yet — record a verdict below.
Start a review
crates/git-ents-server/src/web/style.css
@@ -120,7 +120,7 @@
.tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--color-accent); }
.tab-count { font-family: var(--font-mono); font-size: .68rem; color: var(--color-text-muted); background: var(--color-code-bg); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 0 .4rem; }
-.overview { display: grid; grid-template-columns: 1fr 19rem; gap: 34px; align-items: start; }
+.overview { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 34px; align-items: start; }
.aside { position: sticky; top: 78px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.aside .card { margin-bottom: 0; }
.aside .clone code { font-size: .76rem; padding: .6rem .8rem; }
@@ -142,7 +142,7 @@
.tag-pill { color: var(--color-accent); font-weight: 600; }
@media (max-width: 860px) {
- .overview { grid-template-columns: 1fr; }
+ .overview { grid-template-columns: minmax(0, 1fr); }
.aside { position: static; }
}