fix(styles): prevent overflow for TwoColumnPanel left container at na…

…rrow viewports (#1234)
dequelabs · Oct 11, 2023 · 53b0649 · 53b0649
1 parent 06862aa
commit 53b0649
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/packages/styles/two-column-panel.css b/packages/styles/two-column-panel.css
@@ -260,7 +260,12 @@
 
   .TwoColumnPanel--hide .TwoColumnPanel__Left,
   .TwoColumnPanel--show .TwoColumnPanel__Left {
-    margin-left: calc(var(--two-column-panel-left-column-width) * -1);
+    max-width: 100%;
+    /* This will constrain the component to the max-width of its container, as well as adjusting the offset margin to the max negative value to prevent incorrect offset when the max-width is less than the column width. */
+    margin-left: max(
+      calc(var(--two-column-panel-left-column-width) * -1),
+      calc(100% * -1)
+    );
     animation: none;
     opacity: 1;
   }