Show timeline descriptions in full #45

Merged

iec-admin merged 1 commit from claw/timeline-no-clamp-7a3e into main

2026-10-13 06:07:14 +00:00

iec-admin commented

2026-10-13 06:06:55 +00:00

Contributor

Closes #44.

What changed

Timeline descriptions in "Our story so far" were clamped to 5 lines. The body copy is justified, so the browser stretched the clamped last line to full width and clipped the ellipsis mid-word ("Lloyd'", "mor", "reinsuranc").

src/styles/home.css: the clamp on .bb-story__desc is removed. Every description shows in full; a long entry makes its row taller.
src/app/admin/HomepageEditor.tsx: the character counter on timeline descriptions stays as a nudge to keep entries short. Its tooltip now says a long entry "runs taller than the others in its row" instead of "trims with an ellipsis".

Walkthrough

Story: as a visitor reading the About page, I need to read each milestone in full so that the company history makes sense.

Steps driven in a local browser (Playwright, 1440px wide) against npm run dev on this branch:

Open /about and scroll to "Our story so far".
Every description renders in full. Measured in the page: no .bb-story__desc has scrollHeight greater than clientHeight.
The longest local entry (270 characters, the founding milestone) runs to eight lines and is complete, where it was cut at five before.

Reference: the timeline is display copy the client enters in the admin; nothing typed there should be hidden on the public page.

QA Execution

2026-10-12, local:

npm run type-check: passes.
/about at 1440px: 4 timeline entries, 0 clipped.

Not done in this PR

Not checked against the production copy. The local database has four timeline entries with different text from the eight in production, so the live wording has not been seen with this change.
Homepage not checked. The timeline is currently a hidden block on the homepage, so there was nothing to render there. The same CSS applies if it is switched back on.
Narrower widths not checked (the 3 and 2 column layouts below 1080px and 860px).
The founding entry is still several times longer than the rest, so the first row is taller than the second. Shortening it is a content edit for the client in the admin.

🤖 Generated with Claude Code

Closes #44. ## What changed Timeline descriptions in "Our story so far" were clamped to 5 lines. The body copy is justified, so the browser stretched the clamped last line to full width and clipped the ellipsis mid-word ("Lloyd'", "mor", "reinsuranc"). - `src/styles/home.css`: the clamp on `.bb-story__desc` is removed. Every description shows in full; a long entry makes its row taller. - `src/app/admin/HomepageEditor.tsx`: the character counter on timeline descriptions stays as a nudge to keep entries short. Its tooltip now says a long entry "runs taller than the others in its row" instead of "trims with an ellipsis". ## Walkthrough Story: as a visitor reading the About page, I need to read each milestone in full so that the company history makes sense. Steps driven in a local browser (Playwright, 1440px wide) against `npm run dev` on this branch: 1. Open `/about` and scroll to "Our story so far". 2. Every description renders in full. Measured in the page: no `.bb-story__desc` has `scrollHeight` greater than `clientHeight`. 3. The longest local entry (270 characters, the founding milestone) runs to eight lines and is complete, where it was cut at five before. Reference: the timeline is display copy the client enters in the admin; nothing typed there should be hidden on the public page. ## QA Execution 2026-10-12, local: - `npm run type-check`: passes. - `/about` at 1440px: 4 timeline entries, 0 clipped. ## Not done in this PR - **Not checked against the production copy.** The local database has four timeline entries with different text from the eight in production, so the live wording has not been seen with this change. - **Homepage not checked.** The timeline is currently a hidden block on the homepage, so there was nothing to render there. The same CSS applies if it is switched back on. - **Narrower widths not checked** (the 3 and 2 column layouts below 1080px and 860px). - **The founding entry is still several times longer than the rest**, so the first row is taller than the second. Shortening it is a content edit for the client in the admin. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

iec-admin added 1 commit

2026-10-13 06:06:55 +00:00

fix: show timeline descriptions in full (#44 ) 8281fcf7cd

Descriptions were clamped to five lines. The copy is justified, so the
clamped last line was stretched to full width and the ellipsis clipped
mid-word. The clamp is removed; a long entry makes its row taller.

The admin counter tooltip now says that instead of promising an ellipsis.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>