fix(batch): move the selection bar into the title row

Selecting an entry inserted the batch bar as a block above the grid, pushing
every row down ~60px — the list jumped under the cursor mid-click. The bar
now renders inside .content-header, to the right of "All items", and the
header reserves its height (min-height) so appearing and disappearing shifts
nothing at all.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
r-zakarya
2026-07-23 15:59:53 +01:00
parent 9ea26be422
commit 6f4363bde6
3 changed files with 16 additions and 14 deletions
+9 -6
View File
@@ -807,6 +807,8 @@ input[type="range"]::-webkit-slider-thumb {
table header) offsets by --hdr-h. */
.content-header {
display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px;
/* Height of the batch bar — reserved even when nothing is selected. */
min-height: 38px;
position: sticky; top: 0; z-index: 12;
background: var(--bg);
padding-top: 24px;
@@ -1008,14 +1010,15 @@ input[type="range"]::-webkit-slider-thumb {
font-size: 11px;
}
/* Batch action bar (appears when selection is non-empty) */
/* Batch action bar (appears when selection is non-empty). It lives INSIDE
.content-header, to the right of the title: as a block of its own it pushed
the whole list down on every selection. The header reserves its height (see
.content-header min-height) so appearing/disappearing shifts nothing. */
.batch-bar {
position: sticky;
top: var(--hdr-h, 0px);
z-index: 10;
flex: 1;
align-self: center;
display: flex; align-items: center; gap: 8px;
padding: 10px 14px;
margin-bottom: 16px;
padding: 5px 10px;
background: var(--bg-elev);
border: 1px solid var(--accent);
border-radius: var(--radius);