The Links page no longer stretches sideways when a stored URL is long… #2

Merged

cmoriarty merged 5 commits from osf/67-links-page-readable-with-long-urls-solo into main 2026-10-16 19:01:27 -04:00

Conversation 0 Commits 5 Files changed 40 +608 -1786

cmoriarty commented 2026-10-16 18:21:53 -04:00

Owner

Copy link

What was done

• The Links page no longer stretches sideways when a stored URL is long: the table now fits the window at 1280×720 and on a 390 px phone, so every row's click count is visible without sideways scrolling.
• A URL too long for its cell is shown clamped to three lines ending in an ellipsis, instead of widening the page (about 17,700 px before) or making its row dozens of lines tall.
• The full URL stays available to a person: the cell's tooltip carries the whole URL, and copying or following the short link still yields it.
• The table keeps its Code, URL and Clicks columns, its newest-first order and all of its data, and no other page changed.
• New browser regression tests in e2e/links.spec.ts store a 2,000-character URL and check both viewports: the Clicks cell lies inside the window, the page does not scroll sideways, the long URL's row stays about three lines tall, and the short link still redirects to the whole URL.
• Two test-only adjustments came with the new markup and slower CI: a test helper that reads the click count out of the page picks up the new URL cell, and the two 50-concurrent click-count tests got their own longer timeout after timing out on CI's default five seconds.
• One pre-existing startup race was fixed in src/db.ts: when several processes create the links table at first start at once, one more Postgres "already exists" error code is now tolerated like the ones already handled, instead of crashing a test run.
• Everything was checked by the run's own gates: the unit and browser suites pass, the project's CI is green, and a person's-eye review of the served pages at both viewports confirmed the clamp, the tooltip, and ordinary rows unchanged.
• Not done: tapping a clamped URL on a phone does not reveal the full URL (a hover tooltip needs a mouse); the short link itself remains the way to get it on touch devices, as agreed in review — and at 390 px even medium-length URLs clamp, with their full text still in the tooltip.

How to review

1. Get the branch: git checkout osf/67-links-page-readable-with-long-urls-solo and npm install.
2. Point DATABASE_URL at a reachable Postgres as the README's Run section describes, e.g. by starting node scripts/services.mjs and using the DATABASE_URL it writes.
3. Run npm test — all 58 unit tests pass, including the ones pinning the new row markup.
4. Run npm run test:e2e — 22 browser tests pass, including the new 2,000-character-URL checks at 1280×720 and 390×844.
5. See it yourself: npm start, shorten a 2,000-character URL, open /links at 1280×720 and resize to 390 px wide — the URL shows on at most three lines ending in an ellipsis, its Clicks cell stays inside the window, nothing scrolls sideways, and hovering the URL cell shows the whole URL.
6. Read src/pages.ts first (the table styles and the URL cell), then the added tests at the bottom of e2e/links.spec.ts.

Tests

4 of 5 scenarios of make-shortcut-s-links-page-readable-what-ee5bpk have a tagged test. No test carries the spec: tag of these:

• click-tracking/Ordinary rows are unchanged

The test lint recorded nothing in the run's tests.

Braid run

• Workflow: Braid's OpenSpec flow, change make-shortcut-s-links-page-readable-what-ee5bpk (29 steps, 2 retried)
• Model: llama.cpp · qwen3.8-flash-next
• Time: 1 h 30 m from start to this pull request, 1 h 10 m of it in the model
• Tokens: 97k input, 66k output, over 138 model calls
• CI: passed its 6 jobs on ecc0c3f8d3
• Run: run_01M539ZMDNSQQEBH2QTJEE5BPK

Opened by Braid.

