feat(ComboControl): add reduced flag that removes increase/decrease buttons keeping the slider popover

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>

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,6 +85,7 @@ const handleSliderChange = (newValue: number) => {
 <TooltipRoot>
     <ButtonGroupRoot class="bg-transparent border-none shadow-none">
         <TooltipTrigger class="flex items-center">
+            {#if !reduced}
                 <IconButton
                     onclick={control.decrease}
                     disabled={control.isAtMin}
@@ -90,6 +96,7 @@ const handleSliderChange = (newValue: number) => {
                         <MinusIcon class={className} />
                     {/snippet}
                 </IconButton>
+            {/if}
             <PopoverRoot>
                 <PopoverTrigger>
                     {#snippet child({ props })}
@@ -127,6 +134,7 @@ const handleSliderChange = (newValue: number) => {
                 </PopoverContent>
             </PopoverRoot>
 
+            {#if !reduced}
                 <IconButton
                     aria-label={increaseLabel}
                     onclick={control.increase}
@@ -137,6 +145,7 @@ const handleSliderChange = (newValue: number) => {
                         <PlusIcon class={className} />
                     {/snippet}
                 </IconButton>
+            {/if}
         </TooltipTrigger>
     </ButtonGroupRoot>
     {#if controlLabel}