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()}

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>