diff --git a/frontend/src/views/ProjectView.vue b/frontend/src/views/ProjectView.vue index 4dd1bd0..f3047ec 100644 --- a/frontend/src/views/ProjectView.vue +++ b/frontend/src/views/ProjectView.vue @@ -956,13 +956,25 @@ async function confirmDelete() { .stat-notes { background: color-mix(in srgb, var(--color-primary) 8%, transparent); color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 22%, transparent); } /* ── Two-column body ─────────────────────────────────────────── */ +/* `minmax(0, 1fr)`, not `1fr`. A bare `1fr` track has an AUTO minimum, so it + cannot shrink below its content — one wide descendant anywhere in the + content column widens the whole column past the grid, and everything inside + it then overflows the page and gets cut by `.project-view`'s + `overflow-x: clip`. + This is the same property the header nav relies on and wants (neither side + squeezed under its content); here it is exactly wrong, because the column + holds a kanban whose own tracks push outward. `min-width: 0` on the item is + the twin half — a grid item's default `min-width: auto` refuses to shrink + even when its track will. */ .project-body { display: grid; - grid-template-columns: 248px 1fr; + grid-template-columns: 248px minmax(0, 1fr); gap: 1.25rem; align-items: start; } +.content-area { min-width: 0; } + /* ── Edit panel ──────────────────────────────────────────────── */ .edit-panel { background: var(--color-bg-card); @@ -1190,7 +1202,10 @@ async function confirmDelete() { /* ── Kanban ──────────────────────────────────────────────────── */ .kanban { display: grid; - grid-template-columns: repeat(3, 1fr); + /* Same reason as .project-body: three auto-minimum tracks add up to more + than the column when a card title or a column header won't compress, and + the excess pushes the whole milestone card wider than the page. */ + grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; align-items: start; padding: 0.75rem;