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,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}