From fedf3f88e7398b1f91b008b2a6321d9e8a24e5f9 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Fri, 6 Feb 2026 14:48:44 +0300
Subject: [PATCH] feat: add tailwind responsive classes

---
 src/app/ui/Layout.svelte                      |  2 +-
 .../BreadcrumbHeader/BreadcrumbHeader.svelte  | 22 ++++++------
 .../ui/FontVirtualList/FontVirtualList.svelte | 12 +++----
 .../ui/FontSampler/FontSampler.svelte         | 30 ++++++++--------
 src/routes/Page.svelte                        | 35 ++++++++++---------
 .../ui/CheckboxFilter/CheckboxFilter.svelte   |  8 ++---
 src/shared/ui/SearchBar/SearchBar.svelte      | 10 +++---
 src/shared/ui/Section/Section.svelte          | 17 +++++----
 .../ComparisonSlider/ComparisonSlider.svelte  | 12 +++----
 .../components/ControlsWrapper.svelte         |  8 ++---
 .../ComparisonSlider/components/Labels.svelte | 30 ++++++++--------
 .../ui/FontSearch/FontSearch.svelte           | 12 ++++---
 .../ui/SampleList/SampleList.svelte           |  2 +-
 .../ui/TypographyMenu.svelte                  |  6 ++--
 14 files changed, 106 insertions(+), 100 deletions(-)

diff --git a/src/app/ui/Layout.svelte b/src/app/ui/Layout.svelte
index 6ca820e..e527e80 100644
--- a/src/app/ui/Layout.svelte
+++ b/src/app/ui/Layout.svelte
@@ -50,7 +50,7 @@ let { children }: Props = $props();
         </header>
 
         <!-- <ScrollArea class="h-screen w-screen"> -->
-        <main class="flex-1 h-full w-full max-w-6xl mx-auto px-4 pt-6 pb-10 md:px-8 lg:pt-10 lg:pb-20 relative overflow-x-hidden">
+        <main class="flex-1 h-full w-full max-w-6xl mx-auto px-0 pt-0 pb-10 sm:px-6 sm:pt-8 sm:pb-12 md:px-8 md:pt-10 md:pb-16 lg:px-10 lg:pt-12 lg:pb-20 xl:px-16 relative overflow-x-hidden">
             <TooltipProvider>
                 <TypographyMenu />
                 {@render children?.()}
diff --git a/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte b/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte
index 5ba0331..80cd3f7 100644
--- a/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte
+++ b/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte
@@ -19,29 +19,29 @@ import { scrollBreadcrumbsStore } from '../../model';
             backdrop-blur-lg bg-white/20
             border-b border-gray-300/50
             shadow-[0_1px_3px_rgba(0,0,0,0.04)]
-            h-12
+            h-10 sm:h-12
         "
     >
-        <div class="max-w-8xl mx-auto px-6 h-full flex items-center gap-4">
-            <h1 class={cn('font-[Barlow] font-extralight')}>
+        <div class="max-w-8xl mx-auto px-4 sm:px-6 h-full flex items-center gap-2 sm:gap-4">
+            <h1 class={cn('font-[Barlow] font-extralight text-sm sm:text-base')}>
                 GLYPHDIFF
             </h1>
 
-            <div class="h-4 w-px bg-gray-300/60"></div>
+            <div class="h-3.5 sm:h-4 w-px bg-gray-300/60 hidden sm:block"></div>
 
