droideparanoico/dostalgia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: constrain 1fr grid column with min-width:0 and word-break
Build & Deploy / build-and-deploy (push) Successful in 51s
Details

Browse Source 
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.
This commit is contained in:
David Alvarez
2026-05-26 21:16:15 +02:00
parent 3ae6f43ccb
commit d751779984
1 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/GameDetail.svelte
+3 -2
View File
@@ -330,15 +330,16 @@
.back-link { display: inline-block; margin-bottom: 24px; color: var(--text-dim); } .back-link { display: inline-block; margin-bottom: 24px; color: var(--text-dim); }
.back-link:hover { color: var(--phosphor); } .back-link:hover { color: var(--phosphor); }
.detail-layout { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start; } .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; } } @media (max-width: 640px) { .detail-layout { grid-template-columns: 1fr; } }
.cover-section { border-radius: var(--radius); overflow: hidden; } .cover-section { border-radius: var(--radius); overflow: hidden; }
.cover-img { width: 100%; border-radius: var(--radius); } .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); } .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 { 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; } .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; } .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; } .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.edit-title { font-size: 1.5rem; margin-bottom: 12px; width: 100%; } .edit-title { font-size: 1.5rem; margin-bottom: 12px; width: 100%; }
.edit-row { display: flex; gap: 8px; margin-bottom: 8px; } .edit-row { display: flex; gap: 8px; margin-bottom: 8px; }