From 89284ec5de66b71baae39528e41b3e1186387ddd Mon Sep 17 00:00:00 2001
From: Lizaveta Miasayedava <effie.mias@gmail.com>
Date: Mon, 30 Mar 2026 18:05:10 +0100
Subject: [PATCH 1/3] refactor: remove 'fit-content' height handling from
 playground and simplify height logic

---
 .../LayoutControls/HeightControl.tsx          | 19 +-------
 .../LayoutControls/InputControl.tsx           |  5 +--
 .../LayoutControls/LayoutControl.tsx          | 12 ++---
 .../components/Widget/WidgetViewContainer.tsx |  4 +-
 packages/widget/src/AppLayout.tsx             |  1 +
 .../widget/src/components/AppContainer.tsx    | 45 +++++++++----------
 .../components/Routes/RoutesExpanded.style.ts |  8 +---
 packages/widget/src/themes/createTheme.ts     |  6 +--
 8 files changed, 33 insertions(+), 67 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 abd825837..e08c0b3b7 100644
--- a/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls/HeightControl.tsx
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls/HeightControl.tsx
@@ -5,7 +5,6 @@ import { useConfigActions } from '../../../../store/widgetConfig/useConfigAction
 import {
   CapitalizeFirstLetter,
   ControlRowContainer,
-  PlaygroundControlsContainer,
 } from '../DesignControls.style.js'
 import { InputControl } from './InputControl.js'
 
