Skip to content

Commit

Permalink
fix(sidebar): resolve horizontal stretching of content
Browse files Browse the repository at this point in the history
- Make sidebar content a block element by default - so content doesn't
stretch horizontally to fill available space
  • Loading branch information
Parsium committed Oct 17, 2024
1 parent 9484881 commit 489ec31
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 103 deletions.
49 changes: 18 additions & 31 deletions src/components/sidebar/sidebar.style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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<
Expand Down Expand Up @@ -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,
Expand Down
31 changes: 0 additions & 31 deletions src/style/utils/resolve-padding-sides.test.ts

This file was deleted.

41 changes: 0 additions & 41 deletions src/style/utils/resolve-padding-sides.ts

This file was deleted.

0 comments on commit 489ec31

Please sign in to comment.