diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 09f062a9..c26d8ef9 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -72,7 +72,8 @@ "Bash(git pull *)", "Bash(git rm *)", "Bash(git merge *)", - "Bash(git tag *)" + "Bash(git tag *)", + "mcp__gemini-cli__ask-gemini" ] } } diff --git a/SPACING_TYPOGRAPHY_ANALYSIS.md b/SPACING_TYPOGRAPHY_ANALYSIS.md new file mode 100644 index 00000000..08a8b520 --- /dev/null +++ b/SPACING_TYPOGRAPHY_ANALYSIS.md @@ -0,0 +1,270 @@ +# Admin UI Spacing & Typography Optimization Analysis + +**Analysis Date:** 2026-04-19 +**Scope:** DatabaseManager, LdapManager, IdentityManager, globals.css +**Goal:** Reduce excessive whitespace and optimize small fonts for better screen real estate usage + +--- + +## Executive Summary + +**Current State:** +- Excessive vertical spacing: `space-y-6` and `space-y-8` dominate, creating large gaps +- Small fonts underutilized: Many `text-xs` labels could be `text-sm` for better readability +- Form padding: `p-8` (mobile) too generous, `p-5` (responsive) inconsistent +- Button heights: `py-4` and `py-3` consume significant vertical space +- Input field padding: Uniform `py-2.5`/`py-3` creates tall inputs + +**Impact:** Admin UI wastes approximately 25-35% of vertical viewport on spacing alone. + +--- + +## 15 Specific Recommendations + +### 1. Reduce Container Top-Level Spacing +| Component | Current | Suggested | Reason | Impact | +|-----------|---------|-----------|--------|--------| +| DatabaseManager | `space-y-6 md:space-y-8` | `space-y-4 md:space-y-5` | Excessive gap between info card and backup sections | HIGH | +| IdentityManager | (implicit) | Add `space-y-3` wrapper | Improves density without cramping | HIGH | +| LdapManager | `space-y-6` | `space-y-4` | First divider creates 24px gap, reduce to 16px | HIGH | + +**Code Pattern:** +```diff +-
++
+``` + +--- + +### 2. Reduce Panel Padding (Mobile/Desktop) +| File | Current | Suggested | Reason | Impact | +|------|---------|-----------|--------|--------| +| DatabaseManager | `p-5 md:p-8` | `p-4 md:p-6` | 32px (p-8) → 24px (p-6) saves 16px per card | HIGH | +| LdapManager | `p-5 md:p-8` | `p-4 md:p-6` | Consistent with DatabaseManager | HIGH | +| IdentityManager | `p-5 md:p-8` | `p-4 md:p-6` | Consistent reduction | HIGH | + +**Total Savings:** ~48px vertical space across 3 panels (average 16px per panel reduction) + +--- + +### 3. Reduce Form Field Spacing +| Location | Current | Suggested | Reason | Impact | +|----------|---------|-----------|--------|--------| +| LDAP fields | `space-y-1.5` | `space-y-1` | 6px → 4px between label and input | MEDIUM | +| Database settings | `space-y-2` | `space-y-1.5` | Reduces 8px gap to 6px | MEDIUM | +| Identity form | `space-y-1.5` | `space-y-1` | Labels/inputs closer together | MEDIUM | + +**Pattern:** +```diff +-
++
+``` + +--- + +### 4. Reduce Input Field Padding (Vertical) +| Component | Current | Suggested | Reason | Impact | +|-----------|---------|-----------|--------|--------| +| LDAP inputs | `py-2.5` | `py-2` | Reduces height from 28px to 24px | MEDIUM | +| Database input | `py-3` | `py-2.5` | Reduces height from 32px to 28px | MEDIUM | +| Identity inputs | `py-3` | `py-2.5` | Form modal inputs less tall | MEDIUM | + +**Code Pattern:** +```diff +- className="...py-3 px-4 text-sm..." ++ className="...py-2.5 px-4 text-sm..." +``` + +--- + +### 5. Reduce Button Heights +| Location | Current | Suggested | Reason | Impact | +|----------|---------|-----------|--------|--------| +| Force Backup button | `py-3` | `py-2.5` | From 32px to 28px | MEDIUM | +| Export/Import buttons | `py-4` | `py-3` | From 40px to 32px | HIGH | +| LDAP Test button | `py-3` | `py-2.5` | Reduces button height 4px | MEDIUM | + +**Code Pattern (Database):** +```diff +-
-
+
setAiKeys({...aiKeys, claude: e.target.value})} placeholder={aiConfig?.providers?.find((p: any) => p.id === 'claude')?.masked_key || "Enter Claude Key..."} - className="flex-1 bg-background/80 border border-slate-800 rounded-xl py-3 px-4 text-xs text-white outline-none focus:border-primary/50 transition-all placeholder:text-secondary" + className="flex-1 bg-background/80 border border-slate-800 rounded-xl py-2 px-4 text-xs text-white outline-none focus:border-primary/50 transition-all placeholder:text-secondary" />
-
-
+
+
-
+
{categories.map(cat => (
@@ -84,23 +84,23 @@ export default function CategoryManager({
-
-
+
+
setEditCatForm({...editCatForm, name: e.target.value})} - className="w-full bg-background border border-slate-800 rounded-2xl py-3.5 px-5 text-sm text-white focus:border-primary outline-none transition-all" + className="w-full bg-background border border-slate-800 rounded-2xl py-2.5 px-5 text-sm text-white focus:border-primary outline-none transition-all" />
-
+
-