From 48d0145dc81a81d89d519caaad297f2ef32bd49c Mon Sep 17 00:00:00 2001
From: Psychotoxical <dev@psysonic.app>
Date: Thu, 9 Apr 2026 13:23:14 +0200
Subject: [PATCH] fix(albums): align year filter inputs to button height and
 font size

Input padding and font-size now match adjacent .btn elements so the
year filter row no longer has mixed heights.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/Albums.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/pages/Albums.tsx b/src/pages/Albums.tsx
index 298ee000..659df23a 100644
--- a/src/pages/Albums.tsx
+++ b/src/pages/Albums.tsx
@@ -218,7 +218,7 @@ export default function Albums() {
               ))}
 
               <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
-                <span style={{ fontSize: 12, color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>
+                <span style={{ fontSize: 14, color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>
                   {t('albums.yearFilterLabel')}
                 </span>
                 <input
@@ -229,9 +229,9 @@ export default function Albums() {
                   placeholder={t('albums.yearFrom')}
                   value={yearFrom}
                   onChange={e => setYearFrom(e.target.value)}
-                  style={{ width: 68, padding: '4px 6px', fontSize: 12 }}
+                  style={{ width: 76, padding: 'var(--space-2) var(--space-2)' }}
                 />
-                <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>–</span>
+                <span style={{ fontSize: 14, color: 'var(--text-muted)' }}>–</span>
                 <input
                   className="input"
                   type="number"
@@ -240,16 +240,15 @@ export default function Albums() {
                   placeholder={t('albums.yearTo')}
                   value={yearTo}
                   onChange={e => setYearTo(e.target.value)}
-                  style={{ width: 68, padding: '4px 6px', fontSize: 12 }}
+                  style={{ width: 76, padding: 'var(--space-2) var(--space-2)' }}
                 />
                 {yearActive && (
                   <button
                     className="btn btn-ghost"
                     onClick={clearYear}
                     data-tooltip={t('albums.yearFilterClear')}
-                    style={{ padding: '4px 6px' }}
                   >
-                    <X size={13} />
+                    <X size={14} />
                   </button>
                 )}
               </div>