fix: restrict maxHeight for routes expansion

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 }) => ({
@@ -46,32 +44,12 @@ 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),
-})<WidgetContainerRowProps>(({ widgetContainer }) => {
+export const WidgetContainerRow = styled(Box)(() => {
   return {
     display: 'flex',
     alignItems: 'center',
     flexGrow: 1,
     width: '100%',
-    maxHeight:
-      widgetContainer?.maxHeight || !widgetContainer?.height
-        ? (widgetContainer?.maxHeight ?? defaultMaxHeight)
-        : 'none',
-    variants: [
-      {
-        props: ({ alignTop }) => alignTop,
-        style: {
-          alignItems: 'flex-start',
-        },
-      },
-    ],
   }
 })
 

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[] = ['default', '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()
@@ -44,6 +39,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 (
     <Main open={isDrawerOpen} drawerWidth={drawerWidth}>
       <ExternalWalletProvider isExternalProvider={isWalletManagementExternal}>
@@ -78,15 +77,10 @@ export function WidgetViewContainer({
           ) : null}
           <WidgetContainerRow
             sx={
-              isFullHeightLayout && isFooterFixed
+              (isFullHeightLayout && isFooterFixed) || isDefault
                 ? { marginBottom: 6 }
                 : undefined
             }
-            alignTop={
-              config?.theme?.container?.display === 'flex' ||
-              topAlignedLayouts.includes(selectedLayoutId)
-            }
-            widgetContainer={config?.theme?.container}
           >
             {children}
           </WidgetContainerRow>

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),
-})<ContainerProps>(({ 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,
-}))
+})<ContainerProps>(({ 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,