ntnsndr/protocol-droid
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: constrain meta width in protocol pills so description gets space

Browse Source 
- .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
This commit is contained in:
Protocolbot
2026-07-08 14:17:23 -06:00
parent d7385734e1
commit 7956ca5306
1 changed files with 3 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/style.css
+3 -4
View File
@@ -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);