fix(sidebar): ensure that component renders correctly at 400% zoom

fixes #7035
Sage · Nov 6, 2024 · dc605f4 · dc605f4
1 parent be6d9f1
commit dc605f4
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/src/components/sidebar/sidebar.pw.tsx b/src/components/sidebar/sidebar.pw.tsx
@@ -430,6 +430,18 @@ test.describe("Accessibility tests for Sidebar component", () => {
   });
 });
 
+test("check component has correctly styling when zoom is 400%", async ({
+  mount,
+  page,
+}) => {
+  await mount(<Default />);
+
+  // 4.0 zoom is equal to 400%
+  await page.evaluate("document.body.style.zoom=4.0");
+
+  await assertCssValueIsApproximately(sidebarPreview(page), "max-width", 1366);
+});
+
 test.describe("Check background scroll when tabbing", () => {
   // TODO: Skipped due to flaky focus behaviour. To review in FE-6428
   test.skip("tabbing forward through the sidebar and back to the start should not make the background scroll to the bottom", async ({

diff --git a/src/components/sidebar/sidebar.style.ts b/src/components/sidebar/sidebar.style.ts
@@ -29,6 +29,7 @@ const StyledSidebar = styled.div<StyledSidebarProps>`
     flex-direction: column;
     top: 0;
     z-index: ${theme.zIndex.fullScreenModal};
+    max-width: 100vw;
 
     ${!width &&
     size &&