root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(FN-3912): make research view scrollable on mobile

Browse Source 
Fixes the research view to scroll properly on mobile by adding the necessary CSS, accompanied by a regression test to prevent the issue from recurring.

Fusion-Task-Id: FN-3912
This commit is contained in:
Fusion
2026-05-09 23:35:43 -07:00
committed by gsxdsm
parent b6d5032b31
commit 41c114add8
2 changed files with 19 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/dashboard/app/components/ResearchView.css
View File

@@ -200,12 +200,23 @@
@media (max-width: 768px) {
.research-view {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: var(--space-md);
padding-bottom: calc(var(--space-md) + var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + var(--standalone-bottom-gap));
}
.research-view__layout {
display: flex;
flex-direction: column;
grid-template-columns: minmax(0, 1fr);
flex: initial;
}
.research-view__history {
flex: initial;
min-height: initial;
overflow: visible;
}
.research-view__header {

12
packages/dashboard/app/components/__tests__/ResearchView.test.tsx
View File

@@ -1,5 +1,6 @@
import { describe, it, expect, vi, beforeEach } from "vitest";
import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
import { loadAllAppCss, loadAllAppCssBaseOnly } from "../../test/cssFixture";
import { Header } from "../Header";
import { ResearchView } from "../ResearchView";
@@ -528,9 +529,12 @@ describe("ResearchView", () => {
await waitFor(() => expect(enrichButton).not.toBeDisabled());
});
it("includes mobile layout media rule", async () => {
const css = await import("../ResearchView.css?inline");
expect(css.default).toContain("@media (max-width: 768px)");
expect(css.default).toContain(".research-view__layout");
it("FN-3912: research view content is scrollable on mobile", () => {
const css = loadAllAppCss();
const baseCss = loadAllAppCssBaseOnly();
expect(baseCss).toMatch(/\.research-view__layout\s*\{[^}]*display:\s*grid;[^}]*grid-template-columns:\s*minmax\(0,\s*1fr\)\s*minmax\(0,\s*2fr\);[^}]*\}/);
expect(css).toMatch(/@media\s*\(max-width:\s*768px\)\s*\{[^}]*\.research-view\s*\{[^}]*overflow-y:\s*auto;[^}]*-webkit-overflow-scrolling:\s*touch;[^}]*padding-bottom:\s*calc\(var\(--space-md\)\s*\+\s*var\(--mobile-nav-height\)\s*\+\s*env\(safe-area-inset-bottom,\s*0px\)\s*\+\s*var\(--standalone-bottom-gap\)\);[^}]*\}/);
});
});