From 6a77217f94acd5608367a44e451d8f0982751f59 Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Tue, 9 Jun 2026 12:09:34 -0700
Subject: [PATCH] FN-6112: fix reliability view flex sizing

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
---
 .../dashboard/app/components/ReliabilityView.css   |  7 +++++++
 .../components/__tests__/ReliabilityView.test.tsx  | 14 ++++++++++----
 packages/dashboard/app/styles.css                  |  3 ++-
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/dashboard/app/components/ReliabilityView.css b/packages/dashboard/app/components/ReliabilityView.css
index 6d26d81d2d..742194c895 100644
--- a/packages/dashboard/app/components/ReliabilityView.css
+++ b/packages/dashboard/app/components/ReliabilityView.css
@@ -24,6 +24,7 @@
   align-items: center;
   justify-content: center;
   gap: var(--space-md);
+  height: 100%;
   min-width: 0;
   padding: var(--space-2xl);
   color: var(--text-muted);
@@ -36,6 +37,7 @@
   align-items: center;
   justify-content: center;
   gap: var(--space-md);
+  height: 100%;
   min-width: 0;
   padding: var(--space-2xl);
   text-align: center;
@@ -144,6 +146,11 @@
     padding-bottom: calc(var(--space-lg) + var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + var(--standalone-bottom-gap));
   }
 
+  .reliability-loading,
+  .reliability-error {
+    padding-bottom: calc(var(--space-lg) + var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + var(--standalone-bottom-gap));
+  }
+
   .reliability-grid {
     grid-template-columns: minmax(0, 1fr);
   }
diff --git a/packages/dashboard/app/components/__tests__/ReliabilityView.test.tsx b/packages/dashboard/app/components/__tests__/ReliabilityView.test.tsx
index 9a1b981b3b..daf99a8151 100644
--- a/packages/dashboard/app/components/__tests__/ReliabilityView.test.tsx
+++ b/packages/dashboard/app/components/__tests__/ReliabilityView.test.tsx
@@ -34,7 +34,10 @@ const baseResponse = {
 
 function renderInProjectContent() {
   return render(
-    <div data-testid="project-content" style={{ display: "flex", width: "100%" }}>
+    <div
+      data-testid="project-content"
+      style={{ display: "flex", flex: "1 1 auto", height: "100%", minHeight: 0, minWidth: 0, width: "100%", overflow: "hidden" }}
+    >
       <ReliabilityView />
     </div>,
   );
@@ -50,6 +53,9 @@ function expectFlexFill(element: HTMLElement) {
   expect(computed.flexGrow).toBe("1");
   expect(computed.flexShrink).toBe("1");
   expect(computed.flexBasis).toBe("auto");
+  expect(computed.height).not.toBe("");
+  expect(computed.height).not.toBe("0px");
+  expect(computed.height).not.toBe("auto");
   expect(computed.minWidth).toBe("0px");
 }
 
@@ -82,7 +88,7 @@ describe("ReliabilityView", () => {
   it.each([
     ["desktop", 1024],
     ["mobile", 375],
-  ])("fills flex parent width in %s loading state", (_label, width) => {
+  ])("fills flex parent width and height in %s loading state", (_label, width) => {
     setViewportWidth(width);
     vi.spyOn(globalThis, "fetch").mockReturnValue(new Promise<Response>(() => {}));
 
@@ -94,7 +100,7 @@ describe("ReliabilityView", () => {
   it.each([
     ["desktop", 1024],
     ["mobile", 375],
-  ])("fills flex parent width in %s populated state", async (_label, width) => {
+  ])("fills flex parent width and height in %s populated state", async (_label, width) => {
     setViewportWidth(width);
     vi.spyOn(globalThis, "fetch").mockResolvedValue({ ok: true, json: async () => baseResponse } as Response);
 
@@ -107,7 +113,7 @@ describe("ReliabilityView", () => {
   it.each([
     ["desktop", 1024],
     ["mobile", 375],
-  ])("fills flex parent width in %s error state", async (_label, width) => {
+  ])("fills flex parent width and height in %s error state", async (_label, width) => {
     setViewportWidth(width);
     vi.spyOn(globalThis, "fetch").mockRejectedValue(new Error("Network unavailable"));
 
diff --git a/packages/dashboard/app/styles.css b/packages/dashboard/app/styles.css
index 14cd285bbe..babfd614a1 100644
--- a/packages/dashboard/app/styles.css
+++ b/packages/dashboard/app/styles.css
@@ -3555,7 +3555,8 @@ input[type="range"]:focus-visible {
      "first" definition for any individual selector. */
   :is(.insights-view, .memory-view, .dev-server-view, .skills-view,
       .documents-view, .roadmaps-view, .nodes-management-overlay,
-      .agents-view, .chat-view, .mission-manager, .mailbox-view) {
+      .agents-view, .chat-view, .mission-manager, .mailbox-view,
+      .reliability-view) {
     min-height: 0;
   }