src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte

@@ -16,11 +16,11 @@ import {
     Button,
     ComboControl,
     ControlGroup,
+    Popover,
     Slider,
 } from '$shared/ui';
 import Settings2Icon from '@lucide/svelte/icons/settings-2';
 import XIcon from '@lucide/svelte/icons/x';
-import { Popover } from 'bits-ui';
 import { getContext } from 'svelte';
 import { cubicOut } from 'svelte/easing';
 import { fly } from 'svelte/transition';
@@ -73,33 +73,21 @@ $effect(() => {
 {#if !hidden}
     {#if responsive.isMobileOrTablet}
         <div class={className}>
-            <Popover.Root bind:open>
-                <Popover.Trigger>
-                    {#snippet child({ props })}
-                        <Button variant="primary" {...props}>
-                            {#snippet icon()}
-                                <Settings2Icon class="size-4" />
-                            {/snippet}
-                        </Button>
-                    {/snippet}
-                </Popover.Trigger>
+            <Popover bind:open side="top" align="end" sideOffset={8}>
+                {#snippet trigger(props)}
+                    <Button variant="primary" {...props}>
+                        {#snippet icon()}
+                            <Settings2Icon class="size-4" />
+                        {/snippet}
+                    </Button>
+                {/snippet}
 
-                <Popover.Portal>
-                    <Popover.Content
-                        side="top"
-                        align="end"
-                        sideOffset={8}
+                {#snippet children({ close })}
+                    <div
                         class={cn(
-                            'z-50 w-72 p-4 rounded-none',
+                            'w-72 p-4 rounded-none',
                             'surface-popover',
-                            'data-[state=open]:animate-in data-[state=closed]:animate-out',
-                            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-                            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-                            'data-[side=top]:slide-in-from-bottom-2',
-                            'data-[side=bottom]:slide-in-from-top-2',
                         )}
-                        interactOutsideBehavior="close"
-                        escapeKeydownBehavior="close"
                     >
                         <!-- Header -->
                         <div class="flex items-center justify-between mb-3 pb-3 border-b border-subtle">
@@ -111,17 +99,13 @@ $effect(() => {
                                     CONTROLS
                                 </span>
                             </div>
-                            <Popover.Close>
-                                {#snippet child({ props })}
-                                    <button
-                                        {...props}
-                                        class="flex-center size-6 rounded-none hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
-                                        aria-label="Close controls"
-                                    >
-                                        <XIcon class="size-3.5 text-neutral-500" />
-                                    </button>
-                                {/snippet}
-                            </Popover.Close>
+                            <button
+                                onclick={close}
+                                class="flex-center size-6 rounded-none hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
+                                aria-label="Close controls"
+                            >
+                                <XIcon class="size-3.5 text-neutral-500" />
+                            </button>
                         </div>
 
                         <!-- Controls -->
@@ -135,9 +119,9 @@ $effect(() => {
                                 />
                             </ControlGroup>
                         {/each}
-                    </Popover.Content>
-                </Popover.Portal>
-            </Popover.Root>
+                    </div>
+                {/snippet}
+            </Popover>
         </div>
     {:else}
         <div