gsxdsm 5ed15e27b7 FN-7830: fix Insights view header wrapping on mobile ...

Give the Insights view header its own dedicated mobile layout so the title no longer collapses to an ellipsis and action buttons no longer crowd together at narrow widths/short heights.

- Extend the mobile header media query to also trigger on short viewports (max-height: 480px), not just narrow widths
- Force the Insights title onto its own full-width row (flex: 1 0 100%) and let it wrap actions below instead of shrinking
- Stop truncating the title span (overflow: visible; text-overflow: clip) so "Insights" is never cut to "I…"
- Let the actions cluster wrap to full width, left-aligned, with no leading margin so touch targets stay usable
- Add regression tests covering the maximal header action cluster and asserting the new mobile/tablet/desktop CSS media-query contracts

Files changed:
 packages/dashboard/app/components/InsightsView.css               | 29 ++++++-
 .../app/components/__tests__/InsightsView.test.tsx                | 88 ++++++++++++++++++++++
 2 files changed, 116 insertions(+), 1 deletion(-)

Fusion-Task-Id: FN-7830

Fusion-Task-Lineage: 4c92cb43-5c08-4b76-9f51-805ffa5deec9

Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>

2026-07-11 20:32:56 -07:00

15 KiB

Raw Blame History

View Raw