Problem
The tree visualization headers assume a single desktop-width row. At 360px, the complete generation and zoom control set cannot fit beside the person/status text, and several views use controls materially smaller than the required 44x44px touch target.
Evidence
TreeControls renders a non-wrapping outer "flex items-center gap-4" and two non-wrapping groups. Its decrement/increment/zoom/reset buttons are all "w-7 h-7" (28px) at TreeControls.tsx:53-125. Fan and horizontal views put that full control set in a "flex items-center justify-between" header beside unbounded root-name text (FanChartView.tsx:435-449, HorizontalPedigreeView.tsx:247-261). Vertical and columns repeat the same non-wrapping header pattern and use "p-1" or "px-2 py-1" control buttons (VerticalFamilyView.tsx:859-887, GenerationalColumnsView.tsx:135-162).
Impact
At 360x640, the fan and horizontal headers require substantially more than the available inline width before the chart is visible: the name label plus generation group, separator, and four zoom controls force horizontal clipping/overflow. The vertical and columns controls similarly compete with their status text. The 28px controls are 16px short in each dimension for touch input. These are above-fold controls on every ancestry-tree route, so the finding is raised to high severity.
Implementation plan
Create one responsive tree-toolbar layout used by all visualization headers. Allow the heading/status area to shrink and truncate, move controls to a second row below the narrow breakpoint (or permit a deliberate wrapped controls row), and keep related controls together. Promote all direct manipulation buttons to the existing 44px minimum used by the mobile menu; retain their icon visual size and the current desktop arrangement where sufficient width exists.
Acceptance criteria
- At 360x640, fan, horizontal, vertical, and columns views show their title/status and every generation/zoom control without document-level horizontal scrolling or clipped controls.
- Each tree-toolbar button has a rendered hit box of at least 44x44 CSS px at 360x640, 768x1024, and 1280x800.
- At 768x1024 and 1280x800, controls remain grouped and chart canvas still receives the remaining viewport height.
Verification
Open each tree view with a long root-person name at 360x640, 768x1024, and 1280x800. Confirm document.documentElement.scrollWidth === window.innerWidth, inspect button bounding boxes, and tap each generation/zoom/reset action on a touch emulation.
Dependencies and related work
No backend dependency. This should establish the canonical responsive tree-toolbar pattern before adding further tree-view controls.
Scope
Complexity: medium. Files: the shared TreeControls component and the four visualization headers. Non-goals: changing tree data, chart geometry, or visualization semantics.
Problem
The tree visualization headers assume a single desktop-width row. At 360px, the complete generation and zoom control set cannot fit beside the person/status text, and several views use controls materially smaller than the required 44x44px touch target.
Evidence
TreeControlsrenders a non-wrapping outer"flex items-center gap-4"and two non-wrapping groups. Its decrement/increment/zoom/reset buttons are all"w-7 h-7"(28px) atTreeControls.tsx:53-125. Fan and horizontal views put that full control set in a"flex items-center justify-between"header beside unbounded root-name text (FanChartView.tsx:435-449,HorizontalPedigreeView.tsx:247-261). Vertical and columns repeat the same non-wrapping header pattern and use"p-1"or"px-2 py-1"control buttons (VerticalFamilyView.tsx:859-887,GenerationalColumnsView.tsx:135-162).Impact
At 360x640, the fan and horizontal headers require substantially more than the available inline width before the chart is visible: the name label plus generation group, separator, and four zoom controls force horizontal clipping/overflow. The vertical and columns controls similarly compete with their status text. The 28px controls are 16px short in each dimension for touch input. These are above-fold controls on every ancestry-tree route, so the finding is raised to high severity.
Implementation plan
Create one responsive tree-toolbar layout used by all visualization headers. Allow the heading/status area to shrink and truncate, move controls to a second row below the narrow breakpoint (or permit a deliberate wrapped controls row), and keep related controls together. Promote all direct manipulation buttons to the existing 44px minimum used by the mobile menu; retain their icon visual size and the current desktop arrangement where sufficient width exists.
Acceptance criteria
Verification
Open each tree view with a long root-person name at 360x640, 768x1024, and 1280x800. Confirm
document.documentElement.scrollWidth === window.innerWidth, inspect button bounding boxes, and tap each generation/zoom/reset action on a touch emulation.Dependencies and related work
No backend dependency. This should establish the canonical responsive tree-toolbar pattern before adding further tree-view controls.
Scope
Complexity: medium. Files: the shared
TreeControlscomponent and the four visualization headers. Non-goals: changing tree data, chart geometry, or visualization semantics.