feat: set 'fit-content' height config by default

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 (
       <PlaygroundControlsContainer sx={{ gap: 0 }}>
         <InputControl

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 | undefined
+  value: number | 'fit-content' | undefined
   onChange: ChangeEventHandler<HTMLInputElement>
   onBlur: FocusEventHandler<HTMLInputElement>
 }
@@ -22,11 +22,13 @@ export const InputControl = ({
   onBlur,
 }: InputControlProps) => {
   const inputId = useId()
+  const showCaption =
+    !value || value === 'fit-content' || value < defaultMaxHeight
   return (
     <CardRowContainer sx={{ padding: 1 }}>
       <CardRowColumn>
         <label htmlFor={inputId}>{label}</label>
-        {(value && value < defaultMaxHeight) || !value ? (
+        {showCaption ? (
           <CapitalizeFirstLetter variant="caption">
             {`${defaultMaxHeight}px minimum`}
           </CapitalizeFirstLetter>

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<number | undefined>() // 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)

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,

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

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,