diff --git a/src/features/SetupFont/ui/TypographyMenu.svelte b/src/features/SetupFont/ui/TypographyMenu.svelte
index 3166e48..3831761 100644
--- a/src/features/SetupFont/ui/TypographyMenu.svelte
+++ b/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}
diff --git a/src/shared/ui/Drawer/Drawer.svelte b/src/shared/ui/Drawer/Drawer.svelte
index cf723a3..667eefc 100644
--- a/src/shared/ui/Drawer/Drawer.svelte
+++ b/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>
diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
index 46ced84..21e7b9e 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
+++ b/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,18 +37,18 @@ 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} />
+                <TypographyControls
+                    {sliderPos}
+                    {isDragging}
+                    isActive={isOpen}
+                    bind:wrapper={typographyControls}
+                    containerWidth={container?.clientWidth}
+                    staticPosition
+                />
             </div>
-            <TypographyControls
-                {sliderPos}
-                {isDragging}
-                isActive={isOpen}
-                bind:wrapper={typographyControls}
-                containerWidth={container?.clientWidth}
-                staticPosition
-            />
         {/snippet}
     </Drawer>
 {:else}
diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/TypographyControls.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/TypographyControls.svelte
index ec2ef5a..f934107 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/TypographyControls.svelte
+++ b/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}