engineering/make_post_sell
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 2 Packages Wiki Activity Actions

edit page: thumbnail item card layout, consistent heights, fills width

Browse source 
Per fox: thumbnails "not aligned properly" and "not using horizontal
space properly". Two issues:

1) Grid was at minmax(240px, 1fr) which on the full-card-width row
   often fit 3 columns instead of 4 (240 * 4 + gaps > available
   space). Lowered to minmax(200px, 1fr) so the auto-fit gives 4
   columns on a standard desktop edit card.

2) Each upload-thumbnail-item now renders as a sub-card:
   - flex-direction: column with consistent gap
   - background --surface-dim, --color-border, --radius-md
   - preview image fixed 140px height + object-fit: contain so all
     thumbnails align even when some slots are empty or have different
     aspect ratios
   - form pushed to bottom via margin-top: auto, so the upload buttons
     line up across cells regardless of how much text is above
   - p.bold-text break-word so long filenames don't blow out the cell
   - the legacy <hr/> separator between items is hidden inside the grid
     (it was a vertical-flow artifact)

The grid uses align-items: stretch so all 4 cells have equal height.

Tests still pass (9 in target slice).
This commit is contained in:
russell@unturf.com 2026-05-10 18:26:50 -04:00
parent d194fc5e18
commit dbc7453a4e
No known key found for this signature in database
1 changed files with 35 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

36
make_post_sell/static/css/common.css
View file

@ -1606,9 +1606,43 @@ section.upload-thumbnails {
.upload-thumbnails-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: var(--space-4, 16px);
margin-top: var(--space-4, 16px);
align-items: stretch;
}
.upload-thumbnails-grid .upload-thumbnail-item {
display: flex;
flex-direction: column;
gap: var(--space-2, 8px);
padding: var(--space-3, 12px);
background: var(--surface-dim, #f9f9fa);
border: 1px solid var(--color-border, #eee);
border-radius: var(--radius-md, 8px);
min-width: 0;
}
.upload-thumbnails-grid .upload-thumbnail-item .edit-media-preview {
width: 100%;
max-width: 100%;
height: 140px;
object-fit: contain;
background: var(--surface, #fff);
border-radius: var(--radius-sm, 4px);
}
.upload-thumbnails-grid .upload-thumbnail-item p.bold-text {
word-break: break-word;
margin: 0;
}
.upload-thumbnails-grid .upload-thumbnail-item form {
margin-top: auto;
}
.upload-thumbnails-grid .upload-thumbnail-item hr {
display: none;
}
section.windows-95-task-bar {