src/features/SetupFont/ui/TypographyMenu.svelte

@@ -85,8 +85,8 @@ $effect(() => {
                     {/snippet}
                 </IconButton>
             {/snippet}
-            {#snippet content()}
-                <div class="flex flex-col gap-6 px-2 py-4">
+            {#snippet content({ className })}
+                <div class={cn(className, 'flex flex-col gap-6')}>
                     {#each controlManager.controls as control (control.id)}
                         <ComboControlV2
                             control={control.instance}

src/shared/ui/Drawer/Drawer.svelte

@@ -14,7 +14,7 @@ import type { Snippet } from 'svelte';
 interface Props {
     isOpen?: boolean;
     trigger?: Snippet<[{ isOpen: boolean; onClick: () => void }]>;
-    content?: Snippet<[{ isOpen: boolean }]>;
+    content?: Snippet<[{ isOpen: boolean; className?: string }]>;
     contentClassName?: string;
 }
 
@@ -35,7 +35,7 @@ function handleClick() {
             </Button>
         {/if}
     </DrawerTrigger>
-    <DrawerContent class={cn('min-h-60', contentClassName)}>
-        {@render content?.({ isOpen })}
+    <DrawerContent>
+        {@render content?.({ isOpen, className: cn('min-h-60 px-2 pt-4 pb-8', contentClassName) })}
     </DrawerContent>
 </DrawerRoot>

src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { ResponsiveManager } from '$shared/lib';
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import {
     Drawer,
     IconButton,
@@ -36,10 +37,9 @@ const responsive = getContext<ResponsiveManager>('responsive');
             </IconButton>
         {/snippet}
 
-        {#snippet content({ isOpen })}
-            <div class="px-2 py-4">
+        {#snippet content({ isOpen, className })}
+            <div class={cn(className, 'flex flex-col gap-6')}>
                 <SelectComparedFonts {sliderPos} />
-            </div>
                 <TypographyControls
                     {sliderPos}
                     {isDragging}
@@ -48,6 +48,7 @@ const responsive = getContext<ResponsiveManager>('responsive');
                     containerWidth={container?.clientWidth}
                     staticPosition
                 />
+            </div>
         {/snippet}
     </Drawer>
 {:else}

src/widgets/ComparisonSlider/ui/ComparisonSlider/components/TypographyControls.svelte

@@ -116,7 +116,7 @@ $effect(() => {
     out:fade={{ duration: 300, delay: 300 }}
 >
     {#if staticPosition}
-        <div class="flex flex-col gap-6 px-2 py-4">
+        <div class="flex flex-col gap-6">
             <Input
                 class="p-6"
                 bind:value={comparisonStore.text}