External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(meme-generator): fix preview collapse from inline-block + container query

Browse Source 
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.
This commit is contained in:
SnapOtter
2026-05-08 17:38:12 +08:00
parent 1569cc26f2
commit 66dfad8122
1 changed files with 2 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/tools/meme-generator-preview.tsx
+2 -3
View File
@@ -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