Ensure the reliability view fills its flex container across loading, populated, and error states.
- add full-height styling for reliability loading and error states
- include reliability view in shared min-height reset for app content containers
- expand reliability view tests to assert width and height fill on desktop and mobile
Files changed:
packages/dashboard/app/components/ReliabilityView.css | 7 +++++++
.../app/components/__tests__/ReliabilityView.test.tsx | 14 ++++++++++----
packages/dashboard/app/styles.css | 3 ++-
3 files changed, 19 insertions(+), 5 deletions(-)
Fusion-Task-Id: FN-6112
Fusion-Task-Lineage: c5b2bd85-4024-4f88-b64d-dbc90b3cf2ed
Keep the Reliability view filling its flex parent across mobile and desktop states.
- add flex growth and min-width safeguards to the Reliability view, loading, and error containers
- add desktop and mobile regression coverage for loading, populated, and error rendering states
Files changed:
packages/dashboard/app/components/ReliabilityView.css | 6 +++
packages/dashboard/app/components/__tests__/ReliabilityView.test.tsx | 59 ++++++++++++++++++++++
2 files changed, 65 insertions(+)
Fusion-Task-Id: FN-6110
Fusion-Task-Lineage: 5fe1e5a7-f13a-4316-8c4e-b5c85a51ce86
Improve ReliabilityView so pending and failed fetches render explicit UI states.
- add dedicated loading and error states to ReliabilityView while preserving existing data during background refreshes
- style the new reliability loading and error containers in the dashboard view CSS
- extend ReliabilityView tests to cover loading, fetch failure, and refresh behavior alongside the existing layout assertion
Files changed:
packages/dashboard/app/components/ReliabilityView.css | 25 ++++++++++
packages/dashboard/app/components/ReliabilityView.tsx | 41 ++++++++++++++---
packages/dashboard/app/components/__tests__/ReliabilityView.test.tsx | 53 ++++++++++++++++++++--
3 files changed, 109 insertions(+), 10 deletions(-)
Fusion-Task-Id: FN-6097
Fusion-Task-Lineage: c6949cc6-4383-4e53-8467-5656a101199e
- Broaden mobile media query to include (max-height: 480px) so landscape
phones (which exceed 768 CSS px wide) still render the bottom nav and
mobile board layout instead of desktop horizontally-scrollable columns.
- Guard useMobileKeyboard against pinch-zoom (vv.scale > 1) — Android
Chrome ignores user-scalable=no, and a focused textarea + zoom was
false-positiving keyboard-open and hiding MobileNavBar.
- Read documentElement.clientHeight instead of stale window.innerHeight
when computing keyboard overlap (Android multi-window can leave
innerHeight cached at a wildly different value than the actual layout
viewport — observed 2848 while html was 797).
- Add interactive-widget=resizes-content to the viewport meta so Android
Chrome shrinks the layout viewport with the soft keyboard, matching iOS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
