From d75177998401d9ce4dfce4b0fae99385c6e0defe Mon Sep 17 00:00:00 2001 From: David Alvarez Date: Tue, 26 May 2026 21:16:15 +0200 Subject: [PATCH] fix: constrain 1fr grid column with min-width:0 and word-break The info-section grid column (1fr) was expanding to fit wide content like long game titles in Press Start 2P font (each character ~24px). Added min-width:0 on grid children to prevent overflow, and word-break:break-word on text elements as a safety net. --- frontend/src/pages/GameDetail.svelte | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/GameDetail.svelte b/frontend/src/pages/GameDetail.svelte index dbb1855..8984e07 100644 --- a/frontend/src/pages/GameDetail.svelte +++ b/frontend/src/pages/GameDetail.svelte @@ -330,15 +330,16 @@ .back-link { display: inline-block; margin-bottom: 24px; color: var(--text-dim); } .back-link:hover { color: var(--phosphor); } .detail-layout { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start; } + .detail-layout > * { min-width: 0; } /* prevent grid overflow from wide content */ @media (max-width: 640px) { .detail-layout { grid-template-columns: 1fr; } } .cover-section { border-radius: var(--radius); overflow: hidden; } .cover-img { width: 100%; border-radius: var(--radius); } .cover-placeholder { aspect-ratio: 3/4; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 4rem; border-radius: var(--radius); } - .info-section h1 { color: var(--phosphor); font-family: var(--font-mono); margin-bottom: 8px; } + .info-section h1 { color: var(--phosphor); font-family: var(--font-mono); margin-bottom: 8px; word-break: break-word; } .meta { display: flex; gap: 8px; margin-bottom: 8px; } .meta-item { background: var(--surface-hover); color: var(--phosphor-dim); padding: 4px 12px; border-radius: 12px; font-size: 0.85rem; } .dev { color: var(--text-dim); margin-bottom: 16px; } - .description { color: var(--text); line-height: 1.7; margin-bottom: 24px; } + .description { color: var(--text); line-height: 1.7; margin-bottom: 24px; overflow-wrap: break-word; word-break: break-word; } .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; } .edit-title { font-size: 1.5rem; margin-bottom: 12px; width: 100%; } .edit-row { display: flex; gap: 8px; margin-bottom: 8px; }