From f41c4aab9cd39b355b3ee4523e3c05de9839d9c1 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 23 May 2026 17:00:29 +0300
Subject: [PATCH] feat: move class prop to wrapper

---
 .../ui/TypographyMenu/TypographyMenu.svelte   | 134 +++++++++---------
 1 file changed, 68 insertions(+), 66 deletions(-)

diff --git a/src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte b/src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte
index 1e1cba0..1376cf1 100644
--- a/src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte
+++ b/src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte
@@ -72,74 +72,76 @@ $effect(() => {
 
 {#if !hidden}
     {#if responsive.isMobileOrTablet}
-        <Popover.Root bind:open>
-            <Popover.Trigger>
-                {#snippet child({ props })}
-                    <Button class={className} variant="primary" {...props}>
-                        {#snippet icon()}
-                            <Settings2Icon class="size-4" />
-                        {/snippet}
-                    </Button>
-                {/snippet}
-            </Popover.Trigger>
-
-            <Popover.Portal>
-                <Popover.Content
-                    side="top"
-                    align="end"
-                    sideOffset={8}
-                    class={cn(
-                        'z-50 w-72',
-                        'bg-surface dark:bg-dark-card',
-                        'border border-subtle',
-                        'shadow-[0_20px_40px_-10px_rgba(0,0,0,0.15)]',
-                        'rounded-none p-4',
-                        '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">
-                        <div class="flex items-center gap-1.5">
-                            <Settings2Icon size={12} class="text-swiss-red" />
-                            <span
-                                class="text-3xs font-mono uppercase tracking-widest font-bold text-swiss-black dark:text-neutral-200"
-                            >
-                                CONTROLS
-                            </span>
-                        </div>
-                        <Popover.Close>
-                            {#snippet child({ props })}
-                                <button
-                                    {...props}
-                                    class="inline-flex items-center justify-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 class={className}>
+            <Popover.Root bind:open>
+                <Popover.Trigger>
+                    {#snippet child({ props })}
+                        <Button variant="primary" {...props}>
+                            {#snippet icon()}
+                                <Settings2Icon class="size-4" />
                             {/snippet}
-                        </Popover.Close>
-                    </div>
+                        </Button>
+                    {/snippet}
+                </Popover.Trigger>
 
-                    <!-- Controls -->
-                    {#each typographySettingsStore.controls as control (control.id)}
-                        <ControlGroup label={control.controlLabel ?? ''}>
-                            <Slider
-                                bind:value={control.instance.value}
-                                min={control.instance.min}
-                                max={control.instance.max}
-                                step={control.instance.step}
-                            />
-                        </ControlGroup>
-                    {/each}
-                </Popover.Content>
-            </Popover.Portal>
-        </Popover.Root>
+                <Popover.Portal>
+                    <Popover.Content
+                        side="top"
+                        align="end"
+                        sideOffset={8}
+                        class={cn(
+                            'z-50 w-72',
+                            'bg-surface dark:bg-dark-card',
+                            'border border-subtle',
+                            'shadow-[0_20px_40px_-10px_rgba(0,0,0,0.15)]',
+                            'rounded-none p-4',
+                            '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">
+                            <div class="flex items-center gap-1.5">
+                                <Settings2Icon size={12} class="text-swiss-red" />
+                                <span
+                                    class="text-3xs font-mono uppercase tracking-widest font-bold text-swiss-black dark:text-neutral-200"
+                                >
+                                    CONTROLS
+                                </span>
+                            </div>
+                            <Popover.Close>
+                                {#snippet child({ props })}
+                                    <button
+                                        {...props}
+                                        class="inline-flex items-center justify-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>
+                        </div>
+
+                        <!-- Controls -->
+                        {#each typographySettingsStore.controls as control (control.id)}
+                            <ControlGroup label={control.controlLabel ?? ''}>
+                                <Slider
+                                    bind:value={control.instance.value}
+                                    min={control.instance.min}
+                                    max={control.instance.max}
+                                    step={control.instance.step}
+                                />
+                            </ControlGroup>
+                        {/each}
+                    </Popover.Content>
+                </Popover.Portal>
+            </Popover.Root>
+        </div>
     {:else}
         <div
             class={cn('w-full md:w-auto', className)}