From 7956ca530642415de9ab079a4e9ce2a833c2f1a7 Mon Sep 17 00:00:00 2001
From: Protocolbot <protocolbot@medlab.host>
Date: Wed, 8 Jul 2026 14:17:23 -0600
Subject: [PATCH] fix: constrain meta width in protocol pills so description
 gets space
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- .info now uses flex: 1 1 auto (grows to fill available space)
- .meta constrained to max-width: 120px with ellipsis truncation
- Long source text no longer squeezes the description — description
  takes the majority of the width, source is truncated if too long
---
 frontend/style.css | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/style.css b/frontend/style.css
index 17eba4b..88d0cfb 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -232,22 +232,21 @@ header nav a.active { color: var(--accent-bright); border-color: rgba(0,170,255,
   background: var(--surface); border: 1px solid var(--border-light);
   border-radius: 16px; padding: 14px 20px; display: flex; align-items: flex-start;
   gap: 14px; cursor: pointer; transition: all 0.15s; box-shadow: var(--shadow);
-  text-decoration: none; color: inherit;
 }
-.protocol-pill:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); transform: translateX(2px); text-decoration: none; }
+.protocol-pill:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); transform: translateX(2px); }
 .protocol-pill .icon {
   width: 38px; height: 38px; border-radius: 10px; background: var(--panel);
   display: flex; align-items: center; justify-content: center;
   font-size: 18px; font-family: var(--mono); color: var(--accent);
   flex-shrink: 0; border: 1px solid var(--border-light);
 }
-.protocol-pill .info { flex: 1; min-width: 0; }
+.protocol-pill .info { flex: 1 1 auto; min-width: 0; }
 .protocol-pill .info h3 { font-size: 14px; font-weight: bold; margin-bottom: 2px; font-family: var(--mono); word-break: break-word; }
 .protocol-pill .info p {
   font-size: 13px; color: var(--ink-soft); font-family: var(--sans);
   word-break: break-word; line-height: 1.4;
 }
-.protocol-pill .meta { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); text-align: right; flex-shrink: 0; white-space: nowrap; }
+.protocol-pill .meta { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); text-align: right; flex: 0 0 auto; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .protocol-pill .meta .steps { color: var(--accent); font-weight: bold; }
 .protocol-pill.collection {
   background: var(--ink); color: #fff; border-color: var(--accent-deep);