peptide-repo/prautoblogger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: pin price column to right edge of row (v0.13.4)

Browse Source 
Root cause: .ab-mp-price and .ab-mp-ctx were siblings in .ab-mp-row-meta
with price first. Description text is variable-length, so the meta div
grew/shrank per row, shifting the price left/right.

Fix:
- Move price to last child in .ab-mp-row-meta so its right edge is
  always pinned to the row's fixed right edge
- Add flex-shrink: 0 to .ab-mp-price so it never compresses
- Cap .ab-mp-ctx at max-width 200px with text-overflow: ellipsis
- Swap column header order (Context, then Price) to match new DOM order
This commit is contained in:
peptiderepo
2026-04-24 09:34:47 +00:00
parent a5a370779a
commit 7924b47913
4 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/css/model-picker.css
View File

@@ -142,7 +142,7 @@
color: var(--ab-text-muted, #64748b);
font-variant-numeric: tabular-nums;
white-space: nowrap;
min-width: 90px; text-align: right;
min-width: 90px; text-align: right; flex-shrink: 0;
}
.ab-mp-ctx {
@@ -151,6 +151,7 @@
background: var(--ab-bg, #f8fafc);
padding: 2px 6px; border-radius: 4px;
white-space: nowrap; min-width: 36px; text-align: center;
max-width: 200px; overflow: hidden; text-overflow: ellipsis;
}
/* ── Footer ─────────────────────────────────────────────────────────── */

4
assets/js/model-picker.js
View File

@@ -175,8 +175,8 @@
( model.deprecated ? '<span class="ab-mp-dep-badge">deprecated</span>' : '' ) +
'</div>' +
'<div class="ab-mp-row-meta">' +
'<span class="ab-mp-price" title="' + priceTitle + '">' + priceHtml + '</span>' +
metaRight +
'<span class="ab-mp-price" title="' + priceTitle + '">' + priceHtml + '</span>' +
'</div>' +
'</div>'
);
@@ -219,8 +219,8 @@
'<div class="ab-mp-col-headers">' +
'<button type="button" class="ab-mp-col-header ab-mp-col-model" data-col="name">Model <span class="ab-mp-sort-arrow"></span></button>' +
'<div class="ab-mp-col-headers-meta">' +
'<button type="button" class="ab-mp-col-header ab-mp-col-price" data-col="price">Price (in / out) <span class="ab-mp-sort-arrow"></span></button>' +
'<button type="button" class="ab-mp-col-header ab-mp-col-ctx" data-col="context">Context <span class="ab-mp-sort-arrow"></span></button>' +
'<button type="button" class="ab-mp-col-header ab-mp-col-price" data-col="price">Price (in / out) <span class="ab-mp-sort-arrow"></span></button>' +
'</div>' +
'</div>' +
'<div class="ab-mp-list"><div class="ab-mp-loading">Loading models…</div></div>' +