timescale.info#315 · Long titles wrap on phones, in the reader and the timeline heading
- timeline-app
- pull request
Closes #314. - **Reader** (`src/styles.css`): the title is a flexible item that wraps between words (`overflow-wrap: break-word`), so a word only breaks when it can't fit on a line at all. At 650 px and below, the heading wraps, its buttons (Fit in view, Share, Report, ×) keep their row at the top on the right, and the title takes the full width below at 26 px. - **Timeline title** (`src/index.html`, `src/app.ts`): `#timeline-title` is now a one-row ` ` that grows to its text, fitted with the description by the same function, so a long title wraps under itself instead of running off a narrow screen. It still behaves as one line: **Enter** commits it (blur, then the existing `change`), and pasted line breaks become spaces. `maxlength`, `disabled` in view mode, and the `change` handler are unchanged. Checked at 390 px in the offline editor with the Harry Potter timeline (screenshots in the session). `npm run build` succeeds; `test/browser.mjs` passes in Firefox and WebKit, including the tests that fill, blur and change the title. `npm test` passes apart from the README check on local agent worktrees.
Sources
Open #315 · Long titles wrap on phones, in the reader and the timeline heading in the timeline