From 387550086a00b5a1b8221c1528e6f616430e7b3c Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Fri, 22 Nov 2024 18:17:57 +0100
Subject: frontend: Improve highlighting of current focus

Elements now have a consistent style applied to them when in focus.
Additionally, select elements will now have an outline when focused,
making it easier to notice the currently selected element.
---
 frontend/src/lib/tabs/Tab.svelte  | 2 +-
 frontend/src/lib/tabs/Tabs.svelte | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'frontend/src/lib/tabs')

diff --git a/frontend/src/lib/tabs/Tab.svelte b/frontend/src/lib/tabs/Tab.svelte
index 0a6be57..cddd072 100644
--- a/frontend/src/lib/tabs/Tab.svelte
+++ b/frontend/src/lib/tabs/Tab.svelte
@@ -8,7 +8,7 @@
 </script>
 
 {#if $context.current === id}
-	<div class="h-full overflow-auto py-2 pe-3" in:fade={fadeDefault}>
+	<div class="h-full overflow-auto py-2 pe-3 ps-1" in:fade={fadeDefault}>
 		<slot />
 	</div>
 {/if}
diff --git a/frontend/src/lib/tabs/Tabs.svelte b/frontend/src/lib/tabs/Tabs.svelte
index 09cdbdd..fd5d08e 100644
--- a/frontend/src/lib/tabs/Tabs.svelte
+++ b/frontend/src/lib/tabs/Tabs.svelte
@@ -8,13 +8,13 @@
 
 <div class="flex h-full max-h-full flex-col">
 	<nav>
-		<ul class="me-3 flex border-b-2 border-slate-700 text-sm">
+		<ul class="me-3 ms-1 flex border-b-2 border-slate-700 text-sm">
 			{#each Object.entries($context.tabs) as [id, { title, badge }]}
 				<li class="-mb-0.5">
 					<button
 						type="button"
 						class:active={$context.current === id}
-						class="relative flex gap-1 p-1 px-3 hover:border-b-2 hover:border-slate-200"
+						class="focus-background relative flex gap-1 p-1 px-3 hover:border-b-2 hover:border-slate-200"
 						on:click={() => ($context.current = id)}
 					>
 						{#if badge}
-- 
cgit v1.2.3-2-gb3c3