From 5b1a1d0b0ac9e30f15c32740a7551a407cd8d703 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Fri, 17 Apr 2026 08:56:46 +0300
Subject: [PATCH] fix: use Button's size prop instead of direct font-size class

---
 .../ui/FiltersControl/FilterControls.svelte        | 14 ++++----------
 .../ComparisonView/ui/Sidebar/Sidebar.svelte       |  8 +++++---
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/features/GetFonts/ui/FiltersControl/FilterControls.svelte b/src/features/GetFonts/ui/FiltersControl/FilterControls.svelte
index 242a8bc..8ccda10 100644
--- a/src/features/GetFonts/ui/FiltersControl/FilterControls.svelte
+++ b/src/features/GetFonts/ui/FiltersControl/FilterControls.svelte
@@ -61,13 +61,10 @@ function handleReset() {
             {#each SORT_OPTIONS as option}
                 <Button
                     variant="ghost"
-                    size={isMobileOrTabletPortrait ? 'sm' : 'md'}
+                    size={isMobileOrTabletPortrait ? 'xs' : 'sm'}
                     active={sortStore.value === option}
                     onclick={() => sortStore.set(option)}
-                    class={cn(
-                        'font-bold uppercase tracking-wide font-primary, px-0',
-                        isMobileOrTabletPortrait ? 'text-[0.5625rem]' : 'text-[0.625rem]',
-                    )}
+                    class="tracking-wide px-0"
                 >
                     {option}
                 </Button>
@@ -78,12 +75,9 @@ function handleReset() {
     <!-- Reset_Filters -->
     <Button
         variant="ghost"
-        size={isMobileOrTabletPortrait ? 'sm' : 'md'}
+        size={isMobileOrTabletPortrait ? 'xs' : 'sm'}
         onclick={handleReset}
-        class={cn(
-            'group text-[0.5625rem] md:text-[0.625rem] font-mono font-bold uppercase tracking-widest text-neutral-400',
-            isMobileOrTabletPortrait && 'px-0',
-        )}
+        class={cn('group font-mono tracking-widest text-neutral-400', isMobileOrTabletPortrait && 'px-0')}
         iconPosition="left"
     >
         {#snippet icon()}
diff --git a/src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte b/src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte
index 22da262..89da369 100644
--- a/src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte
+++ b/src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte
@@ -70,19 +70,21 @@ let {
         -->
         <ButtonGroup>
             <ToggleButton
+                size="sm"
                 active={comparisonStore.side === 'A'}
                 onclick={() => comparisonStore.side = 'A'}
-                class="flex-1 tracking-wide font-bold uppercase text-[0.625rem]"
+                class="flex-1 tracking-wide font-bold uppercase"
             >
                 <span>Left Font</span>
             </ToggleButton>
 
             <ToggleButton
-                class="flex-1 tracking-wide font-bold uppercase text-[0.625rem]"
+                size="sm"
+                class="flex-1 tracking-wide font-bold uppercase"
                 active={comparisonStore.side === 'B'}
                 onclick={() => comparisonStore.side = 'B'}
             >
-                <span class="uppercase">Right Font</span>
+                <span>Right Font</span>
             </ToggleButton>
         </ButtonGroup>
     </div>