From 66dfad81228491b042e6efe286e3f6fdd153b57c Mon Sep 17 00:00:00 2001
From: SnapOtter <snapotter.hq@gmail.com>
Date: Fri, 8 May 2026 17:38:12 +0800
Subject: [PATCH] fix(meme-generator): fix preview collapse from inline-block +
 container query

The containerType: inline-size CSS containment prevented the image from
expanding its parent container, causing the preview to render at 0x0px.
Removed inline-block and containerType, switched font sizing to vw units.
---
 apps/web/src/components/tools/meme-generator-preview.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/tools/meme-generator-preview.tsx b/apps/web/src/components/tools/meme-generator-preview.tsx
index f21e5bdd..1703564c 100644
--- a/apps/web/src/components/tools/meme-generator-preview.tsx
+++ b/apps/web/src/components/tools/meme-generator-preview.tsx
@@ -53,7 +53,7 @@ function TextPreviewOverlay({
         const value = textValues.find((v) => v.id === box.id);
         const text = value?.text || box.defaultText || "";
         const displayText = allCaps ? text.toUpperCase() : text;
-        const autoSize = `clamp(10px, ${box.height * 0.45}cqi, 60px)`;
+        const autoSize = `clamp(10px, ${box.height * 0.35}vw, 60px)`;
         const appliedSize = fontSize > 0 ? `${fontSize}px` : autoSize;
 
         return (
@@ -347,8 +347,7 @@ function EditorPreview() {
       <div className="max-w-2xl w-full">
         <div
           data-testid="meme-editor-preview"
-          className="relative inline-block w-full rounded-lg overflow-hidden border border-border bg-muted/30"
-          style={{ containerType: "inline-size" }}
+          className="relative w-full rounded-lg overflow-hidden border border-border bg-muted/30"
         >
           <img src={imageSrc} alt="Template preview" className="w-full h-auto block" />
           <TextPreviewOverlay