From ce14c6b713065249cb36d2b11ddb517debcf0c7e Mon Sep 17 00:00:00 2001 From: fen Date: Fri, 18 Sep 2026 11:15:48 -0500 Subject: [PATCH] #296 r3: shrink URL column, render URL values as plain text Owner override postdating PR #300 QA pass: - .col-url 340 -> 230px; reclaim slack from history-only columns (Views 96->90, Created 190->150, ID 190->120) so the table fits the .float pane with no horizontal scroll at 1400x900 and the ID column is fully visible. - URL anchors drop the shared .slug pill (background/padding/radius/mono font) and render plain, styled via td.dim exactly like the none case; links stay anchors with accent hover. Ellipsis kept for genuinely long slugs. Verified by CDP probe on a local build at 1400x900 and 375x812 on /public and /mine (/saved): column order, table fits pane (scrollWidth == clientWidth), 20-char slug fully visible, min Created-to-URL content gap 77px, sort arrows intact 6px right of labels, no CSP/console violations. go build/test pass. --- internal/web/static/app.css | 10 ++++++---- internal/web/static/history.js | 2 +- internal/web/static/mine.js | 2 +- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/internal/web/static/app.css b/internal/web/static/app.css index 1848f1e..b6f9634 100644 --- a/internal/web/static/app.css +++ b/internal/web/static/app.css @@ -357,6 +357,8 @@ tr.row:hover td a.slug { color: var(--accent); } /* #292: highlight the paste NAME uniformly on row hover, titled or not */ tr.row:hover td .paste-name { color: var(--accent); } td a.slug { font-family: var(--font-mono); font-size: 21.6px; color: var(--fg); text-decoration: none; } +td a.url-link { font-family: inherit; font-size: inherit; color: inherit; text-decoration: none; } +td a.url-link:hover { color: var(--accent); } td a.slug:hover { color: var(--accent); } /* PASTE column fallback for untitled pastes: plain text, identical to a titled paste. URL/ID chips keep .slug styling. */ td a.slug.paste-name { background: none; padding: 0; border-radius: 0; font-family: inherit; font-size: inherit; color: var(--fg); } @@ -531,7 +533,7 @@ td a.paste-name { color: var(--fg); text-decoration: none; font-family: inherit; /* paste name under slug pill in Paste column (#43) */ .paste-sub { font-size: 19.8px; color: var(--muted-fg); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .paste-sub.dim { color: var(--muted); } -td a.slug.url-link { max-width: 100%; display: inline-block; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; } +td a.url-link { max-width: 100%; display: inline-block; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; } td .id-link { color: var(--muted-fg); text-decoration: none; font-family: var(--font-mono); font-size: 19.8px; } td .id-link:hover { color: var(--accent); } @@ -892,11 +894,11 @@ button[type="submit"]:focus-visible, .hidden { display: none; } .can-page { max-width: 900px; width: 100%; } .col-a { width: 260px; } .col-b { width: 140px; } .col-c { width: 120px; } -.col-d { width: 96px; } .col-d2 { width: 150px; } .col-e { width: 190px; } -.col-f { width: 100px; } .col-g { width: 190px; } +.col-d { width: 90px; } .col-d2 { width: 150px; } .col-e { width: 150px; } +.col-f { width: 100px; } .col-g { width: 120px; } /* #255: history's URL column had its own narrow width (col-f doubles as /mine's ID column); give it a dedicated class. */ -.col-url { width: 340px; } +.col-url { width: 230px; } /* #210: /mine rows render a delete button cell that had no declared column, so under table-layout:fixed it overlapped the ID column. */ .col-del { width: 64px; } diff --git a/internal/web/static/history.js b/internal/web/static/history.js index 2ad0f55..32392c4 100644 --- a/internal/web/static/history.js +++ b/internal/web/static/history.js @@ -11,7 +11,7 @@ const t = PaletteTable.init({ `` + `${t.esc(it.type || it.language || 'text')}` + `${t.fmtSize(it.size)}${it.view_count}${t.ago(it.created_at)}` + - (it.custom_slug ? `/${t.esc(it.custom_slug)}` : `none`) + + (it.custom_slug ? `/${t.esc(it.custom_slug)}` : `none`) + `${t.esc(it.id)}`, emptyFiltered: 'No pastes match your search.', emptyAll: 'No pastes yet. Create the first one.', diff --git a/internal/web/static/mine.js b/internal/web/static/mine.js index ad1b25e..6894205 100644 --- a/internal/web/static/mine.js +++ b/internal/web/static/mine.js @@ -23,7 +23,7 @@ const t = PaletteTable.init({ `` + `${t.esc(it.type || it.language || 'text')}` + `${t.fmtSize(it.size)}${t.ago(it.created_at)}` + - (it.custom_slug ? `/${t.esc(it.custom_slug)}` : `none`) + + (it.custom_slug ? `/${t.esc(it.custom_slug)}` : `none`) + `${t.esc(it.id)}` + ``, emptyFiltered: 'No pastes from this browser match your search.',