feat: Compact Variables Dropdown & Scrollable Editor! 📦

## 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!

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">
+          <div className="flex items-center gap-2">
-            {__('Available Variables:')}
+            <Label htmlFor="variable-select" className="text-xs text-muted-foreground whitespace-nowrap">
-          </div>
+              {__('Insert Variable:')}
-          <div className="flex flex-wrap gap-1">
+            </Label>
-            {variables.map((variable) => (
+            <Select onValueChange={(value) => insertVariable(value)}>
-              <Button
+              <SelectTrigger id="variable-select" className="h-8 text-xs">
-                key={variable}
+                <SelectValue placeholder={__('Choose a variable...')} />
-                type="button"
+              </SelectTrigger>
-                variant="outline"
+              <SelectContent>
-                size="sm"
+                {variables.map((variable) => (
-                onClick={() => insertVariable(variable)}
+                  <SelectItem key={variable} value={variable} className="text-xs">
-                className="!font-normal !text-xs !px-2"
+                    {`{${variable}}`}
-              >
+                  </SelectItem>
-                {`{${variable}}`}
+                ))}
-              </Button>
+              </SelectContent>
-            ))}
+            </Select>
           </div>
         </div>
       )}