From 411dbfefcb78e9a205b361e258048913681f61c3 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 16:52:50 +0300
Subject: [PATCH] feat(ComparisonSlider): rotate icon for the mobile and
 slightly tweak styles

---
 .../components/ToggleMenuButton.svelte        | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/ToggleMenuButton.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/ToggleMenuButton.svelte
index c887456..733450d 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/ToggleMenuButton.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/ToggleMenuButton.svelte
@@ -36,16 +36,25 @@ const fontB = $derived(comparisonStore.fontB);
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
-        class={cn('lucide lucide-circle-arrow-right-icon lucide-circle-arrow-right', className)}
+        class={cn(
+            'lucide lucide-circle-arrow-right-icon lucide-circle-arrow-right',
+            className,
+        )}
     >
         <circle cx="12" cy="12" r="10" />
         {#if isActive}
-            <path transition:draw={{ duration: 150, delay: 150, easing: cubicOut }} d="m15 9-6 6" /><path
+            <path
+                transition:draw={{ duration: 150, delay: 150, easing: cubicOut }}
+                d="m15 9-6 6"
+            /><path
                 transition:draw={{ duration: 150, delay: 150, easing: cubicOut }}
                 d="m9 9 6 6"
             />
         {:else}
-            <path transition:draw={{ duration: 150, delay: 150, easing: cubicOut }} d="m12 16 4-4-4-4" /><path
+            <path
+                transition:draw={{ duration: 150, delay: 150, easing: cubicOut }}
+                d="m12 16 4-4-4-4"
+            /><path
                 transition:draw={{ duration: 150, delay: 150, easing: cubicOut }}
                 d="M8 12h8"
             />
@@ -62,13 +71,18 @@ const fontB = $derived(comparisonStore.fontB);
         'transition-transform duration-150 active:scale-98',
     )}
 >
-    {@render icon('size-4 stroke-[1.5] stroke-gray-500')}
+    {@render icon(
+    cn(
+        'size-4 stroke-[1.5] stroke-gray-500',
+        !isActive && 'rotate-90 sm:rotate-0',
+    ),
+)}
     <div class="w-px h-2.5 bg-gray-400/50"></div>
-    <div class="text-xs uppercase transition-all delay-150 group-hover:opacity-100 text-indigo-500 text-right">
+    <div class="text-[0.75rem] sm:text-xs transition-all delay-150 group-hover:text-semibold text-indigo-500 text-right whitespace-nowrap">
         {fontB?.name}
     </div>
     <div class="w-px h-2.5 bg-gray-400/50"></div>
-    <div class="text-xs uppercase transition-all delay-150 group-hover:opacity-100 text-neural-950 text-left">
+    <div class="text-[0.75rem] sm:text-xs transition-all delay-150 group-hover:text-semibold text-neural-950 text-left whitespace-nowrap">
         {fontA?.name}
     </div>
 </button>