From 0ab08d2f09d771fc4bceb0ce72b28d93bfdaa8c6 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 13 Nov 2025 13:07:47 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20Compact=20Variables=20Dropdown=20&=20Sc?=
 =?UTF-8?q?rollable=20Editor!=20=F0=9F=93=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 1. Variables as Dropdown (Not Flex)
**Problem:** Flex variables take too much space, cramping editor
**Solution:**
- Replaced flex buttons with Select dropdown
- Compact single-line layout
- More space for actual editing
- Better UX for many variables

**Before:**
```
Available Variables:
[var1] [var2] [var3] [var4] [var5]
[var6] [var7] [var8] [var9] [var10]
```

**After:**
```
Insert Variable: [Choose a variable... ▼]
```

## 2. Scrollable Editor Content
**Problem:** Long content pushes everything off screen
**Solution:**
- Wrapped EditorContent in scrollable div
- max-h-[400px] min-h-[200px]
- Editor stays within bounds
- Toolbar and variables always visible

**File:**
- `components/ui/rich-text-editor.tsx`

Ready for #3: Email global customization!
---
 .../src/components/ui/rich-text-editor.tsx    | 38 ++++++++++---------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/admin-spa/src/components/ui/rich-text-editor.tsx b/admin-spa/src/components/ui/rich-text-editor.tsx
index 0eff6f1..cb7ff59 100644
--- a/admin-spa/src/components/ui/rich-text-editor.tsx
+++ b/admin-spa/src/components/ui/rich-text-editor.tsx
@@ -292,27 +292,29 @@ export function RichTextEditor({
       </div>
 
       {/* Editor */}
-      <EditorContent editor={editor} />
+      <div className="overflow-y-auto max-h-[400px] min-h-[200px]">
+        <EditorContent editor={editor} />
+      </div>
 
-      {/* Variables */}
+      {/* Variables Dropdown */}
       {variables.length > 0 && (
         <div className="border-t bg-muted/30 p-3">
-          <div className="text-xs text-muted-foreground mb-2">
-            {__('Available Variables:')}
-          </div>
-          <div className="flex flex-wrap gap-1">
-            {variables.map((variable) => (
-              <Button
-                key={variable}
-                type="button"
-                variant="outline"
-                size="sm"
-                onClick={() => insertVariable(variable)}
-                className="!font-normal !text-xs !px-2"
-              >
-                {`{${variable}}`}
-              </Button>
-            ))}
+          <div className="flex items-center gap-2">
+            <Label htmlFor="variable-select" className="text-xs text-muted-foreground whitespace-nowrap">
+              {__('Insert Variable:')}
+            </Label>
+            <Select onValueChange={(value) => insertVariable(value)}>
+              <SelectTrigger id="variable-select" className="h-8 text-xs">
+                <SelectValue placeholder={__('Choose a variable...')} />
+              </SelectTrigger>
+              <SelectContent>
+                {variables.map((variable) => (
+                  <SelectItem key={variable} value={variable} className="text-xs">
+                    {`{${variable}}`}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
         </div>
       )}