Merge commit 'c4a4ba0' (phase 5h hotfix: contain Tiles grid to prevent horizontal scroll)

This commit is contained in:
mAi
2026-05-26 12:33:26 +02:00

View File

@@ -342,13 +342,22 @@ table.bulk .chip-add-btn:hover { background: var(--accent); color: var(--accent-
.dashboard .dash-tiles {
display: grid; gap: 12px; margin-top: 8px;
grid-template-columns: 1fr;
/* minmax(0, 1fr) overrides the implicit min-content minimum on 1fr —
without it, any tile with a long unbreakable string (slug-path or
a long task summary) widens its column and pushes the grid past
the viewport, causing horizontal scroll. */
grid-template-columns: minmax(0, 1fr);
min-width: 0;
}
.dashboard .tile {
border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px;
background: var(--surface);
display: flex; flex-direction: column; gap: 6px;
min-height: 110px;
/* min-width: 0 lets the grid item shrink below its content's
min-content width — critical pairing with minmax(0, 1fr) above. */
min-width: 0;
overflow: hidden;
}
.dashboard .tile.tile-pinned { border-left: 3px solid var(--accent); }
.dashboard .tile.tile-stale { border-style: dashed; opacity: 0.85; }
@@ -365,6 +374,11 @@ table.bulk .chip-add-btn:hover { background: var(--accent); color: var(--accent-
.dashboard .tile .tile-path {
font-family: ui-monospace, SFMono-Regular, monospace;
font-size: 0.78em;
/* Long dot-separated slugs (dev.youpc.kommentar.knowledge-tools)
are unbreakable by default — let them wrap at any character so
they don't widen the tile. */
overflow-wrap: anywhere;
min-width: 0;
}
.dashboard .tile .tile-live {
font-size: 0.72em; padding: 1px 6px; border-radius: 999px;
@@ -567,12 +581,14 @@ table.bulk .chip-add-btn:hover { background: var(--accent); color: var(--accent-
.dashboard .card-stale { grid-column: span 2; }
}
/* Phase 5h — Tiles grid breakpoints (1/2/3 cols at 600/900/—). */
/* Phase 5h — Tiles grid breakpoints (1/2/3 cols at 600/900/—).
minmax(0, 1fr) on every breakpoint so long unbreakable strings
(slug-paths, task summaries) don't push columns past the viewport. */
@media (min-width: 600px) {
.dashboard .dash-tiles { grid-template-columns: 1fr 1fr; }
.dashboard .dash-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 900px) {
.dashboard .dash-tiles { grid-template-columns: 1fr 1fr 1fr; }
.dashboard .dash-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
}
/* Graph fit-to-screen toggle (Phase 3i): when ".fit" is on the canvas,