Move the URL column left in list tables (right after Paste) #296

Closed
opened 2026-09-18 03:47:05 +00:00 by fen · 6 comments
Collaborator

Owner follow-up to #255 (closed): the URL column was widened but kept its position. Owner now wants it moved left "a little bit more".

Measured on palette-dev /public (1400x900, 2026-09-17 22:2x CDT), current column order and left edges:
Paste 116px | Type 378.7 | Size 520.2 | Views 641.4 | Created 738.4 | URL 930.4 | ID 1082

Definition of done:

  • URL column sits immediately after the Paste column (position 2 of 7) in BOTH /public (history) and /mine tables
  • Width stays ~151.6px (the .col-url width from #255); only position changes
  • Sort arrow on URL stays right of the label text, uniform gap per the sort-arrow convention
  • Rendered CDP probe at 1400x900 and 375x812 confirms the order and that no other column's sort wiring broke (data-sort attrs move with the header cell)
  • Zero CSP violations

Same shared-class hazard as #255: the column classes are shared between history.html and mine.js-driven tables; move the header AND the corresponding in both row templates / JS rowHtml builders together.

Owner follow-up to #255 (closed): the URL column was widened but kept its position. Owner now wants it moved left "a little bit more". Measured on palette-dev /public (1400x900, 2026-09-17 22:2x CDT), current column order and left edges: Paste 116px | Type 378.7 | Size 520.2 | Views 641.4 | Created 738.4 | URL 930.4 | ID 1082 Definition of done: - URL column sits immediately after the Paste column (position 2 of 7) in BOTH /public (history) and /mine tables - Width stays ~151.6px (the .col-url width from #255); only position changes - Sort arrow on URL stays right of the label text, uniform gap per the sort-arrow convention - Rendered CDP probe at 1400x900 and 375x812 confirms the order and that no other column's sort wiring broke (data-sort attrs move with the header cell) - Zero CSP violations Same shared-class hazard as #255: the column classes are shared between history.html and mine.js-driven tables; move the header AND the corresponding <td> in both row templates / JS rowHtml builders together.
fen added the In Progress label 2026-09-18 03:47:54 +00:00
fen added spent time 1 minute 2026-09-18 03:47:54 +00:00
fen added spent time 1 minute 2026-09-18 03:48:09 +00:00
fen deleted spent time 2026-09-18 03:48:24 +00:00
- 1 minute
fen added QA and removed In Progress labels 2026-09-18 03:54:42 +00:00
fen added spent time 35 minutes 2026-09-18 03:54:42 +00:00
fen added spent time 12 minutes 2026-09-18 04:00:50 +00:00
fen removed the QA label 2026-09-18 04:00:50 +00:00
fen closed this issue 2026-09-18 04:00:50 +00:00
fen reopened this issue 2026-09-18 13:28:06 +00:00
Author
Collaborator

OWNER OVERRIDE (postdates the PR #297 QA pass, newest instruction wins):

  1. POSITION: keep URL as the 6th column (Paste, Type, Size, Views, Created, URL, ID) - REVERT the reorder from PR #297. Do not move it to position 2.
  2. WIDTH: the real complaint is truncation. At 151.6px only ~5 chars show ("/qa296..."). Widen .col-url so a typical slug (~20 chars) displays without ellipsis - target roughly 300px at desktop, scaled sensibly at mobile width. Keep text ellipsis for genuinely long custom slugs.

Acceptance: rendered probe at 1400x900 and 375x812 shows URL 6th in both /public and /mine, a 20-char slug fully visible at desktop, sort arrow intact right of the label, no CSP violations.

OWNER OVERRIDE (postdates the PR #297 QA pass, newest instruction wins): 1. POSITION: keep URL as the 6th column (Paste, Type, Size, Views, Created, URL, ID) - REVERT the reorder from PR #297. Do not move it to position 2. 2. WIDTH: the real complaint is truncation. At 151.6px only ~5 chars show ("/qa296..."). Widen .col-url so a typical slug (~20 chars) displays without ellipsis - target roughly 300px at desktop, scaled sensibly at mobile width. Keep text ellipsis for genuinely long custom slugs. Acceptance: rendered probe at 1400x900 and 375x812 shows URL 6th in both /public and /mine, a 20-char slug fully visible at desktop, sort arrow intact right of the label, no CSP violations.
fen added the Assigned label 2026-09-18 13:28:06 +00:00
fen added spent time 1 minute 2026-09-18 13:29:04 +00:00
fen added In Progress and removed Assigned labels 2026-09-18 13:29:16 +00:00
fen added spent time 2 minutes 2026-09-18 13:30:06 +00:00
fen added spent time 25 minutes 2026-09-18 13:32:18 +00:00
fen added QA and removed In Progress labels 2026-09-18 13:32:18 +00:00
fen added spent time 35 minutes 2026-09-18 13:42:04 +00:00
fen added spent time 1 minute 2026-09-18 14:02:00 +00:00
fen added spent time 20 minutes 2026-09-18 14:16:48 +00:00
Author
Collaborator

QA PASS (fix attempt 2, PR #300 merged into dev d87b938, deployed to palette-dev, image swap proven by sha256 of served app.css/history.js/mine.js == git show origin/dev). Rendered CDP probes on https://palette-dev.archfox.org at 1400x900 AND 375x812, 3 test pastes created in-page (short title / 21-char custom slug / 40-char slug):
(a) Column order exact on both pages and both widths: /public colgroup [col-a,col-b,col-c,col-d,col-e,col-url,col-g] = URL 6th of 7 data columns; thead th order Paste,Type,Size,Views,Created,URL,ID; first-row tds align. /saved (mine): colgroup [...,col-d2,col-url,col-f,col-del] = URL 5th of 6 data columns (no Views), th and first-row td positions align.
(b) 21-char slug renders FULLY: URL cell content scrollWidth 304 == clientWidth 304 (no overflow), td 340px.
(c) 40-char slug ellipsizes: scrollWidth 590 vs clientWidth 308 (desktop) / 320 (mobile), text-overflow ellipsis.
(d) Sort arrows right of labels with uniform gap: measured 6px on every sortable column, both pages, both widths.
(e) URL header click sorts: th gains 'sorted asc' class and row order re-sorts (first rows before/after captured, order changed correctly).
(f) Zero CSP violations (Log.entryAdded drain after each page load at both widths: 0 entries).
Time logged, labels cleared, branch fix-296-r2 deleted. Superseded PR #299 (r1, wrong position) closed and its branch deleted.

QA PASS (fix attempt 2, PR #300 merged into dev d87b938, deployed to palette-dev, image swap proven by sha256 of served app.css/history.js/mine.js == git show origin/dev). Rendered CDP probes on https://palette-dev.archfox.org at 1400x900 AND 375x812, 3 test pastes created in-page (short title / 21-char custom slug / 40-char slug): (a) Column order exact on both pages and both widths: /public colgroup [col-a,col-b,col-c,col-d,col-e,col-url,col-g] = URL 6th of 7 data columns; thead th order Paste,Type,Size,Views,Created,URL,ID; first-row tds align. /saved (mine): colgroup [...,col-d2,col-url,col-f,col-del] = URL 5th of 6 data columns (no Views), th and first-row td positions align. (b) 21-char slug renders FULLY: URL cell content scrollWidth 304 == clientWidth 304 (no overflow), td 340px. (c) 40-char slug ellipsizes: scrollWidth 590 vs clientWidth 308 (desktop) / 320 (mobile), text-overflow ellipsis. (d) Sort arrows right of labels with uniform gap: measured 6px on every sortable column, both pages, both widths. (e) URL header click sorts: th gains 'sorted asc' class and row order re-sorts (first rows before/after captured, order changed correctly). (f) Zero CSP violations (Log.entryAdded drain after each page load at both widths: 0 entries). Time logged, labels cleared, branch fix-296-r2 deleted. Superseded PR #299 (r1, wrong position) closed and its branch deleted.
fen closed this issue 2026-09-18 14:16:48 +00:00
fen removed the QA label 2026-09-18 14:16:48 +00:00
fen reopened this issue 2026-09-18 16:06:50 +00:00
Author
Collaborator

OWNER OVERRIDE (postdates PR #300 QA pass):

  1. WIDTH: 340px is too wide - the ID column is pushed off the right edge. Shrink .col-url so the ID column is fully visible at 1400x900. The URL column should sit closer to the Created column (there is spare space there) but MUST NOT overlap the Created time values - verify gap > 0 between the Created cell content right edge and the URL cell content left edge on the widest realistic Created value.
  2. STYLING: remove the pill/capsule styling on URL values. A row with a URL should render it as plain text exactly like the 'none' value is rendered (same class/styling as the none case), not a highlighted capsule. Links keep working (still anchor elements), just no special background/border/padding treatment.

Acceptance: rendered probe at 1400x900 and 375x812 - ID column fully visible on both list tables, no overlap with Created values, URL values plain text visually identical to the none styling (same computed background/border/padding), 20-char slug still fully readable, sort arrows intact, zero CSP violations.

OWNER OVERRIDE (postdates PR #300 QA pass): 1. WIDTH: 340px is too wide - the ID column is pushed off the right edge. Shrink .col-url so the ID column is fully visible at 1400x900. The URL column should sit closer to the Created column (there is spare space there) but MUST NOT overlap the Created time values - verify gap > 0 between the Created cell content right edge and the URL cell content left edge on the widest realistic Created value. 2. STYLING: remove the pill/capsule styling on URL values. A row with a URL should render it as plain text exactly like the 'none' value is rendered (same class/styling as the none case), not a highlighted capsule. Links keep working (still anchor elements), just no special background/border/padding treatment. Acceptance: rendered probe at 1400x900 and 375x812 - ID column fully visible on both list tables, no overlap with Created values, URL values plain text visually identical to the none styling (same computed background/border/padding), 20-char slug still fully readable, sort arrows intact, zero CSP violations.
fen added the In Progress label 2026-09-18 16:07:38 +00:00
fen added spent time 1 minute 2026-09-18 16:07:38 +00:00
fen added spent time 1 minute 2026-09-18 16:08:16 +00:00
fen added QA and removed In Progress labels 2026-09-18 16:16:02 +00:00
fen added spent time 40 minutes 2026-09-18 16:16:02 +00:00
Author
Collaborator

QA FAIL (fix attempt 3, PR #301 merged into dev feb36fc5, CI docker success, deployed to palette-dev, image swap proven by sha256 of served app.css/history.js == git show origin/dev, served .col-url = 230px).

CRITICAL FAIL — owner criterion (20-char custom slug fully readable in URL cell) fails at 1400x900:

  • /history: 20-char slug /qa296r-abcdefghij123 anchor scrollWidth=223px vs clientWidth=208px → ellipsized, clipped by 15px.
  • /mine: same slug scrollWidth=223px vs clientWidth=218px → ellipsized, clipped by 5px.
  • (Earlier confirming measurement: 20-char slug /qa296-abcdefghij1234 scrollW=228 vs clientW=208 → 20px clip on /history.)
    URL content box at 230px column is ~208px wide; a 20-char slug needs ~223-228px. The column is too narrow for the owner's minimum.

Other checks measured (all pass):
(a) ID column fully inside card at 1400x900: /history id right edge 1236.3 vs card right 1275 (gap 38.7px); /mine 1188 vs 1280 (gap 92px).
(b2) 40-char slug ellipsizes correctly: scrollW=449 vs clientW=208 (history) / 218 (mine).
(c) No overlap: Created→URL gap 59.5px on /history row with '14h ago' (mobile 89.4px; /mine gap 96-100px).
(d) URL anchor plain: background transparent, border 0/none, padding 0, color rgb(192,178,222) = same as td.dim 'none' cell (cell padding is td-level, identical for both cells). No pill.
(e) URL header still sorts (row order changed on click on /history); headers uniformly styled.
(f) Zero CSP violations in all 4 probe combinations (1400x900 + 375x812, /history + /mine).

Mobile 375x812 (informational): table overflows horizontally (tableScrollW=1110 vs cardClientW=349) — pre-existing scroll behavior, 20-char slug fits there (scrollW=139=clientW=139).

Per owner override (attempt 3, no more automatic fixes): labels set to Owner Review; stopping.

QA FAIL (fix attempt 3, PR #301 merged into dev feb36fc5, CI docker success, deployed to palette-dev, image swap proven by sha256 of served app.css/history.js == git show origin/dev, served .col-url = 230px). CRITICAL FAIL — owner criterion (20-char custom slug fully readable in URL cell) fails at 1400x900: - /history: 20-char slug `/qa296r-abcdefghij123` anchor scrollWidth=223px vs clientWidth=208px → ellipsized, clipped by 15px. - /mine: same slug scrollWidth=223px vs clientWidth=218px → ellipsized, clipped by 5px. - (Earlier confirming measurement: 20-char slug `/qa296-abcdefghij1234` scrollW=228 vs clientW=208 → 20px clip on /history.) URL content box at 230px column is ~208px wide; a 20-char slug needs ~223-228px. The column is too narrow for the owner's minimum. Other checks measured (all pass): (a) ID column fully inside card at 1400x900: /history id right edge 1236.3 vs card right 1275 (gap 38.7px); /mine 1188 vs 1280 (gap 92px). (b2) 40-char slug ellipsizes correctly: scrollW=449 vs clientW=208 (history) / 218 (mine). (c) No overlap: Created→URL gap 59.5px on /history row with '14h ago' (mobile 89.4px; /mine gap 96-100px). (d) URL anchor plain: background transparent, border 0/none, padding 0, color rgb(192,178,222) = same as td.dim 'none' cell (cell padding is td-level, identical for both cells). No pill. (e) URL header still sorts (row order changed on click on /history); headers uniformly styled. (f) Zero CSP violations in all 4 probe combinations (1400x900 + 375x812, /history + /mine). Mobile 375x812 (informational): table overflows horizontally (tableScrollW=1110 vs cardClientW=349) — pre-existing scroll behavior, 20-char slug fits there (scrollW=139=clientW=139). Per owner override (attempt 3, no more automatic fixes): labels set to Owner Review; stopping.
fen added spent time 1 minute 2026-09-18 16:35:23 +00:00
fen added Owner Review and removed QA labels 2026-09-18 16:35:23 +00:00
Author
Collaborator

Fix attempt limit reached (3). Escalating to owner review.

Most recent verdict: QA FAIL (fix attempt 3, PR #301 merged feb36fc5, deployed) - 20-char custom slug still ellipsized in the URL cell at 1400x900 on both /public and /mine (scrollWidth 223px vs clientWidth 208px/218px). Three successive width/position revisions have not satisfied the acceptance criteria; needs an owner decision on the target width/placement before another attempt.

Fix attempt limit reached (3). Escalating to owner review. Most recent verdict: QA FAIL (fix attempt 3, PR #301 merged feb36fc5, deployed) - 20-char custom slug still ellipsized in the URL cell at 1400x900 on both /public and /mine (scrollWidth 223px vs clientWidth 208px/218px). Three successive width/position revisions have not satisfied the acceptance criteria; needs an owner decision on the target width/placement before another attempt.
Author
Collaborator

Owner verdict: current state (PR #301, 230px, plain-text URL values) accepted as-is. Closing.

Owner verdict: current state (PR #301, 230px, plain-text URL values) accepted as-is. Closing.
fen closed this issue 2026-09-18 16:36:57 +00:00
fen removed the Owner Review label 2026-09-18 16:36:57 +00:00
Sign in to join this conversation.
1 Participants
Notifications
Total Time Spent: 2 hours 55 minutes
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: poslop/palette#296