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(
-
+
,
);
@@ -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
(() => {}));
@@ -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;
}