From 69e108adf1aa5695bd075fd9f0050a81f9fd3ab1 Mon Sep 17 00:00:00 2001
From: Mees Frensel <33722705+meesfrensel@users.noreply.github.com>
Date: Fri, 18 Sep 2026 22:35:07 +0200
Subject: [PATCH] fix(web): queue buttons focus outline (#31657)

---
 web/src/routes/admin/queues/QueueCard.svelte       | 4 ++--
 web/src/routes/admin/queues/QueueCardButton.svelte | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/routes/admin/queues/QueueCard.svelte b/web/src/routes/admin/queues/QueueCard.svelte
index 9954cbd12..645feff87 100644
--- a/web/src/routes/admin/queues/QueueCard.svelte
+++ b/web/src/routes/admin/queues/QueueCard.svelte
@@ -43,7 +43,7 @@
   const commonClasses = 'flex place-items-center justify-between w-full py-2 sm:py-4 pe-4 ps-6';
 </script>
 
-<div class="sm:rounded-9 flex flex-col overflow-hidden rounded-2xl bg-gray-100 sm:flex-row dark:bg-immich-dark-gray">
+<div class="flex flex-col rounded-2xl bg-gray-100 sm:flex-row dark:bg-immich-dark-gray">
   <div class="flex w-full flex-col">
     {#if queue.isPaused}
       <QueueCardBadge color="warning">{$t('paused')}</QueueCardBadge>
@@ -119,7 +119,7 @@
       </div>
     </div>
   </div>
-  <div class="flex w-full flex-row overflow-hidden sm:w-32 sm:flex-col">
+  <div class="flex w-full flex-row sm:w-32 sm:flex-col">
     {#if disabled}
       <QueueCardButton
         disabled={true}
diff --git a/web/src/routes/admin/queues/QueueCardButton.svelte b/web/src/routes/admin/queues/QueueCardButton.svelte
index f3fdce189..e4ffe3ed2 100644
--- a/web/src/routes/admin/queues/QueueCardButton.svelte
+++ b/web/src/routes/admin/queues/QueueCardButton.svelte
@@ -16,7 +16,7 @@
   let { color, disabled = false, onClick = () => {}, children }: Props = $props();
 
   const styles = tv({
-    base: 'flex size-full flex-col place-content-center place-items-center gap-2 px-8 py-2 text-xs text-gray-600 transition-colors dark:text-gray-200',
+    base: 'flex size-full flex-col place-content-center place-items-center gap-2 px-6 py-2 text-xs text-gray-600 -outline-offset-2 outline-primary transition-colors first:rounded-es-2xl last:rounded-ee-2xl focus-visible:outline-2 sm:first:rounded-se-2xl sm:first:rounded-es-none dark:text-gray-200',
     variants: {
       color: {
         'light-gray': 'bg-gray-300/80 dark:bg-gray-700',