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

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
+9 -3
View File
@@ -635,14 +635,16 @@ td.td-right { text-align: right; }
/* Status segmented control (mirrors FlagDetail.vue's seg pattern) */
.seg {
display: inline-grid;
display: grid;
width: 100%;
gap: 2px;
padding: 2px;
background: var(--surface);
border: 1px solid var(--border);
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 {
appearance: none;
border: 0;
@@ -651,9 +653,13 @@ td.td-right { text-align: right; }
font-family: inherit;
font-size: 11px;
font-weight: 500;
padding: 6px 10px;
padding: 6px 8px;
border-radius: 5px;
cursor: pointer;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.seg button:hover:not(:disabled) { color: var(--text); }
.seg button.on { background: var(--text); color: var(--bg); }