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

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>