@@ -27,8 +26,8 @@ export const HeightControl = ({
 }: {
   selectedLayoutId: Layout
   setInitialLayout: (layoutId: Layout) => void
-  heightValue: number | 'fit-content' | undefined
-  setHeightValue: (height: number | 'fit-content' | undefined) => void
+  heightValue: number | undefined
+  setHeightValue: (height: number | undefined) => void
 }) => {
   const { setHeader, setContainer, getCurrentConfigTheme } = useConfigActions()
 
@@ -87,20 +86,6 @@ export const HeightControl = ({
     )
   }
 
-  if (selectedLayoutId === 'default') {
-    return (
-      <PlaygroundControlsContainer sx={{ gap: 0 }}>
-        <InputControl
-          label="Set max height"
-          value={heightValue}
-          onChange={handleHeightChange('maxHeight')}
-          onBlur={handleBlur}
-        />
-        <Caption caption="max height is applied only to long pages" />
-      </PlaygroundControlsContainer>
-    )
-  }
-
   if (selectedLayoutId === 'full-height') {
     return (
       <Caption caption="full height should be used with the compact variant" />
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 caa5b78a2..6ccab9f9d 100644
--- a/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls/InputControl.tsx
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls/InputControl.tsx
@@ -10,7 +10,7 @@ import { CapitalizeFirstLetter, Input } from '../DesignControls.style.js'
 
 interface InputControlProps extends HTMLAttributes<HTMLDivElement> {
   label: string
-  value: number | 'fit-content' | undefined
+  value: number | undefined
   onChange: ChangeEventHandler<HTMLInputElement>
   onBlur: FocusEventHandler<HTMLInputElement>
 }
@@ -22,8 +22,7 @@ export const InputControl = ({
   onBlur,
 }: InputControlProps) => {
   const inputId = useId()
-  const showCaption =
-    !value || value === 'fit-content' || value < defaultMaxHeight
+  const showCaption = !value || value < defaultMaxHeight
   return (
     <CardRowContainer sx={{ padding: 1 }}>
       <CardRowColumn>
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 6aacc405a..13fb222c9 100644
--- a/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls/LayoutControl.tsx
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls/LayoutControl.tsx
@@ -47,8 +47,6 @@ const getLayoutMode = (container?: CSSProperties) => {
 
   if (container.display === 'flex' && container.height === '100%') {
     layoutMode = 'full-height'
-  } else if (container.height === 'fit-content') {
-    layoutMode = 'default'
   } else if (Number.isFinite(container.height)) {
     layoutMode = 'restricted-height'
   } else if (Number.isFinite(container.maxHeight)) {
@@ -68,9 +66,7 @@ export const LayoutControl = () => {
 
   const { selectedLayoutId } = useLayoutValues()
   const { setSelectedLayoutId } = useEditToolsActions()
-  const [heightValue, setHeightValue] = useState<
-    number | 'fit-content' | undefined
-  >() // height or maxHeight, depending on selectedLayoutId
+  const [heightValue, setHeightValue] = useState<number | undefined>() // height or maxHeight, depending on selectedLayoutId
 
   useEffect(() => {
     setSelectedLayoutId(getLayoutMode(config?.theme?.container))
@@ -126,14 +122,14 @@ export const LayoutControl = () => {
           break
         }
         default: {
-          setHeightValue('fit-content')
+          setHeightValue(undefined)
           setHeader()
 
           const defaultContainer = {
             ...(getCurrentConfigTheme()?.container ?? {}),
             display: undefined,
-            height: 'fit-content',
-            maxHeight: defaultMaxHeight,
+            height: undefined,
+            maxHeight: undefined,
           }
 
           setContainer(defaultContainer)
diff --git a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx
index 97a281bfa..c07edc9a2 100644
--- a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx
+++ b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx
@@ -39,9 +39,7 @@ export function WidgetViewContainer({
   const showHeader = isFullHeightLayout && showMockHeader
   const showFooter = isFullHeightLayout && showMockFooter
 
-  const isDefault =
-    !config?.theme?.container?.height ||
-    config?.theme?.container?.height === 'fit-content'
+  const isDefault = !config?.theme?.container?.height
 
   return (
     <Main open={isDrawerOpen} drawerWidth={drawerWidth}>
diff --git a/packages/widget/src/AppLayout.tsx b/packages/widget/src/AppLayout.tsx
index b8602d7a0..048df2b17 100644
--- a/packages/widget/src/AppLayout.tsx
+++ b/packages/widget/src/AppLayout.tsx
@@ -22,6 +22,7 @@ export const AppLayout: React.FC = () => {
     <AppExpandedContainer
       id={createElementId(ElementId.AppExpandedContainer, elementId)}
       data-version={version}
+      wide={wideVariant}
     >
       <AppContainer>
         <Header />
diff --git a/packages/widget/src/components/AppContainer.tsx b/packages/widget/src/components/AppContainer.tsx
index 96dc9363b..981576085 100644
--- a/packages/widget/src/components/AppContainer.tsx
+++ b/packages/widget/src/components/AppContainer.tsx
@@ -16,35 +16,30 @@ import { getWidgetMaxHeight } from '../utils/widgetSize.js'
 //  Also check any code that is using the methods from elements.ts utils file
 
 export const AppExpandedContainer = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'variant',
-})<{ variant?: WidgetVariant }>(({ theme }) => ({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'start',
-  flex: 1,
-  height:
-    theme.container?.display === 'flex'
-      ? '100%'
-      : theme.container?.maxHeight
-        ? 'auto'
-        : theme.container?.height || 'auto',
-  variants: [
-    {
-      props: {
-        variant: 'drawer',
-      },
-      style: {
-        height: 'none',
-      },
-    },
-  ],
-}))
+  shouldForwardProp: (prop) => prop !== 'wide',
+})<{ wide?: boolean }>(({ theme, wide }) => {
+  return {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'start',
+    flex: 1,
+    height:
+      theme.container?.display === 'flex'
+        ? '100%'
+        : theme.container?.maxHeight
+          ? 'auto'
+          : theme.container?.height || 'auto',
+    // In the wide variant, route/chain expansions are absolutely positioned outside the widget bounds.
+    // minHeight ensures widget + expansion are positioned and aligned together.
+    minHeight: wide ? getWidgetMaxHeight(theme) : 'auto',
+  }
+})
 
 export const RelativeContainer = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'variant',
 })<{ variant?: WidgetVariant }>(({ theme }) => {
   const maxHeight =
-    theme.container?.height === 'fit-content'
+    !theme.container?.height || theme.container?.height === 'fit-content'
       ? 'none'
       : getWidgetMaxHeight(theme)
   return {
@@ -89,7 +84,7 @@ const CssBaselineContainer = styled(ScopedCssBaseline, {
     !['variant', 'paddingTopAdjustment', 'elementId'].includes(prop as string),
 })<CssBaselineContainerProps>(({ theme, variant, paddingTopAdjustment }) => {
   const maxHeight =
-    theme.container?.height === 'fit-content'
+    !theme.container?.height || theme.container?.height === 'fit-content'
       ? 'none'
       : getWidgetMaxHeight(theme)
   return {
diff --git a/packages/widget/src/components/Routes/RoutesExpanded.style.ts b/packages/widget/src/components/Routes/RoutesExpanded.style.ts
index f8c95fb4a..6edda64e6 100644
--- a/packages/widget/src/components/Routes/RoutesExpanded.style.ts
+++ b/packages/widget/src/components/Routes/RoutesExpanded.style.ts
@@ -1,6 +1,6 @@
 import type { ScopedCssBaselineProps } from '@mui/material'
 import { Box, ScopedCssBaseline, styled } from '@mui/material'
-import { defaultMaxHeight } from '../../config/constants.js'
+import { getWidgetMaxHeight } from '../../utils/widgetSize.js'
 
 export const routesExpansionWidth = '436px'
 
@@ -11,10 +11,6 @@ interface ContainerProps extends ScopedCssBaselineProps {
 export const Container = styled(ScopedCssBaseline, {
   shouldForwardProp: (prop) => !['minimumHeight'].includes(prop as string),
 })<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,
@@ -25,7 +21,7 @@ export const Container = styled(ScopedCssBaseline, {
     whiteSpace: 'normal',
     ...(theme.container?.display !== 'flex'
       ? {
-          maxHeight: theme.container?.maxHeight ?? fallbackMaxHeight,
+          maxHeight: getWidgetMaxHeight(theme),
           ...(minimumHeight ? { '&': { height: 'auto' } } : {}),
         }
       : { height: minimumHeight ? 'auto' : '100%' }),
diff --git a/packages/widget/src/themes/createTheme.ts b/packages/widget/src/themes/createTheme.ts
index cc7f80655..cd85d49f3 100644
--- a/packages/widget/src/themes/createTheme.ts
+++ b/packages/widget/src/themes/createTheme.ts
@@ -117,11 +117,7 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
         },
       },
     },
-    container: {
-      // Set height to 'fit-content' if not explicitly set
-      height: 'fit-content',
-      ...widgetTheme.container,
-    },
+    container: widgetTheme.container,
     routesContainer: widgetTheme.routesContainer,
     chainSidebarContainer: widgetTheme.chainSidebarContainer,
     header: widgetTheme.header,

From b9d9d918262f82890b659a571014ce8ecfd946fb Mon Sep 17 00:00:00 2001
From: Lizaveta Miasayedava <effie.mias@gmail.com>
Date: Tue, 31 Mar 2026 09:57:59 +0100
Subject: [PATCH 2/3] feat(widget): add alignTop prop to WidgetContainerRow for
 flexible alignment

---
 .../src/components/Widget/WidgetView.style.tsx   | 16 +++++++++++++++-
 .../components/Widget/WidgetViewContainer.tsx    |  9 +++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx
index 2d8925137..25d1b4645 100644
--- a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx
+++ b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx
@@ -44,12 +44,26 @@ export const WidgetContainer = styled(Box, {
   }
 })
 
-export const WidgetContainerRow = styled(Box)(() => {
+interface WidgetContainerRowProps extends BoxProps {
+  alignTop?: boolean
+}
+
+export const WidgetContainerRow = styled(Box, {
+  shouldForwardProp: (prop) => !['alignTop'].includes(prop as string),
+})<WidgetContainerRowProps>(() => {
   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 c07edc9a2..5f13e3a87 100644
--- a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx
+++ b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx
@@ -2,9 +2,11 @@ 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'
@@ -20,12 +22,15 @@ 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()
@@ -79,6 +84,10 @@ export function WidgetViewContainer({
                 ? { marginBottom: 6 }
                 : undefined
             }
+            alignTop={
+              config?.theme?.container?.display === 'flex' ||
+              topAlignedLayouts.includes(selectedLayoutId)
+            }
           >
             {children}
           </WidgetContainerRow>

From 72b9cd3977bbee2362513674f0ba27e3c09fe53c Mon Sep 17 00:00:00 2001
From: Lizaveta Miasayedava <effie.mias@gmail.com>
Date: Wed, 1 Apr 2026 09:37:40 +0100
Subject: [PATCH 3/3] refactor: update height control logic

---
 .../LayoutControls/HeightControl.tsx          | 41 +++++++++++++++----
 .../components/Widget/WidgetView.style.tsx    | 20 ++-------
 .../components/Widget/WidgetViewContainer.tsx | 24 ++---------
 packages/widget/src/AppLayout.tsx             |  1 -
 .../widget/src/components/AppContainer.tsx    | 13 +++---
 5 files changed, 45 insertions(+), 54 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 e08c0b3b7..56ffec004 100644
--- a/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls/HeightControl.tsx
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls/HeightControl.tsx
@@ -1,7 +1,10 @@
 import { defaultMaxHeight } from '@lifi/widget'
-import { type FocusEventHandler, useCallback } from 'react'
+import { type FocusEventHandler, type SyntheticEvent, useCallback } from 'react'
 import type { Layout } from '../../../../store/editTools/types.js'
+import { useConfig } from '../../../../store/widgetConfig/useConfig.js'
 import { useConfigActions } from '../../../../store/widgetConfig/useConfigActions.js'
+import { CardRowContainer } from '../../../Card/Card.style.js'
+import { Switch } from '../../../Switch.js'
 import {
   CapitalizeFirstLetter,
   ControlRowContainer,
@@ -29,8 +32,22 @@ export const HeightControl = ({
   heightValue: number | undefined
   setHeightValue: (height: number | undefined) => void
 }) => {
+  const { config } = useConfig()
   const { setHeader, setContainer, getCurrentConfigTheme } = useConfigActions()
 
+  const applyOnlyToLongLists =
+    config?.theme?.container?.height === 'fit-content'
+
+  const handleApplyOnlyToLongListsChange = useCallback(
+    (_: SyntheticEvent, value: boolean) => {
+      setContainer({
+        ...(getCurrentConfigTheme()?.container ?? {}),
+        height: value ? 'fit-content' : undefined,
+      })
+    },
+    [getCurrentConfigTheme, setContainer]
+  )
+
   const handleHeightChange = useCallback(
     (key: 'height' | 'maxHeight') =>
       (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -77,12 +94,22 @@ export const HeightControl = ({
 
   if (selectedLayoutId === 'restricted-max-height') {
     return (
-      <InputControl
-        label="Set max height"
-        value={heightValue}
-        onChange={handleHeightChange('maxHeight')}
-        onBlur={handleBlur}
-      />
+      <>
+        <InputControl
+          label="Set max height"
+          value={heightValue}
+          onChange={handleHeightChange('maxHeight')}
+          onBlur={handleBlur}
+        />
+        <CardRowContainer sx={{ padding: 1 }}>
+          Apply only to pages with long lists
+          <Switch
+            checked={applyOnlyToLongLists}
+            onChange={handleApplyOnlyToLongListsChange}
+            aria-label="Apply only to pages with long lists"
+          />
+        </CardRowContainer>
+      </>
     )
   }
 
diff --git a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx
index 25d1b4645..ca010474a 100644
--- a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx
+++ b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx
@@ -26,7 +26,7 @@ export const WidgetContainer = styled(Box, {
     justifyContent: 'center',
     alignItems: 'center',
     flexDirection: 'column',
-    paddingTop: theme.spacing(6),
+    paddingTop: theme.spacing(14),
     variants: [
       {
         props: ({ alignTop }) => alignTop,
@@ -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),
-})<WidgetContainerRowProps>(() => {
+export const WidgetContainerRow = styled(Box)(() => {
   return {
     display: 'flex',
-    alignItems: 'center',
+    alignItems: 'flex-start',
     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 5f13e3a87..131d46266 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[] = ['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,8 +39,6 @@ export function WidgetViewContainer({
   const showHeader = isFullHeightLayout && showMockHeader
   const showFooter = isFullHeightLayout && showMockFooter
 
-  const isDefault = !config?.theme?.container?.height
-
   return (
     <Main open={isDrawerOpen} drawerWidth={drawerWidth}>
       <ExternalWalletProvider isExternalProvider={isWalletManagementExternal}>
@@ -67,11 +60,8 @@ export function WidgetViewContainer({
           ) : null}
         </FloatingToolsContainer>
         <WidgetContainer
-          removePaddingTop={
-            (config?.theme?.container?.height === '100%' && !showHeader) ||
-            (config?.theme?.container?.display === 'flex' && !showHeader)
-          }
-          alignTop={config?.theme?.container?.display === 'flex'}
+          removePaddingTop={isFullHeightLayout && !showHeader}
+          alignTop={isFullHeightLayout}
         >
           {showHeader ? (
             <MockElement sx={{ position: 'fixed', zIndex: 1, top: 0 }}>
@@ -79,15 +69,7 @@ export function WidgetViewContainer({
             </MockElement>
           ) : null}
           <WidgetContainerRow
-            sx={
-              (isFullHeightLayout && isFooterFixed) || isDefault
-                ? { marginBottom: 6 }
-                : undefined
-            }
-            alignTop={
-              config?.theme?.container?.display === 'flex' ||
-              topAlignedLayouts.includes(selectedLayoutId)
-            }
+            sx={{ marginBottom: !isFullHeightLayout || isFooterFixed ? 6 : 0 }}
           >
             {children}
           </WidgetContainerRow>
diff --git a/packages/widget/src/AppLayout.tsx b/packages/widget/src/AppLayout.tsx
index 048df2b17..b8602d7a0 100644
--- a/packages/widget/src/AppLayout.tsx
+++ b/packages/widget/src/AppLayout.tsx
@@ -22,7 +22,6 @@ export const AppLayout: React.FC = () => {
     <AppExpandedContainer
       id={createElementId(ElementId.AppExpandedContainer, elementId)}
       data-version={version}
-      wide={wideVariant}
     >
       <AppContainer>
         <Header />
diff --git a/packages/widget/src/components/AppContainer.tsx b/packages/widget/src/components/AppContainer.tsx
index 981576085..33a8b5375 100644
--- a/packages/widget/src/components/AppContainer.tsx
+++ b/packages/widget/src/components/AppContainer.tsx
@@ -15,9 +15,7 @@ import { getWidgetMaxHeight } from '../utils/widgetSize.js'
 //    - useSetContentHeight
 //  Also check any code that is using the methods from elements.ts utils file
 
-export const AppExpandedContainer = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'wide',
-})<{ wide?: boolean }>(({ theme, wide }) => {
+export const AppExpandedContainer = styled(Box)(({ theme }) => {
   return {
     display: 'flex',
     justifyContent: 'center',
@@ -29,9 +27,6 @@ export const AppExpandedContainer = styled(Box, {
         : theme.container?.maxHeight
           ? 'auto'
           : theme.container?.height || 'auto',
-    // In the wide variant, route/chain expansions are absolutely positioned outside the widget bounds.
-    // minHeight ensures widget + expansion are positioned and aligned together.
-    minHeight: wide ? getWidgetMaxHeight(theme) : 'auto',
   }
 })
 
@@ -39,7 +34,8 @@ export const RelativeContainer = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'variant',
 })<{ variant?: WidgetVariant }>(({ theme }) => {
   const maxHeight =
-    !theme.container?.height || theme.container?.height === 'fit-content'
+    theme.container?.height === 'fit-content' ||
+    (!theme.container?.height && !theme.container?.maxHeight)
       ? 'none'
       : getWidgetMaxHeight(theme)
   return {
@@ -84,7 +80,8 @@ const CssBaselineContainer = styled(ScopedCssBaseline, {
     !['variant', 'paddingTopAdjustment', 'elementId'].includes(prop as string),
 })<CssBaselineContainerProps>(({ theme, variant, paddingTopAdjustment }) => {
   const maxHeight =
-    !theme.container?.height || theme.container?.height === 'fit-content'
+    theme.container?.height === 'fit-content' ||
+    (!theme.container?.height && !theme.container?.maxHeight)
       ? 'none'
       : getWidgetMaxHeight(theme)
   return {