From 46a3c3e8fc84c14903ff9bcf302578dce88cd96c Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 7 Feb 2026 11:24:44 +0300
Subject: [PATCH] feat(ComboControl): add reduced flag that removes
 increase/decrease buttons keeping the slider popover

---
 .../SetupFont/ui/SetupFontMenu.svelte         |  3 +-
 .../ui/ComboControl/ComboControl.svelte       | 53 +++++++++++--------
 2 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/src/features/SetupFont/ui/SetupFontMenu.svelte b/src/features/SetupFont/ui/SetupFontMenu.svelte
index 197c0a2..e298cad 100644
--- a/src/features/SetupFont/ui/SetupFontMenu.svelte
+++ b/src/features/SetupFont/ui/SetupFontMenu.svelte
@@ -31,7 +31,7 @@ $effect(() => {
 });
 </script>
 
-<div class="py-2 px-10 flex flex-row items-center gap-2">
+<div class="sm:py-2 sm:px-10 flex flex-row items-center gap-2">
     <div class="flex flex-row gap-3">
         {#each controlManager.controls as control (control.id)}
             <ComboControl
@@ -39,6 +39,7 @@ $effect(() => {
                 increaseLabel={control.increaseLabel}
                 decreaseLabel={control.decreaseLabel}
                 controlLabel={control.controlLabel}
+                reduced={responsive.isMobile}
             />
         {/each}
     </div>
diff --git a/src/shared/ui/ComboControl/ComboControl.svelte b/src/shared/ui/ComboControl/ComboControl.svelte
index 73758e5..78eeb7d 100644
--- a/src/shared/ui/ComboControl/ComboControl.svelte
+++ b/src/shared/ui/ComboControl/ComboControl.svelte
@@ -26,7 +26,7 @@ import PlusIcon from '@lucide/svelte/icons/plus';
 import type { ChangeEventHandler } from 'svelte/elements';
 import IconButton from '../IconButton/IconButton.svelte';
 
-interface ComboControlProps {
+interface Props {
     /**
      * Text for increase button aria-label
      */
@@ -43,6 +43,10 @@ interface ComboControlProps {
      * Control instance
      */
     control: TypographyControl;
+    /**
+     * Reduced amount of controls
+     */
+    reduced?: boolean;
 }
 
 const {
@@ -50,7 +54,8 @@ const {
     decreaseLabel,
     increaseLabel,
     controlLabel,
-}: ComboControlProps = $props();
+    reduced = false,
+}: Props = $props();
 
 // Local state for the slider to prevent infinite loops
 // svelte-ignore state_referenced_locally - $state captures initial value, $effect syncs updates
@@ -80,16 +85,18 @@ const handleSliderChange = (newValue: number) => {
 <TooltipRoot>
     <ButtonGroupRoot class="bg-transparent border-none shadow-none">
         <TooltipTrigger class="flex items-center">
-            <IconButton
-                onclick={control.decrease}
-                disabled={control.isAtMin}
-                aria-label={decreaseLabel}
-                rotation="counterclockwise"
-            >
-                {#snippet icon({ className })}
-                    <MinusIcon class={className} />
-                {/snippet}
-            </IconButton>
+            {#if !reduced}
+                <IconButton
+                    onclick={control.decrease}
+                    disabled={control.isAtMin}
+                    aria-label={decreaseLabel}
+                    rotation="counterclockwise"
+                >
+                    {#snippet icon({ className })}
+                        <MinusIcon class={className} />
+                    {/snippet}
+                </IconButton>
+            {/if}
             <PopoverRoot>
                 <PopoverTrigger>
                     {#snippet child({ props })}
@@ -127,16 +134,18 @@ const handleSliderChange = (newValue: number) => {
                 </PopoverContent>
             </PopoverRoot>
 
-            <IconButton
-                aria-label={increaseLabel}
-                onclick={control.increase}
-                disabled={control.isAtMax}
-                rotation="clockwise"
-            >
-                {#snippet icon({ className })}
-                    <PlusIcon class={className} />
-                {/snippet}
-            </IconButton>
+            {#if !reduced}
+                <IconButton
+                    aria-label={increaseLabel}
+                    onclick={control.increase}
+                    disabled={control.isAtMax}
+                    rotation="clockwise"
+                >
+                    {#snippet icon({ className })}
+                        <PlusIcon class={className} />
+                    {/snippet}
+                </IconButton>
+            {/if}
         </TooltipTrigger>
     </ButtonGroupRoot>
     {#if controlLabel}