glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add tailwind responsive classes

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-06 14:48:44 +03:00
parent a26bcbecff
commit fedf3f88e7
14 changed files with 106 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/ui/Layout.svelte
View File

@@ -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?.()}

22
src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte
View File

@@ -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>

12
src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
View File

@@ -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>

30
src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
View File

@@ -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>

35
src/routes/Page.svelte
View File

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

8
src/shared/ui/CheckboxFilter/CheckboxFilter.svelte
View File

@@ -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>

10
src/shared/ui/SearchBar/SearchBar.svelte
View File

@@ -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

17
src/shared/ui/Section/Section.svelte
View File

@@ -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>

12
src/widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte
View File

@@ -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)]
"

8
src/widgets/ComparisonSlider/ui/ComparisonSlider/components/ControlsWrapper.svelte
View File

@@ -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} />

30
src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Labels.svelte
View File

@@ -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(

12
src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
View File

@@ -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>

2
src/widgets/SampleList/ui/SampleList/SampleList.svelte
View File

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

6
src/widgets/TypographySettings/ui/TypographyMenu.svelte
View File

@@ -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>