administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-09-28 10:56:52 +03:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

fix mobile overflowing icons in system due to new health pane

Browse Source
This commit is contained in:
Josh Hawkins
2026-09-18 06:55:55 -05:00
parent e24bb8be72
commit 9ab0d97278
2 changed files with 86 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/e2e/specs/system.spec.ts
+50 -1
View File
@@ -72,7 +72,15 @@ test.describe("System — tabs @medium", () => {
{ timeout: 15_000 },
);
await expect(frigateApp.page.getByText("0.15.0-test")).toBeVisible();
await expect(frigateApp.page.getByText(/Last refreshed/)).toBeVisible();
if (frigateApp.isMobile) {
// the "Last refreshed" label is dropped on mobile so the timestamp
// clears the centered logo
await expect(frigateApp.page.getByText(/Last refreshed/)).toHaveCount(0);
await expect(frigateApp.page.getByText(/Just now|ago/)).toBeVisible();
} else {
await expect(frigateApp.page.getByText(/Last refreshed/)).toBeVisible();
}
});
test("storage tab renders content after switching", async ({
@@ -234,4 +242,45 @@ test.describe("System — mobile @medium @mobile", () => {
{ timeout: 5_000 },
);
});
test("header controls leave the logo uncovered on a narrow phone", async ({
frigateApp,
}) => {
await frigateApp.goto("/system#general");
await expect(frigateApp.page.getByLabel("Select general")).toHaveAttribute(
"data-state",
"on",
{ timeout: 15_000 },
);
await frigateApp.page.setViewportSize({ width: 320, height: 740 });
const logo = frigateApp.page.locator("svg.fill-current").first();
const tabs = frigateApp.page
.locator("[data-radix-scroll-area-viewport]")
.filter({ has: frigateApp.page.getByLabel("Select general") });
const refreshed = frigateApp.page.getByText(/Just now|ago/);
const logoBox = await logo.boundingBox();
const tabsBox = await tabs.boundingBox();
const refreshedBox = await refreshed.boundingBox();
expect(tabsBox!.x + tabsBox!.width).toBeLessThanOrEqual(logoBox!.x + 1);
expect(refreshedBox!.x).toBeGreaterThanOrEqual(logoBox!.x + logoBox!.width);
// the clipped tabs stay reachable by scrolling
const overflow = await tabs.evaluate((el) => ({
scroll: el.scrollWidth,
client: el.clientWidth,
}));
expect(overflow.scroll).toBeGreaterThan(overflow.client);
await tabs.evaluate((el) => {
el.scrollLeft = el.scrollWidth;
});
await frigateApp.page.getByLabel("Select cameras").click();
await expect(frigateApp.page.getByLabel("Select cameras")).toHaveAttribute(
"data-state",
"on",
{ timeout: 5_000 },
);
});
});