-            <nav class="flex items-center gap-3 overflow-x-auto scrollbar-hide flex-1">
+            <nav class="flex items-center gap-2 sm:gap-3 overflow-x-auto scrollbar-hide flex-1">
                 {#each scrollBreadcrumbsStore.items as item, idx (item.index)}
                     <div
                         in:fly={{ duration: 300, y: -10, x: 100, opacity: 0 }}
                         out:fly={{ duration: 300, y: 10, x: 100, opacity: 0 }}
-                        class="flex items-center gap-3 whitespace-nowrap shrink-0"
+                        class="flex items-center gap-2 sm:gap-3 whitespace-nowrap shrink-0"
                     >
-                        <span class="font-mono text-[9px] text-gray-400 tracking-wider">
+                        <span class="font-mono text-[8px] sm:text-[9px] text-gray-400 tracking-wider">
                             {String(item.index).padStart(2, '0')}
                         </span>
 
                         {@render item.title({
-    className: 'text-[10px] md:text-[10px] font-bold uppercase tracking-tight leading-[0.95] text-gray-900',
+    className: 'text-[9px] sm:text-[10px] font-bold uppercase tracking-tight leading-[0.95] text-gray-900',
 })}
 
                         {#if idx < scrollBreadcrumbsStore.items.length - 1}
@@ -55,9 +55,9 @@ import { scrollBreadcrumbsStore } from '../../model';
                 {/each}
             </nav>
 
-            <div class="flex items-center gap-2 opacity-50 ml-auto">
-                <div class="w-px h-2.5 bg-gray-300/60"></div>
-                <span class="font-mono text-[8px] text-gray-400 tracking-wider">
+            <div class="flex items-center gap-1.5 sm:gap-2 opacity-50 ml-auto">
+                <div class="w-px h-2 sm:h-2.5 bg-gray-300/60 hidden sm:block"></div>
+                <span class="font-mono text-[7px] sm:text-[8px] text-gray-400 tracking-wider">
                     [{scrollBreadcrumbsStore.items.length}]
                 </span>
             </div>
diff --git a/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
index 984b89a..0cf1834 100644
--- a/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
+++ b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
@@ -86,14 +86,14 @@ function handleNearBottom(lastVisibleIndex: number) {
 {#key isLoading}
     <div class="relative w-full h-full" transition:fade={{ duration: 300 }}>
         {#if isLoading}
-            <div class="flex flex-col gap-4 p-4">
+            <div class="flex flex-col gap-3 sm:gap-4 p-3 sm:p-4">
                 {#each Array(5) as _, i}
-                    <div class="flex flex-col gap-2 p-4 border rounded-xl border-gray-200/50 bg-white/40">
-                        <div class="flex items-center justify-between mb-4">
-                            <Skeleton class="h-8 w-1/3" />
-                            <Skeleton class="h-8 w-8 rounded-full" />
+                    <div class="flex flex-col gap-1.5 sm:gap-2 p-3 sm:p-4 border rounded-lg sm:rounded-xl border-gray-200/50 bg-white/40">
+                        <div class="flex items-center justify-between mb-3 sm:mb-4">
+                            <Skeleton class="h-6 sm:h-8 w-1/3" />
+                            <Skeleton class="h-6 sm:h-8 w-6 sm:w-8 rounded-full" />
                         </div>
-                        <Skeleton class="h-32 w-full" />
+                        <Skeleton class="h-24 sm:h-32 w-full" />
                     </div>
                 {/each}
             </div>
diff --git a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
index 9d74d11..9eee90e 100644
--- a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
+++ b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
@@ -55,7 +55,7 @@ function removeSample() {
 
 <div
     class="
-        w-full h-full rounded-2xl
+        w-full h-full rounded-xl sm:rounded-2xl
         flex flex-col
         backdrop-blur-md bg-white/80
         border border-gray-300/50
@@ -64,13 +64,13 @@ function removeSample() {
     "
     style:font-weight={fontWeight}
 >
-    <div class="px-6 py-3 border-b border-gray-200/60 flex items-center justify-between">
-        <div class="flex items-center gap-2.5">
-            <span class="font-mono text-[9px] uppercase tracking-[0.25em] text-gray-500 font-medium">
+    <div class="px-4 sm:px-5 md:px-6 py-2.5 sm:py-3 border-b border-gray-200/60 flex items-center justify-between">
+        <div class="flex items-center gap-2 sm:gap-2.5">
+            <span class="font-mono text-[8px] sm:text-[9px] uppercase tracking-[0.25em] text-gray-500 font-medium">
                 typeface_{String(index).padStart(3, '0')}
             </span>
-            <div class="w-px h-2.5 bg-gray-300/60"></div>
-            <span class="font-mono text-[10px] tracking-[0.15em] font-bold uppercase text-gray-900">
+            <div class="w-px h-2 sm:h-2.5 bg-gray-300/60"></div>
+            <span class="font-mono text-[9px] sm:text-[10px] tracking-[0.15em] font-bold uppercase text-gray-900">
                 {font.name}
             </span>
         </div>
@@ -87,7 +87,7 @@ function removeSample() {
         -->
     </div>
 
-    <div class="p-8 relative z-10">
+    <div class="p-4 sm:p-5 md:p-8 relative z-10">
         <!-- TODO: Fix this ! -->
         <FontApplicator id={font.id} name={font.name} url={font.styles.regular!}>
             <ContentEditable
@@ -100,20 +100,20 @@ function removeSample() {
         </FontApplicator>
     </div>
 
-    <div class="px-6 py-2 border-t border-gray-200/40 w-full flex gap-4 bg-gray-50/30 mt-auto">
-        <span class="text-[8px] font-mono text-gray-400 uppercase tracking-wider ml-auto">
+    <div class="px-4 sm:px-5 md:px-6 py-1.5 sm:py-2 border-t border-gray-200/40 w-full flex flex-row gap-2 sm:gap-4 bg-gray-50/30 mt-auto">
+        <span class="text-[7px] sm:text-[8px] font-mono text-gray-400 uppercase tracking-wider ml-auto">
             SZ:{fontSize}PX
         </span>
-        <div class="w-px h-2.5 self-center bg-gray-300/40"></div>
-        <span class="text-[8px] font-mono text-gray-400 uppercase tracking-wider">
+        <div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/40 hidden sm:block"></div>
+        <span class="text-[7px] sm:text-[8px] font-mono text-gray-400 uppercase tracking-wider">
             WGT:{fontWeight}
         </span>
-        <div class="w-px h-2.5 self-center bg-gray-300/40"></div>
-        <span class="text-[8px] font-mono text-gray-400 uppercase tracking-wider">
+        <div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/40 hidden sm:block"></div>
+        <span class="text-[7px] sm:text-[8px] font-mono text-gray-400 uppercase tracking-wider">
             LH:{lineHeight?.toFixed(2)}
         </span>
-        <div class="w-px h-2.5 self-center bg-gray-300/40"></div>
-        <span class="text-[8px] font-mono text-gray-400 uppercase tracking-wider">
+        <div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/40 hidden sm:block"></div>
+        <span class="text-[7px] sm:text-[8px] font-mono text-gray-400 uppercase tracking-wider">
             LTR:{letterSpacing}
         </span>
     </div>
diff --git a/src/routes/Page.svelte b/src/routes/Page.svelte
index 87dde72..ff1c888 100644
--- a/src/routes/Page.svelte
+++ b/src/routes/Page.svelte
@@ -42,8 +42,8 @@ function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippe
 </script>
 
 <!-- Font List -->
-<div class="p-2 h-full flex flex-col gap-3">
-    <Section class="my-12 gap-8" onTitleStatusChange={handleTitleStatusChanged}>
+<div class="p-2 sm:p-3 md:p-4 h-full flex flex-col gap-3 sm:gap-4">
+    <Section class="my-4 sm:my-10 md:my-12 gap-6 sm:gap-8" onTitleStatusChange={handleTitleStatusChanged}>
         {#snippet icon({ className })}
             <CodeIcon class={className} />
         {/snippet}
@@ -52,24 +52,25 @@ function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippe
                 Project_Codename
             </span>
         {/snippet}
-        <h2 class={cn('font-[Barlow] font-thin text-7xl md:text-8xl text-justify [text-align-last:justify] [text-justify:inter-character]')}>
+        <h2 class={cn('font-[Barlow] font-thin text-5xl sm:text-6xl md:text-7xl lg:text-8xl text-justify [text-align-last:justify] [text-justify:inter-character]')}>
             GLYPHDIFF
         </h2>
     </Section>
+    <!--
+        <Section class="my-12 gap-8" index={1} onTitleStatusChange={handleTitleStatusChanged}>
+            {#snippet icon({ className })}
+                <EyeIcon class={className} />
+            {/snippet}
+            {#snippet title({ className })}
+                <h1 class={className}>
+                    Optical<br />Comparator
+                </h1>
+            {/snippet}
+            <ComparisonSlider />
+        </Section>
+    -->
 
-    <Section class="my-12 gap-8" index={1} onTitleStatusChange={handleTitleStatusChanged}>
-        {#snippet icon({ className })}
-            <EyeIcon class={className} />
-        {/snippet}
-        {#snippet title({ className })}
-            <h1 class={className}>
-                Optical<br />Comparator
-            </h1>
-        {/snippet}
-        <ComparisonSlider />
-    </Section>
-
-    <Section class="my-12 gap-8" index={2} onTitleStatusChange={handleTitleStatusChanged}>
+    <Section class="my-4 sm:my-10 md:my-12 gap-6 sm:gap-8" index={2} onTitleStatusChange={handleTitleStatusChanged}>
         {#snippet icon({ className })}
             <ScanSearchIcon class={className} />
         {/snippet}
@@ -81,7 +82,7 @@ function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippe
         <FontSearch bind:showFilters={isExpanded} />
     </Section>
 
-    <Section class="my-12 gap-8" index={3} onTitleStatusChange={handleTitleStatusChanged}>
+    <Section class="my-4 sm:my-10 md:my-12 gap-6 sm:gap-8" index={3} onTitleStatusChange={handleTitleStatusChanged}>
         {#snippet icon({ className })}
             <LineSquiggleIcon class={className} />
         {/snippet}
diff --git a/src/shared/ui/CheckboxFilter/CheckboxFilter.svelte b/src/shared/ui/CheckboxFilter/CheckboxFilter.svelte
index 5ab3e1a..bf14acd 100644
--- a/src/shared/ui/CheckboxFilter/CheckboxFilter.svelte
+++ b/src/shared/ui/CheckboxFilter/CheckboxFilter.svelte
@@ -54,7 +54,7 @@ const hasSelection = $derived(selectedCount > 0);
     class="w-full bg-card transition-colors hover:bg-accent/5"
 >
     <!-- Trigger row: title, expand indicator, and optional count badge -->
-    <div class="flex items-center justify-between px-4 py-2">
+    <div class="flex items-center justify-between px-3 sm:px-4 py-2">
         <CollapsibleTrigger
             class={buttonVariants({
                 variant: 'ghost',
@@ -62,14 +62,14 @@ const hasSelection = $derived(selectedCount > 0);
                 class: 'flex-1 justify-between gap-2 hover:bg-transparent focus-visible:ring-1 focus-visible:ring-ring',
             })}
         >
-            <h4 class="text-sm font-semibold">{displayedLabel}</h4>
+            <h4 class="text-xs sm:text-sm font-semibold">{displayedLabel}</h4>
 
             <!-- Badge only appears when items are selected to avoid clutter -->
             {#if hasSelection}
                 <Badge
                     variant="secondary"
                     data-testid="badge"
-                    class="mr-auto h-5 min-w-5 px-1.5 text-xs font-medium tabular-nums"
+                    class="mr-auto h-4 sm:h-5 min-w-4 sm:min-w-5 px-1 sm:px-1.5 text-[10px] sm:text-xs font-medium tabular-nums"
                 >
                     {selectedCount}
                 </Badge>
@@ -81,7 +81,7 @@ const hasSelection = $derived(selectedCount > 0);
                 class="shrink-0 transition-transform duration-200 ease-out"
                 style:transform={isOpen ? 'rotate(0deg)' : 'rotate(-90deg)'}
             >
-                <ChevronDownIcon class="h-4 w-4" />
+                <ChevronDownIcon class="h-3.5 w-3.5 sm:h-4 sm:w-4" />
             </div>
         </CollapsibleTrigger>
     </div>
diff --git a/src/shared/ui/SearchBar/SearchBar.svelte b/src/shared/ui/SearchBar/SearchBar.svelte
index 7615891..7cb8cc4 100644
--- a/src/shared/ui/SearchBar/SearchBar.svelte
+++ b/src/shared/ui/SearchBar/SearchBar.svelte
@@ -41,8 +41,8 @@ function handleKeyDown(event: KeyboardEvent) {
 </script>
 
 <div class="relative w-full">
-    <div class="absolute left-5 top-1/2 -translate-y-1/2 pointer-events-none z-10">
-        <AsteriskIcon class="size-4 stroke-gray-400 stroke-[1.5]" />
+    <div class="absolute left-4 sm:left-5 top-1/2 -translate-y-1/2 pointer-events-none z-10">
+        <AsteriskIcon class="size-3 sm:size-4 stroke-gray-400 stroke-[1.5]" />
     </div>
     <Input
         id={id}
@@ -50,7 +50,7 @@ function handleKeyDown(event: KeyboardEvent) {
         bind:value={value}
         onkeydown={handleKeyDown}
         class="
-            h-16 w-full text-base
+            h-12 sm:h-14 md:h-16 w-full text-sm sm:text-base
             backdrop-blur-md bg-white/80
             border border-gray-300/50
             shadow-[0_1px_3px_rgba(0,0,0,0.04)]
@@ -64,9 +64,9 @@ function handleKeyDown(event: KeyboardEvent) {
             text-gray-900
             placeholder:text-gray-400
             placeholder:font-mono
-            placeholder:text-sm
+            placeholder:text-xs sm:placeholder:text-sm
             placeholder:tracking-wide
-            pl-14 pr-6
+            pl-11 sm:pl-14 pr-4 sm:pr-6
             rounded-xl
             transition-all duration-200
             font-medium
diff --git a/src/shared/ui/Section/Section.svelte b/src/shared/ui/Section/Section.svelte
index 6e827e4..22ee69e 100644
--- a/src/shared/ui/Section/Section.svelte
+++ b/src/shared/ui/Section/Section.svelte
@@ -90,23 +90,26 @@ $effect(() => {
     in:fly={flyParams}
     out:fly={flyParams}
 >
-    <div class="flex flex-col gap-2" bind:this={titleContainer}>
-        <div class="flex items-center gap-3 opacity-60">
+    <div class="flex flex-col gap-2 sm:gap-3" bind:this={titleContainer}>
+        <div class="flex items-center gap-2 sm:gap-3 opacity-60">
             {#if icon}
-                {@render icon({ className: 'size-4 stroke-gray-900 stroke-1' })}
-                <div class="w-px h-3 bg-gray-400/50"></div>
+                {@render icon({ className: 'size-3 sm:size-4 stroke-gray-900 stroke-1' })}
+                <div class="w-px h-2.5 sm:h-3 bg-gray-400/50"></div>
             {/if}
             {#if description}
-                {@render description({ className: 'font-mono text-[10px] uppercase tracking-[0.2em] text-gray-600' })}
+                {@render description({ className: 'font-mono text-[9px] sm:text-[10px] uppercase tracking-[0.2em] text-gray-600' })}
             {:else if typeof index === 'number'}
-                <span class="font-mono text-[10px] uppercase tracking-[0.2em] text-gray-600">
+                <span class="font-mono text-[9px] sm:text-[10px] uppercase tracking-[0.2em] text-gray-600">
                     Component_{String(index).padStart(3, '0')}
                 </span>
             {/if}
         </div>
 
         {#if title}
-            {@render title({ className: 'text-5xl md:text-6xl font-semibold tracking-tighter text-gray-900 leading-[0.9]' })}
+            {@render title({
+    className:
+        'text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-semibold tracking-tighter text-gray-900 leading-[0.9]',
+})}
         {/if}
     </div>
 
diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte
index bcd3eef..c40cd99 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte
@@ -180,13 +180,13 @@ $effect(() => {
         aria-label="Font comparison slider"
         onpointerdown={startDragging}
         class="
-            group relative w-full py-16 px-24 sm:py-24 sm:px-24 overflow-hidden
-            rounded-[2.5rem]
-            select-none touch-none cursor-ew-resize min-h-100 flex flex-col justify-center
+            group relative w-full py-8 px-4 sm:py-12 sm:px-8 md:py-16 md:px-12 lg:py-20 lg:px-24 overflow-hidden
+            rounded-xl sm:rounded-2xl md:rounded-[2.5rem]
+            select-none touch-none cursor-ew-resize min-h-[300px] sm:min-h-[400px] md:min-h-[500px] flex flex-col justify-center
             backdrop-blur-lg bg-gradient-to-br from-gray-100/70 via-white/50 to-gray-100/60
             border border-gray-300/40
             shadow-[inset_0_4px_12px_0_rgba(0,0,0,0.12),inset_0_2px_4px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(255,255,255,0.8)]
-            before:absolute before:inset-0 before:rounded-[2.5rem] before:p-[1px]
+            before:absolute before:inset-0 before:rounded-xl sm:before:rounded-2xl md:before:rounded-[2.5rem] before:p-[1px]
             before:bg-gradient-to-br before:from-black/5 before:via-black/2 before:to-transparent
             before:-z-10 before:blur-sm
         "
@@ -197,8 +197,8 @@ $effect(() => {
         {:else}
             <div
                 class="
-                    relative flex flex-col items-center gap-4
-                    text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold leading-[1.15]
+                    relative flex flex-col items-center gap-3 sm:gap-4
+                    text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold leading-[1.15]
                     z-10 pointer-events-none text-center
                     drop-shadow-[0_3px_6px_rgba(255,255,255,0.9)]
                 "
diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/ControlsWrapper.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/ControlsWrapper.svelte
index 7dd0fe7..f446df3 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/ControlsWrapper.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/ControlsWrapper.svelte
@@ -157,9 +157,9 @@ $effect(() => {
                     onfocusin={handleInputFocus}
                     class={cn(
                         isActive
-                            ? 'h-8 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  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-56',
+                            ? '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..."
                 />
@@ -167,7 +167,7 @@ $effect(() => {
         {/snippet}
 
         {#snippet hiddenContent()}
-            <div class="flex justify-between items-center-safe">
+            <div class="flex flex-col sm:flex-row justify-between items-center-safe gap-2 sm:gap-0">
                 <ComboControlV2 control={weightControl} />
                 <ComboControlV2 control={sizeControl} />
                 <ComboControlV2 control={heightControl} />
diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Labels.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Labels.svelte
index 71f0f53..a220822 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Labels.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Labels.svelte
@@ -67,9 +67,9 @@ function selectFontB(font: UnifiedFont) {
         <SelectRoot type="single" disabled={!fontList.length}>
             <SelectTrigger
                 class={cn(
-                    'w-44 sm:w-52 h-9 border border-gray-300/40 bg-white/60 backdrop-blur-sm',
-                    'px-3 rounded-lg transition-all flex items-center justify-between gap-2',
-                    'font-mono text-[11px] tracking-tight font-medium text-gray-900',
+                    'w-36 sm:w-44 md:w-52 h-8 sm:h-9 border border-gray-300/40 bg-white/60 backdrop-blur-sm',
+                    'px-2 sm:px-3 rounded-lg transition-all flex items-center justify-between gap-2',
+                    'font-mono text-[10px] sm:text-[11px] tracking-tight font-medium text-gray-900',
                     'hover:bg-white/80 hover:border-gray-400/60 hover:shadow-sm',
                 )}
             >
@@ -82,20 +82,20 @@ function selectFontB(font: UnifiedFont) {
             <SelectContent
                 class={cn(
                     'bg-white/95 backdrop-blur-xl border border-gray-300/50 shadow-xl',
-                    'w-52 max-h-[280px] overflow-hidden rounded-lg',
+                    'w-44 sm:w-52 max-h-[240px] sm:max-h-[280px] overflow-hidden rounded-lg',
                 )}
                 side="top"
                 {align}
                 sideOffset={8}
                 size="small"
             >
-                <div class="p-1.5">
+                <div class="p-1 sm:p-1.5">
                     <FontVirtualList items={fonts} {weight}>
                         {#snippet children({ item: font })}
                             {@const handleClick = () => selectFont(font)}
                             <SelectItem
                                 value={font.id}
-                                class="data-[highlighted]:bg-gray-100 font-mono text-[11px] px-3 py-2.5 rounded-md cursor-pointer transition-colors"
+                                class="data-[highlighted]:bg-gray-100 font-mono text-[10px] sm:text-[11px] px-2 sm:px-3 py-2 sm:py-2.5 rounded-md cursor-pointer transition-colors"
                                 onclick={handleClick}
                             >
                                 <FontApplicator name={font.name} id={font.id} url={font.styles.regular!}>
@@ -110,16 +110,16 @@ function selectFontB(font: UnifiedFont) {
     </div>
 {/snippet}
 
-<div class="absolute bottom-8 inset-x-6 sm:inset-x-12 flex justify-between items-end pointer-events-none z-20">
+<div class="absolute bottom-4 sm:bottom-6 md:bottom-8 inset-x-4 sm:inset-x-6 md:inset-x-12 flex justify-between items-end pointer-events-none z-20">
     <div
-        class="flex flex-col gap-2 transition-all duration-500 items-start"
+        class="flex flex-col gap-1.5 sm:gap-2 transition-all duration-500 items-start"
         style:opacity={sliderPos < 20 ? 0 : 1}
         style:transform="translateY({sliderPos < 20 ? '8px' : '0px'})"
     >
-        <div class="flex items-center gap-2.5 px-1">
+        <div class="flex items-center gap-2 sm:gap-2.5 px-1">
             <div class="w-1.5 h-1.5 rounded-full bg-indigo-500 shadow-[0_0_6px_rgba(99,102,241,0.6)]"></div>
-            <div class="w-px h-2.5 bg-gray-300/60"></div>
-            <span class="font-mono text-[9px] uppercase tracking-[0.2em] text-gray-500 font-medium">
+            <div class="w-px h-2 sm:h-2.5 bg-gray-300/60"></div>
+            <span class="font-mono text-[8px] sm:text-[9px] uppercase tracking-[0.2em] text-gray-500 font-medium">
                 ch_01
             </span>
         </div>
@@ -134,15 +134,15 @@ function selectFontB(font: UnifiedFont) {
     </div>
 
     <div
-        class="flex flex-col items-end text-right gap-2 transition-all duration-500"
+        class="flex flex-col items-end text-right gap-1.5 sm:gap-2 transition-all duration-500"
         style:opacity={sliderPos > 80 ? 0 : 1}
         style:transform="translateY({sliderPos > 80 ? '8px' : '0px'})"
     >
-        <div class="flex items-center gap-2.5 px-1">
-            <span class="font-mono text-[9px] uppercase tracking-[0.2em] text-gray-500 font-medium">
+        <div class="flex items-center gap-2 sm:gap-2.5 px-1">
+            <span class="font-mono text-[8px] sm:text-[9px] uppercase tracking-[0.2em] text-gray-500 font-medium">
                 ch_02
             </span>
-            <div class="w-px h-2.5 bg-gray-300/60"></div>
+            <div class="w-px h-2 sm:h-2.5 bg-gray-300/60"></div>
             <div class="w-1.5 h-1.5 rounded-full bg-gray-900 shadow-[0_0_6px_rgba(0,0,0,0.4)]"></div>
         </div>
         {@render fontSelector(
diff --git a/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte b/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
index 73ee63c..bab8a35 100644
--- a/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
+++ b/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
@@ -101,25 +101,27 @@ function toggleFilters() {
         >
             <div
                 class="
-                    p-4 rounded-xl
+                    p-3 sm:p-4 md:p-5 rounded-xl
                     backdrop-blur-md bg-white/80
                     border border-gray-300/50
                     shadow-[0_1px_3px_rgba(0,0,0,0.04)]
                 "
             >
-                <div class="flex items-center gap-2.5 mb-4 opacity-70">
+                <div class="flex items-center gap-2 sm:gap-2.5 mb-3 sm:mb-4 opacity-70">
                     <div class="w-1 h-1 rounded-full bg-gray-900"></div>
                     <div class="w-px h-2.5 bg-gray-400/50"></div>
-                    <span class="font-mono text-[9px] uppercase tracking-[0.2em] text-gray-500 font-medium">
+                    <span
+                        class="font-mono text-[9px] sm:text-[10px] uppercase tracking-[0.2em] text-gray-500 font-medium"
+                    >
                         filter_params
                     </span>
                 </div>
 
-                <div class="grid gap-3 grid-cols-[repeat(auto-fit,minmax(8em,14em))]">
+                <div class="grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
                     <Filters />
                 </div>
 
-                <div class="mt-4 pt-4 border-t border-gray-300/40">
+                <div class="mt-3 sm:mt-4 pt-3 sm:pt-4 border-t border-gray-300/40">
                     <FilterControls class="m-auto w-fit" />
                 </div>
             </div>
diff --git a/src/widgets/SampleList/ui/SampleList/SampleList.svelte b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
index 9ffad72..4f609dd 100644
--- a/src/widgets/SampleList/ui/SampleList/SampleList.svelte
+++ b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
@@ -58,7 +58,7 @@ const isLoading = $derived(unifiedFontStore.isFetching || unifiedFontStore.isLoa
     items={unifiedFontStore.fonts}
     total={unifiedFontStore.pagination.total}
     onNearBottom={handleNearBottom}
-    itemHeight={280}
+    itemHeight={220}
     useWindowScroll={true}
     weight={controlManager.weight}
     {isLoading}
diff --git a/src/widgets/TypographySettings/ui/TypographyMenu.svelte b/src/widgets/TypographySettings/ui/TypographyMenu.svelte
index 8c2733f..25f6888 100644
--- a/src/widgets/TypographySettings/ui/TypographyMenu.svelte
+++ b/src/widgets/TypographySettings/ui/TypographyMenu.svelte
@@ -26,15 +26,15 @@ const [send, receive] = crossfade({
 </script>
 
 <div
-    class="w-auto fixed bottom-5 inset-x-0 max-screen z-10 flex justify-center"
+    class="w-auto fixed bottom-4 sm:bottom-5 left-4 right-4 sm:left-auto sm:right-auto sm:inset-x-0 max-screen z-10 flex justify-center"
     in:receive={{ key: 'panel' }}
     out:send={{ key: 'panel' }}
 >
     <ItemRoot
         variant="outline"
-        class="w-auto max-w-max p-2.5 rounded-2xl backdrop-blur-lg"
+        class="w-auto max-w-full sm:max-w-max p-2 sm:p-2.5 rounded-xl sm:rounded-2xl backdrop-blur-lg"
     >
-        <ItemContent class="flex flex-row justify-center items-center max-w-max">
+        <ItemContent class="flex flex-row justify-center items-center max-w-full sm:max-w-max">
             <SetupFontMenu />
         </ItemContent>
     </ItemRoot>