Simon/romm
1
0
Fork 0
mirror of https://github.com/rommapp/romm.git synced 2026-06-27 22:35:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(v2): consistent gap between cover and fields in the edit dialog

Browse Source 
The edit dialog's hero used a fixed 240px cover column with the cover
centered, so a natural-width cover left variable leftover space — making
the gap to the fields vary by cover shape. Size the column to the cover
(`auto`) so the gap is exactly the grid gap for any cover, and give it a
touch more room (24px).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Georges-Antoine Assi
2026-06-21 19:57:00 -04:00
parent c8362ed22e
commit 72fb96ec4c
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/v2/components/Dialogs/EditRomDialog.vue
View File

@@ -480,14 +480,16 @@ function handleRomUpdateFromMetadata(updatedRom: UpdateRom) {
<style scoped>
/* ── Hero ──────────────────────────────────────────────────────────
Cover sits in a fixed-width left column; fields take the rest. The
`align-items: start` keeps the cover anchored to the top so taller
stacks of fields (or the multiline summary growing) don't drag the
cover down with them. */
Cover column sizes to the cover's natural width (`auto`) so the gap to
the fields is exactly the grid `gap`, consistent for any cover shape —
a fixed-width column would leave variable leftover space beside a
natural-width cover. `align-items: start` keeps the cover anchored to
the top so taller field stacks (or the growing summary) don't drag it
down. */
.r-v2-edit__hero {
display: grid;
grid-template-columns: 240px 1fr;
gap: 18px;
grid-template-columns: auto 1fr;
gap: 24px;
align-items: start;
}