refactor: handle 'fit-content' layout via restricted max height

packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls/HeightControl.tsx

@@ -1,11 +1,13 @@
 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,
-  PlaygroundControlsContainer,
 } from '../DesignControls.style.js'
 import { InputControl } from './InputControl.js'
 
@@ -27,11 +29,25 @@ 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 { 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>) => {
@@ -78,26 +94,22 @@ export const HeightControl = ({
 
   if (selectedLayoutId === 'restricted-max-height') {
     return (
-      <InputControl
-        label="Set max height"
-        value={heightValue}
-        onChange={handleHeightChange('maxHeight')}
-        onBlur={handleBlur}
-      />
-    )
-  }
-
-  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>
+        <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>
+      </>
     )
   }
 

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>

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)

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,
@@ -47,7 +47,7 @@ export const WidgetContainer = styled(Box, {
 export const WidgetContainerRow = styled(Box)(() => {
   return {
     display: 'flex',
-    alignItems: 'center',
+    alignItems: 'flex-start',
     flexGrow: 1,
     width: '100%',
   }

packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx

@@ -39,10 +39,6 @@ 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}>
@@ -64,23 +60,16 @@ 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 }}>
               Mock header
             </MockElement>
           ) : null}
           <WidgetContainerRow
-            sx={
-              (isFullHeightLayout && isFooterFixed) || isDefault
-                ? { marginBottom: 6 }
-                : undefined
-            }
+            sx={{ marginBottom: !isFullHeightLayout || isFooterFixed ? 6 : 0 }}
           >
             {children}
           </WidgetContainerRow>

packages/widget/src/components/AppContainer.tsx

@@ -15,36 +15,27 @@ 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 !== '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',
-      },
-    },
-  ],
-}))
+export const AppExpandedContainer = styled(Box)(({ theme }) => {
+  return {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'start',
+    flex: 1,
+    height:
+      theme.container?.display === 'flex'
+        ? '100%'
+        : theme.container?.maxHeight
+          ? 'auto'
+          : theme.container?.height || 'auto',
+  }
+})
 
 export const RelativeContainer = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'variant',
 })<{ variant?: WidgetVariant }>(({ theme }) => {
   const maxHeight =
-    theme.container?.height === 'fit-content'
+    theme.container?.height === 'fit-content' ||
+    (!theme.container?.height && !theme.container?.maxHeight)
       ? 'none'
       : getWidgetMaxHeight(theme)
   return {
@@ -89,7 +80,8 @@ 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 === 'fit-content' ||
+    (!theme.container?.height && !theme.container?.maxHeight)
       ? 'none'
       : getWidgetMaxHeight(theme)
   return {

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%' }),

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,