## What was done - The Links page no longer stretches sideways when a stored URL is long: the table now fits the window at 1280×720 and on a 390 px phone, so every row's click count is visible without sideways scrolling. - A URL too long for its cell is shown clamped to three lines ending in an ellipsis, instead of widening the page (about 17,700 px before) or making its row dozens of lines tall. - The full URL stays available to a person: the cell's tooltip carries the whole URL, and copying or following the short link still yields it. - The table keeps its Code, URL and Clicks columns, its newest-first order and all of its data, and no other page changed. - New browser regression tests in `e2e/links.spec.ts` store a 2,000-character URL and check both viewports: the Clicks cell lies inside the window, the page does not scroll sideways, the long URL's row stays about three lines tall, and the short link still redirects to the whole URL. - Two test-only adjustments came with the new markup and slower CI: a test helper that reads the click count out of the page picks up the new URL cell, and the two 50-concurrent click-count tests got their own longer timeout after timing out on CI's default five seconds. - One pre-existing startup race was fixed in `src/db.ts`: when several processes create the links table at first start at once, one more Postgres "already exists" error code is now tolerated like the ones already handled, instead of crashing a test run. - Everything was checked by the run's own gates: the unit and browser suites pass, the project's CI is green, and a person's-eye review of the served pages at both viewports confirmed the clamp, the tooltip, and ordinary rows unchanged. - **Not done:** tapping a clamped URL on a phone does not reveal the full URL (a hover tooltip needs a mouse); the short link itself remains the way to get it on touch devices, as agreed in review — and at 390 px even medium-length URLs clamp, with their full text still in the tooltip. ## How to review 1. Get the branch: `git checkout osf/67-links-page-readable-with-long-urls-solo` and `npm install`. 2. Point `DATABASE_URL` at a reachable Postgres as the README's Run section describes, e.g. by starting `node scripts/services.mjs` and using the `DATABASE_URL` it writes. 3. Run `npm test` — all 58 unit tests pass, including the ones pinning the new row markup. 4. Run `npm run test:e2e` — 22 browser tests pass, including the new 2,000-character-URL checks at 1280×720 and 390×844. 5. See it yourself: `npm start`, shorten a 2,000-character URL, open `/links` at 1280×720 and resize to 390 px wide — the URL shows on at most three lines ending in an ellipsis, its Clicks cell stays inside the window, nothing scrolls sideways, and hovering the URL cell shows the whole URL. 6. Read `src/pages.ts` first (the table styles and the URL cell), then the added tests at the bottom of `e2e/links.spec.ts`. ## Tests 4 of 5 scenarios of `make-shortcut-s-links-page-readable-what-ee5bpk` have a tagged test. No test carries the `spec:` tag of these: - `click-tracking/Ordinary rows are unchanged` The test lint recorded nothing in the run's tests. ## Braid run - **Workflow:** Braid's OpenSpec flow, change `make-shortcut-s-links-page-readable-what-ee5bpk` (29 steps, 2 retried) - **Model:** llama.cpp · qwen3.8-flash-next - **Time:** 1 h 30 m from start to this pull request, 1 h 10 m of it in the model - **Tokens:** 97k input, 66k output, over 138 model calls - **CI:** passed its 6 jobs on `ecc0c3f8d3` - **Run:** [run_01M539ZMDNSQQEBH2QTJEE5BPK](http://openspecflow.internal.underthere.xyz/run/run_01M539ZMDNSQQEBH2QTJEE5BPK) _Opened by Braid._

cmoriarty added 4 commits 2026-10-16 18:21:53 -04:00

propose: the change, its specs, its tasks and its estimate e1a91ba31f

propose: revise the change as review 1 asked 9a09d97622

propose: revise the change as review 2 asked bd73b5e61f

check: the code of fix-loop round 1, for the project's CI 4c5a43a07e

cmoriarty force-pushed osf/67-links-page-readable-with-long-urls-solo from 4c5a43a07e to 24c4555897 2026-10-16 18:27:42 -04:00 Compare

cmoriarty force-pushed osf/67-links-page-readable-with-long-urls-solo from 24c4555897 to ecc0c3f8d3 2026-10-16 18:34:27 -04:00 Compare

cmoriarty changed title from Make Shortcut's Links page readable whatever the length of the stored… to The Links page no longer stretches sideways when a stored URL is long… 2026-10-16 19:01:01 -04:00

cmoriarty force-pushed osf/67-links-page-readable-with-long-urls-solo from ecc0c3f8d3 to 5c84f280ff 2026-10-16 19:01:01 -04:00 Compare

cmoriarty merged commit 3c02ff4ba3 into main 2026-10-16 19:01:27 -04:00

cmoriarty deleted branch osf/67-links-page-readable-with-long-urls-solo 2026-10-16 19:01:27 -04:00

cmoriarty referenced this pull request from a commit 2026-10-16 19:01:28 -04:00

Merge pull request 'The Links page no longer stretches sideways when a stored URL is long…' (#2) from osf/67-links-page-readable-with-long-urls-solo into main

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

cmoriarty/braid-combined-test!2

No description provided.