WEB-65 add padding to empty containers (#89)

wlenig · web-flow · commit 412582c0f24b · 2026-03-15T22:20:47.000-04:00
Add padding to empty containers, making it easier to bring content into them New: <img width="896" height="687" alt="Screenshot 2026-03-15 at 10 00 46 PM" src="https://github.com/user-attachments/assets/d2037b57-e53c-44ab-b51c-ce7fb5e28bd7" /> Old: <img width="908" height="688" alt="Screenshot 2026-03-15 at 10 00 28 PM" src="https://github.com/user-attachments/assets/d72b7e63-2535-4a31-aef7-307721142d01" />
diff --git a/src/components/puck/Container.tsx b/src/components/puck/Container.tsx
@@ -14,7 +14,7 @@ export const Container: React.FC<ContainerProps> = ({
     gap = "",
     outline = "",
 }) => (
-  Content && <Content className={`flex flex-col w-full ${padding} ${gap} ${outline}`} />
+  Content && <Content minEmptyHeight="256px" className={`flex flex-col w-full ${padding} ${gap} ${outline}`} />
 )
 
 export const ContainerConfig: ComponentConfig<ContainerProps> = {

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ export const Container: React.FC<ContainerProps> = ({`
`14`	`14`	`gap = "",`
`15`	`15`	`outline = "",`
`16`	`16`	`}) => (`
`17`		- Content && <Content className={`flex flex-col w-full ${padding} ${gap} ${outline}`} />
	`17`	+ Content && <Content minEmptyHeight="256px" className={`flex flex-col w-full ${padding} ${gap} ${outline}`} />
`18`	`18`	`)`
`19`	`19`
`20`	`20`	`export const ContainerConfig: ComponentConfig<ContainerProps> = {`