diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/TypographyControls.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/TypographyControls.svelte
index 606402c..2cd3c35 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/TypographyControls.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/TypographyControls.svelte
@@ -13,6 +13,7 @@ import {
 } from '$shared/ui';
 import { comparisonStore } from '$widgets/ComparisonSlider/model';
 import AArrowUP from '@lucide/svelte/icons/a-arrow-up';
+import { type Orientation } from 'bits-ui';
 import { Spring } from 'svelte/motion';
 import { fade } from 'svelte/transition';
 
@@ -106,6 +107,26 @@ $effect(() => {
 });
 </script>
 
+{#snippet InputComponent(className: string)}
+    <Input
+        class={className}
+        bind:value={comparisonStore.text}
+        disabled={isDragging}
+        onfocusin={handleInputFocus}
+        placeholder="The quick brown fox..."
+    />
+{/snippet}
+
+{#snippet Controls(className: string, orientation: Orientation)}
+    {#if typography.weightControl && typography.sizeControl && typography.heightControl}
+        <div class={className}>
+            <ComboControlV2 control={typography.weightControl} {orientation} reduced />
+            <ComboControlV2 control={typography.sizeControl} {orientation} reduced />
+            <ComboControlV2 control={typography.heightControl} {orientation} reduced />
+        </div>
+    {/if}
+{/snippet}
+
 <div
     class="z-50 will-change-transform"
     style:transform="
@@ -117,20 +138,8 @@ $effect(() => {
 >
     {#if staticPosition}
         <div class="flex flex-col gap-6">
-            <Input
-                class="p-6"
-                bind:value={comparisonStore.text}
-                disabled={isDragging}
-                onfocusin={handleInputFocus}
-                placeholder="The quick brown fox..."
-            />
-            {#if typography.weightControl && typography.sizeControl && typography.heightControl}
-                <div class="flex flex-col justify-between items-center-safe gap-6">
-                    <ComboControlV2 control={typography.weightControl} orientation="horizontal" />
-                    <ComboControlV2 control={typography.sizeControl} orientation="horizontal" />
-                    <ComboControlV2 control={typography.heightControl} orientation="horizontal" />
-                </div>
-            {/if}
+            {@render InputComponent?.('p-6')}
+            {@render Controls?.('flex flex-col justify-between items-center-safe gap-6', 'horizontal')}
         </div>
     {:else}
         <ExpandableWrapper
@@ -159,46 +168,18 @@ $effect(() => {
             {/snippet}
 
             {#snippet visibleContent()}
-                <div class="relative">
-                    <!--
-                        <Input
-                            bind:value={comparisonStore.text}
-                            disabled={isDragging}
-                            onfocusin={handleInputFocus}
-                            class={cn(
-                                isActive
-                                    ? 'h-7 sm:h-8 text-[11px] sm:text-xs text-center bg-white/40 border-none rounded-lg focus-visible:ring-indigo-500/50 text-slate-900'
-                                    : 'bg-transparent shadow-none border-none p-0 h-auto text-sm sm:text-base font-medium focus-visible:ring-0 text-slate-900/50',
-                                ' placeholder:text-slate-400 selection:bg-indigo-100 flex-1 transition-all duration-350 w-44 sm:w-56',
-                            )}
-                            placeholder="The quick brown fox..."
-                        />
-                    -->
-                    <Input
-                        class={cn(
-                            'pl-1 sm:pl-3 pr-1 sm:pr-3',
-                            'h-6 sm:h-8 md:h-10',
-                            'rounded-lg',
-                            isActive
-                                ? 'h-7 sm:h-8 text-[0.825rem]'
-                                : 'bg-transparent shadow-none border-none p-0 h-auto text-sm sm:text-base font-medium focus-visible:ring-0 text-slate-900/50',
-                        )}
-                        bind:value={comparisonStore.text}
-                        disabled={isDragging}
-                        onfocusin={handleInputFocus}
-                        placeholder="The quick brown fox..."
-                    />
-                </div>
+                {@render InputComponent(cn(
+    'pl-1 sm:pl-3 pr-1 sm:pr-3',
+    'h-6 sm:h-8 md:h-10',
+    'rounded-lg',
+    isActive
+        ? 'h-7 sm:h-8 text-[0.825rem]'
+        : 'bg-transparent shadow-none border-none p-0 h-auto text-sm sm:text-base font-medium focus-visible:ring-0 text-slate-900/50',
+))}
             {/snippet}
 
             {#snippet hiddenContent()}
-                {#if typography.weightControl && typography.sizeControl && typography.heightControl}
-                    <div class="flex flex-row justify-between items-center-safe gap-2 sm:gap-0">
-                        <ComboControlV2 control={typography.weightControl} orientation="vertical" />
-                        <ComboControlV2 control={typography.sizeControl} orientation="vertical" />
-                        <ComboControlV2 control={typography.heightControl} orientation="vertical" />
-                    </div>
-                {/if}
+                {@render Controls?.('flex flex-row justify-between items-center-safe gap-2 sm:gap-0 h-64', 'vertical')}
             {/snippet}
         </ExpandableWrapper>
     {/if}