From 79a0269e4a3e1d728b72ed1455eb0d0b1506b5af Mon Sep 17 00:00:00 2001 From: Lizaveta Miasayedava Date: Wed, 18 Mar 2026 17:26:38 +0000 Subject: [PATCH 1/3] fix: restrict maxHeight for routes expansion --- .../components/Routes/RoutesExpanded.style.ts | 41 ++++++++++--------- 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/packages/widget/src/components/Routes/RoutesExpanded.style.ts b/packages/widget/src/components/Routes/RoutesExpanded.style.ts index 0e799151d..f8c95fb4a 100644 --- a/packages/widget/src/components/Routes/RoutesExpanded.style.ts +++ b/packages/widget/src/components/Routes/RoutesExpanded.style.ts @@ -10,25 +10,28 @@ interface ContainerProps extends ScopedCssBaselineProps { export const Container = styled(ScopedCssBaseline, { shouldForwardProp: (prop) => !['minimumHeight'].includes(prop as string), -})(({ theme, minimumHeight }) => ({ - ...theme.container, - backgroundColor: theme.vars.palette.background.default, - overflow: 'hidden', - width: routesExpansionWidth, - display: 'flex', - flexDirection: 'column', - whiteSpace: 'normal', - ...(theme.container?.display !== 'flex' - ? { - maxHeight: - theme.container?.maxHeight ?? - theme.container?.height ?? - defaultMaxHeight, - ...(minimumHeight ? { '&': { height: 'auto' } } : {}), - } - : { height: minimumHeight ? 'auto' : '100%' }), - ...theme.routesContainer, -})) +})(({ theme, minimumHeight }) => { + const fallbackMaxHeight = + !theme.container?.height || theme.container?.height === 'fit-content' + ? defaultMaxHeight + : theme.container?.height + return { + ...theme.container, + backgroundColor: theme.vars.palette.background.default, + overflow: 'hidden', + width: routesExpansionWidth, + display: 'flex', + flexDirection: 'column', + whiteSpace: 'normal', + ...(theme.container?.display !== 'flex' + ? { + maxHeight: theme.container?.maxHeight ?? fallbackMaxHeight, + ...(minimumHeight ? { '&': { height: 'auto' } } : {}), + } + : { height: minimumHeight ? 'auto' : '100%' }), + ...theme.routesContainer, + } +}) export const Header = styled(Box)(({ theme }) => ({ backgroundColor: theme.vars.palette.background.default, From 20e5dda7e3fbb3d63b748169d17844648035a9ee Mon Sep 17 00:00:00 2001 From: Lizaveta Miasayedava Date: Thu, 19 Mar 2026 13:28:32 +0000 Subject: [PATCH 2/3] fix: widget container height restriction on playground --- .../src/components/Widget/WidgetView.style.tsx | 12 ++---------- .../src/components/Widget/WidgetViewContainer.tsx | 9 ++++++--- 2 files changed, 8 insertions(+), 13 deletions(-) diff --git a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx index cdb7e21ad..25d1b4645 100644 --- a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx +++ b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx @@ -1,8 +1,6 @@ -import { defaultMaxHeight } from '@lifi/widget' import type { BoxProps, Theme } from '@mui/material' import { Box, IconButton } from '@mui/material' import { styled } from '@mui/material/styles' -import type { CSSProperties } from 'react' import { drawerZIndex } from '../DrawerControls/DrawerControls.style.js' export const FloatingToolsContainer = styled(Box)(({ theme }) => ({ @@ -48,22 +46,16 @@ export const WidgetContainer = styled(Box, { interface WidgetContainerRowProps extends BoxProps { alignTop?: boolean - widgetContainer?: CSSProperties } export const WidgetContainerRow = styled(Box, { - shouldForwardProp: (prop) => - !['alignTop', 'widgetContainer'].includes(prop as string), -})(({ widgetContainer }) => { + shouldForwardProp: (prop) => !['alignTop'].includes(prop as string), +})(() => { return { display: 'flex', alignItems: 'center', flexGrow: 1, width: '100%', - maxHeight: - widgetContainer?.maxHeight || !widgetContainer?.height - ? (widgetContainer?.maxHeight ?? defaultMaxHeight) - : 'none', variants: [ { props: ({ alignTop }) => alignTop, diff --git a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx index abd91cd3a..d0eb36f76 100644 --- a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx +++ b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx @@ -22,7 +22,7 @@ interface WidgetViewContainerProps extends PropsWithChildren { toggleDrawer?(): void } -const topAlignedLayouts: Layout[] = ['default', 'restricted-max-height'] +const topAlignedLayouts: Layout[] = ['restricted-max-height'] export function WidgetViewContainer({ children, @@ -44,6 +44,10 @@ export function WidgetViewContainer({ const showHeader = isFullHeightLayout && showMockHeader const showFooter = isFullHeightLayout && showMockFooter + const isDefault = + !config?.theme?.container?.height || + config?.theme?.container?.height === 'fit-content' + return (
@@ -78,7 +82,7 @@ export function WidgetViewContainer({ ) : null} {children} From a716a489c10e6b9f3b3fac01448558b121edff6c Mon Sep 17 00:00:00 2001 From: Lizaveta Miasayedava Date: Fri, 20 Mar 2026 09:50:56 +0000 Subject: [PATCH 3/3] refactor: simplify WidgetContainerRow by removing alignTop prop and related logic --- .../src/components/Widget/WidgetView.style.tsx | 16 +--------------- .../components/Widget/WidgetViewContainer.tsx | 9 --------- 2 files changed, 1 insertion(+), 24 deletions(-) diff --git a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx index 25d1b4645..2d8925137 100644 --- a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx +++ b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx @@ -44,26 +44,12 @@ export const WidgetContainer = styled(Box, { } }) -interface WidgetContainerRowProps extends BoxProps { - alignTop?: boolean -} - -export const WidgetContainerRow = styled(Box, { - shouldForwardProp: (prop) => !['alignTop'].includes(prop as string), -})(() => { +export const WidgetContainerRow = styled(Box)(() => { return { display: 'flex', alignItems: 'center', flexGrow: 1, width: '100%', - variants: [ - { - props: ({ alignTop }) => alignTop, - style: { - alignItems: 'flex-start', - }, - }, - ], } }) diff --git a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx index d0eb36f76..97a281bfa 100644 --- a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx +++ b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx @@ -2,11 +2,9 @@ import MenuOpenIcon from '@mui/icons-material/MenuOpen' import { Box, Tooltip } from '@mui/material' import type { PropsWithChildren } from 'react' import { ExternalWalletProvider } from '../../providers/ExternalWalletProvider/ExternalWalletProvider.js' -import type { Layout } from '../../store/editTools/types.js' import { useDrawerToolValues } from '../../store/editTools/useDrawerToolValues.js' import { useEditToolsActions } from '../../store/editTools/useEditToolsActions.js' import { useHeaderAndFooterToolValues } from '../../store/editTools/useHeaderAndFooterToolValues.js' -import { useLayoutValues } from '../../store/editTools/useLayoutValues.js' import { useConfig } from '../../store/widgetConfig/useConfig.js' import { MockElement } from '../Mock/MockElement.js' import { ToggleDrawerButton } from './ToggleDrawerButton.js' @@ -22,15 +20,12 @@ interface WidgetViewContainerProps extends PropsWithChildren { toggleDrawer?(): void } -const topAlignedLayouts: Layout[] = ['restricted-max-height'] - export function WidgetViewContainer({ children, toggleDrawer, }: WidgetViewContainerProps) { const { config } = useConfig() const { isDrawerOpen, drawerWidth } = useDrawerToolValues() - const { selectedLayoutId } = useLayoutValues() const { setDrawerOpen } = useEditToolsActions() const { showMockHeader, showMockFooter, isFooterFixed } = useHeaderAndFooterToolValues() @@ -86,10 +81,6 @@ export function WidgetViewContainer({ ? { marginBottom: 6 } : undefined } - alignTop={ - config?.theme?.container?.display === 'flex' || - topAlignedLayouts.includes(selectedLayoutId) - } > {children}