Fix z-index issue in dropdown

kirbydesign · Nov 28, 2024 · 0169ac6 · 0169ac6
1 parent cc199b4
commit 0169ac6
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/libs/core/src/scss/interaction-state/_focus.scss b/libs/core/src/scss/interaction-state/_focus.scss
@@ -95,5 +95,4 @@
     #{$shadow},
     0 0 0 $gap #{utils.get-color('background-color')},
     0 0 0 $gap + $stroke-width utils.$focus-ring-color;
-  z-index: utils.z('default');
 }
diff --git a/libs/designsystem/calendar/src/calendar.component.scss b/libs/designsystem/calendar/src/calendar.component.scss
@@ -91,6 +91,11 @@ td {
   height: $day-width;
   margin: utils.size('xxxs') 0;
   font-size: utils.font-size('n');
+
+  &:focus {
+    // In narrow viewport day buttons can be completely side by side. This makes sure the focus outline appears on top of adjacent buttons.
+    z-index: utils.z('default');
+  }
 }
 
 button[aria-disabled='true'] {