timescale.info#208 · Offline header and phone toolbar: the download menu stays on screen, no badge repeats Offline, controls wrap
- timeline-app
- pull request
Fixes two problems in the offline editor's header on a phone, reported with a screenshot of openchronology.github.io. - **Download menu off the screen.** The menu is pinned to the right edge of its button. At 650px and under the header wraps, so Download sits at the left and the menu opened to the left, off the screen. At those widths it now opens below the header and across it (15px in from each side), wherever Download ends up. Wider screens are unchanged. This affects every edition that shows the menu, including the website editor on a phone. - **Redundant "Offline HTML" badge.** The offline file showed the storage badge "Offline HTML" beside its **Offline** chip, and the memory notice says the same. The badge is now hidden in the offline file. The website and desktop still show theirs (Browser draft, Local file, Public or Private timeline). - **Timeline controls wrap on phones.** On upright phones (650px and under), Search, Separate by tags, Time display and the rest used to scroll sideways in one row. They now wrap onto as many rows as they need. Held sideways they still scroll in one row, which leaves the timeline the screen's height. ## Tests `test/offline-browser.mjs` now checks that the badge is hidden. It also opens the download menu in the CFAM file at 390px, 640px and 1440px wide, and checks the menu lies within the window each time. `npm test` passes (299), along with typecheck and Prettier. `test/layout-browser.mjs` checks that upright phones wrap the controls without a scrollbar. The browser and offline tests pass locally in the Playwright Docker image, in Chromium and WebKit, and in Firefox apart from one assertion that didn't recur on a rerun. Screenshots at 412px wide show the controls on three rows and the menu opening below the header.