From b7cddcc6d7ce0823842ecc6831280ec413d3e6e4 Mon Sep 17 00:00:00 2001
From: Ronni Baslund <rhb@vdoc.dk>
Date: Sun, 24 May 2026 22:09:08 +0200
Subject: [PATCH] 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.
---
 apps/operator/pages/partners/[slug].vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/operator/pages/partners/[slug].vue b/apps/operator/pages/partners/[slug].vue
index 82921b0..692220c 100644
--- a/apps/operator/pages/partners/[slug].vue
+++ b/apps/operator/pages/partners/[slug].vue
@@ -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); }