ronnibaslund/dezky
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(operator): partner status segmented control overflows narrow cards

Browse Source 
inline-grid with minmax(96px, auto) gave the 4-option control a fixed
~390px intrinsic width; when the contract card's right column was
narrower, 'terminated' spilled out. Switch to a full-width grid with
minmax(0, 1fr) so columns share space equally, and let button labels
ellipsize when the cell shrinks below their preferred width.
This commit is contained in:
Ronni Baslund
2026-05-24 22:09:08 +02:00
parent 4a1a4ddad5
commit b7cddcc6d7
1 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/operator/pages/partners/[slug].vue
+9 -3
View File
@@ -635,14 +635,16 @@ td.td-right { text-align: right; }
/* Status segmented control (mirrors FlagDetail.vue's seg pattern) */ /* Status segmented control (mirrors FlagDetail.vue's seg pattern) */
.seg { .seg {
display: inline-grid; display: grid;
width: 100%;
gap: 2px; gap: 2px;
padding: 2px; padding: 2px;
background: var(--surface); background: var(--surface);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 7px; border-radius: 7px;
box-sizing: border-box;
} }
.seg.four { grid-template-columns: repeat(4, minmax(96px, auto)); } .seg.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seg button { .seg button {
appearance: none; appearance: none;
border: 0; border: 0;
@@ -651,9 +653,13 @@ td.td-right { text-align: right; }
font-family: inherit; font-family: inherit;
font-size: 11px; font-size: 11px;
font-weight: 500; font-weight: 500;
padding: 6px 10px; padding: 6px 8px;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.seg button:hover:not(:disabled) { color: var(--text); } .seg button:hover:not(:disabled) { color: var(--text); }
.seg button.on { background: var(--text); color: var(--bg); } .seg button.on { background: var(--text); color: var(--bg); }