From ddd85611d6410b0279f630d5d30a6a6264d4e371 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sat, 5 Sep 2026 03:21:48 +0100
Subject: [PATCH] fix: use modal surface for selected label ring

---
 .../board/card-modal/CardModalLabels.vue      |  2 +-
 .../src/tests/components/CardModal.spec.ts    | 26 +++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/frontend/taskdeck-web/src/components/board/card-modal/CardModalLabels.vue b/frontend/taskdeck-web/src/components/board/card-modal/CardModalLabels.vue
index 51b193c57..51734faa6 100644
--- a/frontend/taskdeck-web/src/components/board/card-modal/CardModalLabels.vue
+++ b/frontend/taskdeck-web/src/components/board/card-modal/CardModalLabels.vue
@@ -20,7 +20,7 @@ const selectedLabelIds = defineModel<string[]>('selectedLabelIds', { required: t
         class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-all cursor-pointer"
         :class="[
           selectedLabelIds.includes(label.id)
-            ? 'text-white ring-2 ring-offset-2 ring-primary td-dynamic-bg'
+            ? 'text-white ring-2 ring-offset-2 ring-offset-surface-container ring-primary td-dynamic-bg'
             : 'text-on-surface bg-surface-container-high hover:bg-surface-container-highest',
         ]"
         :style="selectedLabelIds.includes(label.id) ? { '--td-dynamic-color': label.colorHex } : undefined"
diff --git a/frontend/taskdeck-web/src/tests/components/CardModal.spec.ts b/frontend/taskdeck-web/src/tests/components/CardModal.spec.ts
index 883de41f9..aabf5d522 100644
--- a/frontend/taskdeck-web/src/tests/components/CardModal.spec.ts
+++ b/frontend/taskdeck-web/src/tests/components/CardModal.spec.ts
@@ -626,6 +626,32 @@ describe('CardModal', () => {
     expect(bugLabelCheckbox.element.checked).toBe(true)
   })
 
+  it('uses the card modal surface for the selected label ring offset', () => {
+    const cardWithLabel = {
+      ...card,
+      labels: [labels[0]],
+    }
+
+    const wrapper = mount(CardModal, {
+      props: {
+        card: cardWithLabel,
+        isOpen: true,
+        labels,
+      },
+    })
+
+    const selectedInput = wrapper.get('#label-label-1')
+    const unselectedInput = wrapper.get('#label-label-2')
+    const selectedLabel = selectedInput.element.closest('label')
+    const unselectedLabel = unselectedInput.element.closest('label')
+
+    expect(selectedLabel).toBeDefined()
+    expect(unselectedLabel).toBeDefined()
+    expect(selectedLabel!.classList).toContain('ring-offset-surface-container')
+    expect(selectedLabel!.classList).toContain('ring-offset-2')
+    expect(unselectedLabel!.classList).not.toContain('ring-offset-surface-container')
+  })
+
   it('should create a new comment from modal comment input', async () => {
     const wrapper = mount(CardModal, {
       props: {