fix(sidebar): resolve horizontal stretching of content

- Make sidebar content a block element by default - so content doesn't stretch horizontally to fill available space
Sage · Oct 17, 2024 · 489ec31 · 489ec31
1 parent 9484881
commit 489ec31
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 103 deletions.
diff --git a/src/components/sidebar/sidebar.style.ts b/src/components/sidebar/sidebar.style.ts
@@ -7,7 +7,6 @@ import baseTheme from "../../style/themes/base";
 import StyledIconButton from "../icon-button/icon-button.style";
 
 import { SIDEBAR_SIZES_CSS } from "./sidebar.config";
-import resolvePaddingSides from "../../style/utils/resolve-padding-sides";
 import { StyledForm, StyledFormContent } from "../form/form.style";
 
 type StyledSidebarProps = Pick<
@@ -56,40 +55,28 @@ const StyledSidebar = styled.div<StyledSidebarProps>`
   `}
 `;
 
-const StyledSidebarContent = styled.div<PaddingProps>((props) => {
-  const {
-    paddingTop = "var(--spacing300)",
-    paddingRight = "var(--spacing400)",
-    paddingBottom = "var(--spacing400)",
-    paddingLeft = "var(--spacing400)",
-  } = resolvePaddingSides(props);
+const StyledSidebarContent = styled.div<PaddingProps>`
+  box-sizing: border-box;
+  display: block;
+  overflow-y: auto;
+  flex-grow: 1;
 
-  return css`
-    box-sizing: border-box;
+  padding: var(--spacing300) var(--spacing400) var(--spacing400);
+  ${paddingFn}
+
+  &:has(${StyledForm}.sticky) {
     display: flex;
     flex-direction: column;
-    overflow-y: auto;
-
-    flex: 1;
-
-    ${StyledForm}.sticky {
-      margin-top: calc(-1 * ${paddingTop});
-      margin-right: calc(-1 * ${paddingRight});
-      margin-bottom: calc(-1 * ${paddingBottom});
-      margin-left: calc(-1 * ${paddingLeft});
-
-      ${StyledFormContent} {
-        padding-top: ${paddingTop};
-        padding-right: ${paddingRight};
-        padding-bottom: ${paddingBottom};
-        padding-left: ${paddingLeft};
-      }
+    overflow-y: hidden;
+    padding: 0;
+  }
+  ${StyledForm}.sticky {
+    ${StyledFormContent} {
+      padding: var(--spacing300) var(--spacing400) var(--spacing400);
+      ${paddingFn}
     }
-
-    padding: ${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft};
-    ${paddingFn}
-  `;
-});
+  }
+`;
 
 StyledSidebar.defaultProps = {
   theme: baseTheme,

diff --git a/src/style/utils/resolve-padding-sides.test.ts b/src/style/utils/resolve-padding-sides.test.ts
diff --git a/src/style/utils/resolve-padding-sides.ts b/src/style/utils/resolve-padding-sides.ts