Fix mobile chart scrolling and navigation state
Merged
LU
7h ago+290+290+012345678901234567890123456789-64-64-01234567890123456789
From the second usability review of 21 October 2026. This was an agent-led review using simulated perspectives, not recruited participants. GPT 6.1 Sol implemented the changes; Claude reviewed them. This PR fixes C06 (phones) and C15 (navigation and URL state).
Changes
- Plotly charts no longer capture swipes. The shared
FloraCharts.plothelper setsdragmode:false,fixedrangeon every axis, andscrollZoom/doubleClickoff. Hover tooltips stay. This covers every Plotly chart, including the timelines. - Wide tables scroll sideways.
.table-wrapnow usesoverflow-x:auto, so the citation originals table (Timeline button) and the Publication Type study tables are reachable at 390 and 768 px. - Citation timeline dialog: a sticky toolbar with a 44 px close button. The dialog content scrolls inside the card.
- Tab strip: when the tabs don't fit (measured, not a fixed breakpoint), the existing select replaces them. At 1024 px, Publication Type is no longer hidden.
- History:
- Back and forward restore the tab and controls from the URL; a missing
tabparameter means Overview. - Back closes an open timeline dialog.
- Tab changes push a history entry; filter edits replace the current one.
- Back and forward restore the tab and controls from the URL; a missing
- Shared links contain only non-default state for the active tab. Citation search uses
ci-q, and oldsearch-inputlinks still work. Browse restores its page, page size and mobile page.
Tests
Five new browser scenarios:
- the 1024 px tab select and its recovery when wide;
- back/forward and dialog dismissal;
- old citation links and Browse paging;
- real touch swipes over every Plotly view, with axis ranges unchanged;
- table columns reachable at 390 and 768 px.
Full suite passes locally (21/21).
For review
The fixed header and footer height in landscape (a11y note 9) is unchanged.
š¤ Generated with Claude Code
Summary by cubic
Fixes mobile chart scrolling so swipes and drags scroll the page instead of zooming charts, and reworks URL/history state so back/forward restores tabs, controls, and dialogs correctly.
Chart and layout fixes
- Plotly charts no longer capture touches or drags; hover tooltips still work.
- Wide tables scroll sideways instead of stretching the whole page.
- Citation timeline dialog gets a sticky toolbar with a 44 px close button.
- The tab strip collapses to the existing select when tabs don't fit, measured rather than at a fixed breakpoint.
Navigation state
- Back/forward restores the tab and filters from the URL; a missing
tabmeans Overview and back always closes an open timeline. - Tab changes and user-opened timelines push a history entry; filter edits and deep-linked timelines replace the current one.
- DOI-only links stay on Citation Impact while data loads, and a pending deep link cancels if the user navigates away.
- History-driven closes focus the restored pane instead of the opener.
- Shared links contain only the active tab's non-default state; legacy
search-inputcitation links and Browse page, page size, and mobile page still restore.