diff --git a/CHANGELOG.md b/CHANGELOG.md index 8e77fbfe..74b73f54 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -29,6 +29,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) - [MAJOR] Replaced JavaScript theme system with CSS custom properties (`--kiba-*`) - [MAJOR] Updated to Storybook 10 with CSF3 format and MDX documentation - [MINOR] Changed `ContainingView` to not make children automatically have `overflow: auto` +- [MINOR] Added `maxWidth` prop to `ContainingView` ### Removed diff --git a/src/wrappers/containingView/component.tsx b/src/wrappers/containingView/component.tsx index c0b0e9b0..426c1a72 100644 --- a/src/wrappers/containingView/component.tsx +++ b/src/wrappers/containingView/component.tsx @@ -7,12 +7,13 @@ import { WrapperView } from '../wrappingComponent'; export interface IContainingViewProps extends IWrapperProps { isCenteredHorizontally?: boolean; + maxWidth?: string; } export function ContainingView(props: IContainingViewProps): React.ReactElement { const isCenteredHorizontally = props.isCenteredHorizontally ?? true; const wrapperStyle: React.CSSProperties = { - maxWidth: 'var(--kiba-screen-width-max)', + maxWidth: props.maxWidth ?? 'var(--kiba-screen-width-max)', width: '100%', ...(isCenteredHorizontally ? { marginLeft: 'auto', marginRight: 'auto' } : {}), };