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

fix: constrain source text width on mobile so it doesn't extend off screen

Browse Source 
- Desktop: .meta max-width 140px, source wraps within that
- Mobile: .meta max-width 100%, source truncates with ellipsis
- Removed white-space:nowrap from .meta (only .steps stays nowrap)
This commit is contained in:
Protocolbot
2026-07-08 21:39:16 -06:00
parent e9ccb7d3b1
commit 98ab983f38
1 changed files with 4 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/style.css
+4 -5
View File
@@ -71,7 +71,6 @@ header .breadcrumb {
} }
header .breadcrumb .prompt { color: var(--green-bright); font-weight: normal; } header .breadcrumb .prompt { color: var(--green-bright); font-weight: normal; }
header .breadcrumb:hover { text-decoration: none; } header .breadcrumb:hover { text-decoration: none; }
.header-logo { width: 22px; height: 26px; flex-shrink: 0; margin-right: 2px; }
header .crumb-path { header .crumb-path {
font-size: 11px; font-size: 11px;
color: var(--ink-dim); color: var(--ink-dim);
@@ -247,8 +246,8 @@ header nav a.active { color: var(--accent-bright); border-color: rgba(0,170,255,
font-size: 13px; color: var(--ink-soft); font-family: var(--sans); font-size: 13px; color: var(--ink-soft); font-family: var(--sans);
word-break: break-word; line-height: 1.4; 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: 140px; }
.protocol-pill .meta .steps { color: var(--accent); font-weight: bold; } .protocol-pill .meta .steps { color: var(--accent); font-weight: bold; white-space: nowrap; }
.protocol-pill.collection { .protocol-pill.collection {
background: var(--ink); color: #fff; border-color: var(--accent-deep); background: var(--ink); color: #fff; border-color: var(--accent-deep);
} }
@@ -523,9 +522,9 @@ header nav a.active { color: var(--accent-bright); border-color: rgba(0,170,255,
/* Protocol pills: info takes full width, meta goes below */ /* Protocol pills: info takes full width, meta goes below */
.protocol-pill { flex-direction: column; align-items: stretch; padding: 12px 14px; gap: 6px; } .protocol-pill { flex-direction: column; align-items: stretch; padding: 12px 14px; gap: 6px; }
.protocol-pill .info { width: 100%; } .protocol-pill .info { width: 100%; }
.protocol-pill .meta { text-align: left; display: flex; gap: 12px; align-items: center; } .protocol-pill .meta { text-align: left; display: flex; gap: 12px; align-items: center; max-width: 100%; overflow: hidden; }
.protocol-pill .meta .steps { } .protocol-pill .meta .steps { }
.protocol-pill .meta > div:not(.steps) { font-size: 10px; } .protocol-pill .meta > div:not(.steps) { font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
.detail-header, .detail-section { padding: 16px 14px; border-radius: 12px; } .detail-header, .detail-section { padding: 16px 14px; border-radius: 12px; }
} }