From fc3496abb61f1d8aaccfa86dfa4e91948018658b Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 6 Apr 2026 15:55:55 +0200
Subject: [PATCH] fix(ui): align SortDropdown styling with SearchFilterBar
 button style

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/components/SortDropdown.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/SortDropdown.svelte b/frontend/src/lib/components/SortDropdown.svelte
index abc7012b..c7dbce0c 100644
--- a/frontend/src/lib/components/SortDropdown.svelte
+++ b/frontend/src/lib/components/SortDropdown.svelte
@@ -13,11 +13,11 @@ function toggleDir() {
 }
 </script>
 
-<div class="inline-flex items-center gap-1">
+<div class="inline-flex items-center">
 	<select
 		role="combobox"
 		bind:value={sort}
-		class="border-brand-sand rounded border bg-white px-2 py-1 font-sans text-sm text-brand-navy focus:ring-2 focus:ring-brand-mint focus:outline-none"
+		class="border border-line bg-muted px-4 py-2.5 text-sm font-bold text-ink-2 transition hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 	>
 		<option value="DATE">{m.docs_sort_date()}</option>
 		<option value="TITLE">{m.docs_sort_title()}</option>
@@ -28,7 +28,7 @@ function toggleDir() {
 	<button
 		type="button"
 		onclick={toggleDir}
-		class="border-brand-sand hover:bg-brand-sand flex items-center justify-center rounded border bg-white px-2 py-1 text-sm text-brand-navy transition-colors"
+		class="-ml-px flex items-center justify-center border border-line bg-muted px-3 py-2.5 text-sm font-bold text-ink-2 transition hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 		aria-label={dir === 'asc' ? 'Aufsteigend sortieren' : 'Absteigend sortieren'}
 	>
 		{dir === 'asc' ? '↑' : '↓'}