From d1eb0a99399ef1d084fed441ea97b6fd89b7db22 Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Fri, 13 Feb 2026 13:33:21 -0500
Subject: [PATCH] fix: Keep color preview at top, bottom-align info and button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Color preview stays at top of card
- Add flex-1 spacer between preview and info
- Title, description, tags, and button are bottom-aligned
- Perfect visual hierarchy and balance

Layout now:
┌─────────────────────┐
│ [color preview]     │ ← Top
│                     │ ← Flexible space
│ Theme Name          │ ← Bottom-aligned
│ Description         │
│ by Author           │
│ [tags]              │
│ [apply button]      │
└─────────────────────┘

Colors prominent at top, info compact at bottom!
---
 .../ThemeSelector/PresetGallery.tsx           | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/ui/desktop/src/components/settings/app/ThemeColorEditor/ThemeSelector/PresetGallery.tsx b/ui/desktop/src/components/settings/app/ThemeColorEditor/ThemeSelector/PresetGallery.tsx
index 713c76c6b8..bff9ab68ea 100644
--- a/ui/desktop/src/components/settings/app/ThemeColorEditor/ThemeSelector/PresetGallery.tsx
+++ b/ui/desktop/src/components/settings/app/ThemeColorEditor/ThemeSelector/PresetGallery.tsx
@@ -132,11 +132,27 @@ export function PresetGallery({ onApply }: PresetGalleryProps) {
               key={preset.id}
               className="border border-border-primary rounded-lg p-4 flex flex-col hover:border-border-secondary transition-colors"
             >
-              {/* Spacer to push content to bottom */}
+              {/* Theme Preview Colors - Top of card */}
+              <div className="grid grid-cols-4 h-24 rounded border border-border-primary overflow-hidden">
+                <div 
+                  style={{ backgroundColor: preset.colors[resolvedTheme]['color-background-primary'] }}
+                />
+                <div 
+                  style={{ backgroundColor: preset.colors[resolvedTheme]['color-background-secondary'] }}
+                />
+                <div 
+                  style={{ backgroundColor: preset.colors[resolvedTheme]['color-text-primary'] }}
+                />
+                <div 
+                  style={{ backgroundColor: preset.colors[resolvedTheme]['color-background-inverse'] }}
+                />
+              </div>
+              
+              {/* Spacer to push info to bottom */}
               <div className="flex-1" />
               
               {/* Bottom-aligned content */}
-              <div className="space-y-3">
+              <div className="space-y-3 mt-3">
                 {/* Theme Info */}
                 <div>
                   <h3 className="text-sm font-semibold text-text-primary">
@@ -161,22 +177,6 @@ export function PresetGallery({ onApply }: PresetGalleryProps) {
                     </span>
                   ))}
                 </div>
-                
-                {/* Theme Preview Colors - Show only current mode (4 colors) */}
-                <div className="grid grid-cols-4 h-24 rounded border border-border-primary overflow-hidden">
-                  <div 
-                    style={{ backgroundColor: preset.colors[resolvedTheme]['color-background-primary'] }}
-                  />
-                  <div 
-                    style={{ backgroundColor: preset.colors[resolvedTheme]['color-background-secondary'] }}
-                  />
-                  <div 
-                    style={{ backgroundColor: preset.colors[resolvedTheme]['color-text-primary'] }}
-                  />
-                  <div 
-                    style={{ backgroundColor: preset.colors[resolvedTheme]['color-background-inverse'] }}
-                  />
-                </div>
 
                 {/* Apply Button - Bottom Aligned */}
                 <Tooltip>