From bde40981cbc9dcfc149c533a56d5a2331a003d14 Mon Sep 17 00:00:00 2001
From: Frederic Cabassut <frederic.cabassut@arte.tv>
Date: Mon, 9 Mar 2026 21:44:31 +0100
Subject: [PATCH] fix: stack tag filter and sort buttons vertically on mobile

Tags get full width for horizontal scrolling, sort buttons sit
below aligned to the right. Side by side on desktop.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/lib/components/NotesView.svelte    | 2 +-
 src/lib/components/SortSelector.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/NotesView.svelte b/src/lib/components/NotesView.svelte
index 223a14e..c2fb90c 100644
--- a/src/lib/components/NotesView.svelte
+++ b/src/lib/components/NotesView.svelte
@@ -77,7 +77,7 @@
 {/if}
 
 {#if filter === 'all'}
-	<div class="mb-4 flex flex-wrap items-start justify-between gap-3">
+	<div class="mb-4 flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
 		<TagFilter />
 		<SortSelector />
 	</div>
diff --git a/src/lib/components/SortSelector.svelte b/src/lib/components/SortSelector.svelte
index 10c5acc..94c3433 100644
--- a/src/lib/components/SortSelector.svelte
+++ b/src/lib/components/SortSelector.svelte
@@ -11,7 +11,7 @@
 	];
 </script>
 
-<div class="inline-flex rounded-sm border border-[var(--border-subtle)]" data-testid="sort-selector">
+<div class="inline-flex self-end rounded-sm border border-[var(--border-subtle)]" data-testid="sort-selector">
 	{#each modes as mode}
 		<button
 			onclick={() => sortMode.set(mode.value)}