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

fix: all 4 toggles on one row, nav fills bottom row cleanly

Browse source 
Cinema toggle kept flowing onto its own row because ring-header-controls
was 3-col. Bumped to 4-col so row 1 fits Fresh / Reverse / Autoplay /
Cinema together.

Nav buttons (Prev / Random / Next) now use explicit grid-columns —
Next spans cols 3→end — so there's no empty fourth column on the
right edge. Karaoke button keeps its full-row span via grid-column: 1/-1.
This commit is contained in:
russell@unturf.com 2026-04-22 14:07:43 -04:00
parent 2422e5feb1
commit 8b9b411ec0
1 changed files with 8 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2931,17 +2931,24 @@ textarea {
.ring-header-controls {
display: grid;
grid-template-columns: repeat(3, auto);
grid-template-columns: repeat(4, auto);
gap: 8px 16px;
justify-content: end;
align-items: center;
}
/* Karaoke button gets its own row, right-aligned. */
.ring-header-controls .ring-karaoke-btn {
grid-column: 1 / -1;
justify-self: end;
}
/* Nav row: 3 buttons across 4 cols — stretch Next to fill the last
two columns so there's no empty-column gap on the right edge. */
.ring-header-controls #skip-prev-btn { grid-column: 1 / 2; }
.ring-header-controls #skip-random-btn { grid-column: 2 / 3; }
.ring-header-controls #skip-next-btn { grid-column: 3 / -1; }
.skip-next-btn {
font-size: 1.1em;
padding: 12px 24px;