fix: use Button's size prop instead of direct font-size class

This commit is contained in:
Ilia Mashkov
2026-04-17 08:56:46 +03:00
parent 0562b94b03
commit 5b1a1d0b0a
2 changed files with 9 additions and 13 deletions

View File

@@ -61,13 +61,10 @@ function handleReset() {
{#each SORT_OPTIONS as option} {#each SORT_OPTIONS as option}
<Button <Button
variant="ghost" variant="ghost"
size={isMobileOrTabletPortrait ? 'sm' : 'md'} size={isMobileOrTabletPortrait ? 'xs' : 'sm'}
active={sortStore.value === option} active={sortStore.value === option}
onclick={() => sortStore.set(option)} onclick={() => sortStore.set(option)}
class={cn( class="tracking-wide px-0"
'font-bold uppercase tracking-wide font-primary, px-0',
isMobileOrTabletPortrait ? 'text-[0.5625rem]' : 'text-[0.625rem]',
)}
> >
{option} {option}
</Button> </Button>
@@ -78,12 +75,9 @@ function handleReset() {
<!-- Reset_Filters --> <!-- Reset_Filters -->
<Button <Button
variant="ghost" variant="ghost"
size={isMobileOrTabletPortrait ? 'sm' : 'md'} size={isMobileOrTabletPortrait ? 'xs' : 'sm'}
onclick={handleReset} onclick={handleReset}
class={cn( class={cn('group font-mono tracking-widest text-neutral-400', isMobileOrTabletPortrait && 'px-0')}
'group text-[0.5625rem] md:text-[0.625rem] font-mono font-bold uppercase tracking-widest text-neutral-400',
isMobileOrTabletPortrait && 'px-0',
)}
iconPosition="left" iconPosition="left"
> >
{#snippet icon()} {#snippet icon()}

View File

@@ -70,19 +70,21 @@ let {
--> -->
<ButtonGroup> <ButtonGroup>
<ToggleButton <ToggleButton
size="sm"
active={comparisonStore.side === 'A'} active={comparisonStore.side === 'A'}
onclick={() => 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> <span>Left Font</span>
</ToggleButton> </ToggleButton>
<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'} active={comparisonStore.side === 'B'}
onclick={() => comparisonStore.side = 'B'} onclick={() => comparisonStore.side = 'B'}
> >
<span class="uppercase">Right Font</span> <span>Right Font</span>
</ToggleButton> </ToggleButton>
</ButtonGroup> </ButtonGroup>
</div> </div>