From d767f9714c4e89f83e21ad4a572306e544492449 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Mon, 23 Feb 2026 08:01:48 +0100
Subject: [PATCH] style: improve icon alignment in figlet font selector tabs

- Switch from inline-block to flex items-center justify-center for filter tab buttons
- Adjust icon spacing for better visual balance
---
 components/figlet/FontSelector.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/figlet/FontSelector.tsx b/components/figlet/FontSelector.tsx
index 604de0f..52c1623 100644
--- a/components/figlet/FontSelector.tsx
+++ b/components/figlet/FontSelector.tsx
@@ -128,31 +128,31 @@ export function FontSelector({
           <button
             onClick={() => setFilter('all')}
             className={cn(
-              'flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
+              'flex-1 flex items-center justify-center px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
               filter === 'all' ? 'bg-background shadow-sm' : 'hover:bg-background/50'
             )}
           >
-            <List className="inline-block h-3 w-3 mr-1" />
+            <List className="h-3 w-3 mr-1.5" />
             All
           </button>
           <button
             onClick={() => setFilter('favorites')}
             className={cn(
-              'flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
+              'flex-1 flex items-center justify-center px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
               filter === 'favorites' ? 'bg-background shadow-sm' : 'hover:bg-background/50'
             )}
           >
-            <Heart className="inline-block h-3 w-3 mr-1" />
+            <Heart className="h-3 w-3 mr-1.5" />
             Favorites
           </button>
           <button
             onClick={() => setFilter('recent')}
             className={cn(
-              'flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
+              'flex-1 flex items-center justify-center px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
               filter === 'recent' ? 'bg-background shadow-sm' : 'hover:bg-background/50'
             )}
           >
-            <Clock className="inline-block h-3 w-3 mr-1" />
+            <Clock className="h-3 w-3 mr-1.5" />
             Recent
           </button>
         </div>