diff --git a/frontend/src/lib/components/apps/components/display/AppText.svelte b/frontend/src/lib/components/apps/components/display/AppText.svelte
index c0b4d2c297..1b715ee069 100644
--- a/frontend/src/lib/components/apps/components/display/AppText.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppText.svelte
@@ -27,6 +27,7 @@
 	let result: string | undefined = undefined
 	let style: 'Title' | 'Subtitle' | 'Body' | 'Caption' | 'Label' | undefined = undefined
 	let copyButton: boolean
+	let fitContent = false
 
 	function getComponent() {
 		switch (style) {
@@ -64,9 +65,10 @@
 
 <InputValue {id} input={configuration.style} bind:value={style} />
 <InputValue {id} input={configuration.copyButton} bind:value={copyButton} />
+<InputValue {id} input={configuration.fitContent} bind:value={fitContent} />
 
 <RunnableWrapper flexWrap {componentInput} {id} bind:initializing bind:result>
-	<ResizeWrapper {id}>
+	<ResizeWrapper {id} shouldWrap={fitContent}>
 		<AlignWrapper {horizontalAlignment} {verticalAlignment}>
 			{#if !result || result === ''}
 				<div class="text-gray-400 bg-gray-100 flex justify-center items-center h-full w-full">
diff --git a/frontend/src/lib/components/apps/components/helpers/ResizeWrapper.svelte b/frontend/src/lib/components/apps/components/helpers/ResizeWrapper.svelte
index 78d552b9ad..b55d868f5b 100644
--- a/frontend/src/lib/components/apps/components/helpers/ResizeWrapper.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/ResizeWrapper.svelte
@@ -2,38 +2,31 @@
 	import { getContext } from 'svelte'
 	import { findGridItem } from '../../editor/appUtils'
 	import type { AppEditorContext } from '../../types'
-	import gridHelp from '@windmill-labs/svelte-grid/src/utils/helper'
 
 	export let id: string
-
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	export let shouldWrap: boolean = false
+	const { app, breakpoint } = getContext<AppEditorContext>('AppEditorContext')
 
 	$: gridItem = findGridItem($app, id)
 
 	let wrapper: HTMLElement
 
 	$: {
-		if (wrapper && gridItem) {
+		if (wrapper && gridItem && shouldWrap) {
 			const wrapperHeight = wrapper.getBoundingClientRect().height
-			const parentHeight = wrapper.parentElement?.getBoundingClientRect().height
-
-			console.log(wrapperHeight, parentHeight)
-
-			if (parentHeight && wrapperHeight > parentHeight) {
-				gridItem[12].h = Math.ceil(wrapperHeight / 36)
-
-				gridItem = gridItem
-			}
-
-			if (parentHeight && wrapperHeight < parentHeight) {
-				gridItem[12].h = Math.floor(parentHeight / 36)
-
-				gridItem = gridItem
-			}
+			const width = $breakpoint === 'sm' ? 3 : 12
+			gridItem[width].h = Math.ceil(wrapperHeight / 36)
+			gridItem = gridItem
 		}
 	}
+
+	$: console.log(shouldWrap)
 </script>
 
-<div bind:this={wrapper}>
+{#if shouldWrap}
+	<div bind:this={wrapper}>
+		<slot />
+	</div>
+{:else}
 	<slot />
-</div>
+{/if}
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index f47163c911..c612b37835 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -228,6 +228,12 @@ export const components: Record<AppComponent['type'], AppComponentConfig> = {
 					value: false,
 					fieldType: 'boolean',
 					onlyStatic: true
+				},
+				fitContent: {
+					type: 'static',
+					value: false,
+					fieldType: 'boolean',
+					onlyStatic: true
 				}
 			},
 			customCss: {
@@ -912,9 +918,7 @@ Hello \${ctx.username}
 					type: 'static',
 					fieldType: 'array',
 					subFieldType: 'text',
-					value: [
-						"Foo", "Bar"
-					]
+					value: ['Foo', 'Bar']
 				},
 				placeholder: {
 					type: 'static',