[Frontend][Card Modal] Use modal surface for selected label ring offset

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"

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: {