Fix mobile chart scrolling and navigation state

Merged
LU
7h ago
+290-64

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.plot helper sets dragmode:false, fixedrange on every axis, and scrollZoom/doubleClick off. Hover tooltips stay. This covers every Plotly chart, including the timelines.
  • Wide tables scroll sideways. .table-wrap now uses overflow-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 tab parameter means Overview.
    • Back closes an open timeline dialog.
    • Tab changes push a history entry; filter edits replace the current one.
  • Shared links contain only non-default state for the active tab. Citation search uses ci-q, and old search-input links 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 tab means 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-input citation links and Browse page, page size, and mobile page still restore.