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): cap auto font size, center text vertically, fix sidebar truncation

Browse Source 
- Auto font size now capped at min(200, boxHeight/2, boxWidth/3) to prevent
  oversized text on server render
- Text vertically centered within each text box
- Sidebar color labels shortened (Text/Stroke) with min-w-0 to prevent overflow
This commit is contained in:
SnapOtter
2026-05-08 17:42:04 +08:00
parent 66dfad8122
commit 0c1980c6db
2 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/tools/meme-generator-settings.tsx
+11 -11
View File
@@ -163,46 +163,46 @@ function EditorSettings() {
</div>
{/* Colors */}
<div className="flex gap-3">
<div className="flex-1">
<div className="flex gap-2">
<div className="flex-1 min-w-0">
<label htmlFor="text-color" className="text-xs text-muted-foreground block mb-0.5">
Text Color
Text
</label>
<div className="flex items-center gap-1.5">
<div className="flex items-center gap-1">
<input
id="text-color"
data-testid="text-color"
type="color"
value={textColor}
onChange={(e) => setTextColor(e.target.value)}
className="w-8 h-8 rounded border border-border shrink-0 cursor-pointer"
className="w-7 h-7 rounded border border-border shrink-0 cursor-pointer"
/>
<input
type="text"
value={textColor}
onChange={(e) => setTextColor(e.target.value)}
className="flex-1 px-1.5 py-1 rounded border border-border bg-background text-xs text-foreground font-mono"
className="flex-1 min-w-0 px-1 py-1 rounded border border-border bg-background text-[11px] text-foreground font-mono"
/>
</div>
</div>
<div className="flex-1">
<div className="flex-1 min-w-0">
<label htmlFor="stroke-color" className="text-xs text-muted-foreground block mb-0.5">
Stroke Color
Stroke
</label>
<div className="flex items-center gap-1.5">
<div className="flex items-center gap-1">
<input
id="stroke-color"
data-testid="stroke-color"
type="color"
value={strokeColor}
onChange={(e) => setStrokeColor(e.target.value)}
className="w-8 h-8 rounded border border-border shrink-0 cursor-pointer"
className="w-7 h-7 rounded border border-border shrink-0 cursor-pointer"
/>
<input
type="text"
value={strokeColor}
onChange={(e) => setStrokeColor(e.target.value)}
className="flex-1 px-1.5 py-1 rounded border border-border bg-background text-xs text-foreground font-mono"
className="flex-1 min-w-0 px-1 py-1 rounded border border-border bg-background text-[11px] text-foreground font-mono"
/>
</div>
</div>