From e3fbe0edef91eb57e8e583dfd3156acbfd0ae862 Mon Sep 17 00:00:00 2001 From: Lizaveta Miasayedava Date: Mon, 16 Mar 2026 20:32:15 +0000 Subject: [PATCH 1/3] refactor(widget-playground): set 'fit-content' height configuration by default --- .../LayoutControls/HeightControl.tsx | 6 ++-- .../LayoutControls/InputControl.tsx | 6 ++-- .../LayoutControls/LayoutControl.tsx | 29 +++++-------------- .../components/Widget/WidgetViewContainer.tsx | 6 +--- .../src/defaultWidgetConfig.ts | 1 + .../src/store/editTools/types.ts | 1 - 6 files changed, 16 insertions(+), 33 deletions(-) diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls/HeightControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls/HeightControl.tsx index 29540c007..abd825837 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls/HeightControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls/HeightControl.tsx @@ -27,8 +27,8 @@ export const HeightControl = ({ }: { selectedLayoutId: Layout setInitialLayout: (layoutId: Layout) => void - heightValue: number | undefined - setHeightValue: (height: number | undefined) => void + heightValue: number | 'fit-content' | undefined + setHeightValue: (height: number | 'fit-content' | undefined) => void }) => { const { setHeader, setContainer, getCurrentConfigTheme } = useConfigActions() @@ -87,7 +87,7 @@ export const HeightControl = ({ ) } - if (selectedLayoutId === 'fit-content') { + if (selectedLayoutId === 'default') { return ( { label: string - value: number | undefined + value: number | 'fit-content' | undefined onChange: ChangeEventHandler onBlur: FocusEventHandler } @@ -22,11 +22,13 @@ export const InputControl = ({ onBlur, }: InputControlProps) => { const inputId = useId() + const showCaption = + !value || value === 'fit-content' || (value && value < defaultMaxHeight) return ( - {(value && value < defaultMaxHeight) || !value ? ( + {showCaption ? ( {`${defaultMaxHeight}px minimum`} diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls/LayoutControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls/LayoutControl.tsx index 214249866..6aacc405a 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls/LayoutControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls/LayoutControl.tsx @@ -37,10 +37,6 @@ const layoutOptions: LayoutOption[] = [ id: 'full-height', name: 'Full Height', }, - { - id: 'fit-content', - name: 'Fit Content', - }, ] const getLayoutMode = (container?: CSSProperties) => { @@ -52,7 +48,7 @@ const getLayoutMode = (container?: CSSProperties) => { if (container.display === 'flex' && container.height === '100%') { layoutMode = 'full-height' } else if (container.height === 'fit-content') { - layoutMode = 'fit-content' + layoutMode = 'default' } else if (Number.isFinite(container.height)) { layoutMode = 'restricted-height' } else if (Number.isFinite(container.maxHeight)) { @@ -72,7 +68,9 @@ export const LayoutControl = () => { const { selectedLayoutId } = useLayoutValues() const { setSelectedLayoutId } = useEditToolsActions() - const [heightValue, setHeightValue] = useState() // height or maxHeight, depending on selectedLayoutId + const [heightValue, setHeightValue] = useState< + number | 'fit-content' | undefined + >() // height or maxHeight, depending on selectedLayoutId useEffect(() => { setSelectedLayoutId(getLayoutMode(config?.theme?.container)) @@ -127,28 +125,15 @@ export const LayoutControl = () => { setContainer(fullHeightContainer) break } - case 'fit-content': { - setHeader() - - const fullHeightContainer = { - ...(getCurrentConfigTheme()?.container ?? {}), - display: undefined, - height: 'fit-content', - maxHeight: defaultMaxHeight, - } - - setContainer(fullHeightContainer) - break - } default: { - setHeightValue(undefined) + setHeightValue('fit-content') setHeader() const defaultContainer = { ...(getCurrentConfigTheme()?.container ?? {}), display: undefined, - height: undefined, - maxHeight: undefined, + height: 'fit-content', + maxHeight: defaultMaxHeight, } setContainer(defaultContainer) diff --git a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx index 2cee4f6d3..abd91cd3a 100644 --- a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx +++ b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx @@ -22,11 +22,7 @@ interface WidgetViewContainerProps extends PropsWithChildren { toggleDrawer?(): void } -const topAlignedLayouts: Layout[] = [ - 'default', - 'restricted-max-height', - 'fit-content', -] +const topAlignedLayouts: Layout[] = ['default', 'restricted-max-height'] export function WidgetViewContainer({ children, diff --git a/packages/widget-playground/src/defaultWidgetConfig.ts b/packages/widget-playground/src/defaultWidgetConfig.ts index 31da67ae2..4fde19972 100644 --- a/packages/widget-playground/src/defaultWidgetConfig.ts +++ b/packages/widget-playground/src/defaultWidgetConfig.ts @@ -323,6 +323,7 @@ export const defaultWidgetConfig: Partial = { container: { boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)', borderRadius: '16px', + height: 'fit-content', }, // routesContainer: { // boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)', diff --git a/packages/widget-playground/src/store/editTools/types.ts b/packages/widget-playground/src/store/editTools/types.ts index e7ca98775..3a63ed24d 100644 --- a/packages/widget-playground/src/store/editTools/types.ts +++ b/packages/widget-playground/src/store/editTools/types.ts @@ -10,7 +10,6 @@ export type Layout = | 'restricted-height' | 'restricted-max-height' | 'full-height' - | 'fit-content' export interface ThemeItem { id: string From fe2421f86affab1d629f03e8949fdac6964aad68 Mon Sep 17 00:00:00 2001 From: Lizaveta Miasayedava Date: Tue, 17 Mar 2026 13:25:45 +0000 Subject: [PATCH 2/3] refactor(widget): set default container height to 'fit-content' in createTheme --- packages/widget-playground/src/defaultWidgetConfig.ts | 1 - packages/widget/src/themes/createTheme.ts | 6 +++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/widget-playground/src/defaultWidgetConfig.ts b/packages/widget-playground/src/defaultWidgetConfig.ts index 4fde19972..31da67ae2 100644 --- a/packages/widget-playground/src/defaultWidgetConfig.ts +++ b/packages/widget-playground/src/defaultWidgetConfig.ts @@ -323,7 +323,6 @@ export const defaultWidgetConfig: Partial = { container: { boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)', borderRadius: '16px', - height: 'fit-content', }, // routesContainer: { // boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)', diff --git a/packages/widget/src/themes/createTheme.ts b/packages/widget/src/themes/createTheme.ts index cd85d49f3..cc7f80655 100644 --- a/packages/widget/src/themes/createTheme.ts +++ b/packages/widget/src/themes/createTheme.ts @@ -117,7 +117,11 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => { }, }, }, - container: widgetTheme.container, + container: { + // Set height to 'fit-content' if not explicitly set + height: 'fit-content', + ...widgetTheme.container, + }, routesContainer: widgetTheme.routesContainer, chainSidebarContainer: widgetTheme.chainSidebarContainer, header: widgetTheme.header, From d60a0bdf33bcf7d9f1d884832aa97456633e02f3 Mon Sep 17 00:00:00 2001 From: Lizaveta Miasayedava Date: Tue, 17 Mar 2026 13:34:46 +0000 Subject: [PATCH 3/3] refactor: simplify condition for showing caption in InputControl --- .../DesignControls/LayoutControls/InputControl.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls/InputControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls/InputControl.tsx index 8cfb8ff54..caa5b78a2 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls/InputControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls/InputControl.tsx @@ -23,7 +23,7 @@ export const InputControl = ({ }: InputControlProps) => { const inputId = useId() const showCaption = - !value || value === 'fit-content' || (value && value < defaultMaxHeight) + !value || value === 'fit-content' || value < defaultMaxHeight return (