2026-04-22 10:04:41 +00:00
1 changed files with 7 additions and 16 deletions
@@ -13,6 +13,7 @@ import {
 } from '$entities/Font';
 import type { ResponsiveManager } from '$shared/lib';
 import {
+    Button,
    ComboControl,
    ControlGroup,
    Slider,
@@ -68,25 +69,15 @@ $effect(() => {
 </script>

 {#if !hidden}
-    {#if responsive.isMobile}
+    {#if responsive.isMobileOrTablet}
        <Popover.Root bind:open={isOpen}>
            <Popover.Trigger>
                {#snippet child({ props })}
-                    <button
-                        {...props}
-                        class={clsx(
-                            'inline-flex items-center justify-center',
-                            'size-8 p-0',
-                            'border border-transparent rounded-none',
-                            'transition-colors duration-150',
-                            'hover:bg-white/50 dark:hover:bg-white/5',
-                            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30',
-                            isOpen && 'bg-paper dark:bg-dark-card border-subtle shadow-sm',
-                            className,
-                        )}
-                    >
-                        <Settings2Icon class="size-4" />
-                    </button>
+                    <Button class={className} variant="primary" {...props}>
+                        {#snippet icon()}
+                            <Settings2Icon class="size-4" />
+                        {/snippet}
+                    </Button>
                {/snippet}
            </Popover.Trigger>