From ae9f0d92f3b0c50d7715ede99f9f7b66f2aa2d07 Mon Sep 17 00:00:00 2001
From: Jan-Peter Klein <jan-peter.klein@skymatic.de>
Date: Mon, 27 Apr 2026 11:50:39 +0200
Subject: [PATCH 1/8] switch EmergencyBadge tooltip to popover with anchor
 positioning for mobile tap support

---
 .../emergencyaccess/EmergencyBadge.vue        | 114 ++++++++++++++----
 1 file changed, 88 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/emergencyaccess/EmergencyBadge.vue b/frontend/src/components/emergencyaccess/EmergencyBadge.vue
index 174796e90..63ba5d097 100644
--- a/frontend/src/components/emergencyaccess/EmergencyBadge.vue
+++ b/frontend/src/components/emergencyaccess/EmergencyBadge.vue
@@ -1,34 +1,40 @@
 <template>
-  <div v-if="type !== 'none'" class="relative mr-3 group/badge">
-    <!-- Badge -->
-    <span 
-      class="inline-flex items-center gap-2 rounded-full px-2 py-2 text-xs font-medium cursor-default ring-1" 
+  <div v-if="type !== 'none'" class="relative mr-3 inline-block">
+    <button
+      type="button"
+      class="inline-flex items-center gap-2 rounded-full px-2 py-2 text-xs font-medium cursor-default ring-1 outline-none focus-visible:ring-2"
       :class="badgeClasses"
+      :style="{ anchorName: anchor }"
+      :aria-label="title"
+      @mouseenter="showIfHover"
+      @mouseleave="hideIfHover"
+      @focus="showIfHover"
+      @blur="hideIfHover"
+      @click.stop="toggleOnTouch"
     >
       <ExclamationTriangleIcon class="h-4 w-4" :class="iconColor" />
-    </span>
+    </button>
 
-    <!-- Tooltip -->
-    <div 
-      class="invisible opacity-0 group-hover/badge:visible group-hover/badge:opacity-100 transition-opacity duration-150 absolute -top-2 transform -translate-y-full w-max max-w-xs z-20" 
-      :class="positionClasses"
+    <div
+      ref="panel"
+      popover="auto"
+      class="popover-panel px-2 py-1 rounded shadow-sm border text-xs hyphens-auto relative"
+      :class="[tooltipClasses, positionAreaClass]"
+      :style="{ positionAnchor: anchor }"
+      @click.stop.prevent
     >
-      <div class="px-2 py-1 rounded shadow-sm text-xs hyphens-auto border relative" :class="tooltipClasses">
-        <b>{{ title }}</b><br />
-        <span>{{ message }}</span>
-
-        <!-- Arrow -->
-        <div
-          class="absolute bottom-0 transform translate-y-1/2 rotate-45 w-2 h-2 border-r border-b"
-          :class="[arrowClasses, arrowPositionClasses]"
-        ></div>
-      </div>
+      <b>{{ title }}</b><br />
+      <span>{{ message }}</span>
+      <div
+        class="absolute bottom-0 translate-y-1/2 rotate-45 w-2 h-2 border-r border-b"
+        :class="[arrowClasses, arrowPositionClasses]"
+      ></div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref, useId } from 'vue';
 import { ExclamationTriangleIcon } from '@heroicons/vue/24/solid';
 
 const props = defineProps<{
@@ -38,15 +44,42 @@ const props = defineProps<{
   position?: 'center' | 'left' | 'right';
 }>();
 
-const positionClasses = computed(() => {
+const anchor = `--ea-anchor-${useId()}`;
+const panel = ref<HTMLElement | null>(null);
+
+function isHoverDevice() {
+  return window.matchMedia('(hover: hover) and (pointer: fine)').matches;
+}
+
+function showIfHover() {
+  if (!isHoverDevice()) return;
+  const p = panel.value;
+  if (p && !p.matches(':popover-open')) p.showPopover();
+}
+
+function hideIfHover() {
+  if (!isHoverDevice()) return;
+  const p = panel.value;
+  if (p?.matches(':popover-open')) p.hidePopover();
+}
+
+function toggleOnTouch() {
+  if (isHoverDevice()) return;
+  const p = panel.value;
+  if (!p) return;
+  if (p.matches(':popover-open')) p.hidePopover();
+  else p.showPopover();
+}
+
+const positionAreaClass = computed(() => {
   switch (props.position) {
     case 'left':
-      return 'left-0';
+      return 'pos-left';
     case 'right':
-      return 'right-0';
+      return 'pos-right';
     case 'center':
     default:
-      return 'left-1/2 -translate-x-1/2';
+      return 'pos-center';
   }
 });
 
@@ -92,9 +125,9 @@ const arrowClasses = computed(() => {
 const arrowPositionClasses = computed(() => {
   switch (props.position) {
     case 'left':
-      return 'left-2';
+      return 'left-3';
     case 'right':
-      return 'right-2';
+      return 'right-3';
     case 'center':
     default:
       return 'left-1/2 -translate-x-1/2';
@@ -105,3 +138,32 @@ const iconColor = computed(() => {
   return props.type === 'broken' ? 'text-red-600' : 'text-yellow-500';
 });
 </script>
+
+<style scoped>
+.popover-panel {
+  inset: auto;
+  bottom: anchor(top);
+  margin: 0 0 0.5rem 0;
+  width: fit-content;
+  max-width: min(20rem, calc(100vw - 2rem));
+  overflow: visible;
+}
+
+.popover-panel.pos-center {
+  left: calc(anchor(center) - min(calc(anchor(center) - 1rem), calc(100vw - anchor(center) - 1rem), 10rem));
+  right: calc(anchor(center) - min(calc(anchor(center) - 1rem), calc(100vw - anchor(center) - 1rem), 10rem));
+  margin-inline: auto;
+}
+
+.popover-panel.pos-left {
+  left: max(1.5rem, anchor(left));
+  right: 1rem;
+  margin-right: auto;
+}
+
+.popover-panel.pos-right {
+  left: 1rem;
+  right: max(1rem, anchor(right));
+  margin-left: auto;
+}
+</style>

From 39935ac32024e2dd472083dbff1ef016563766e1 Mon Sep 17 00:00:00 2001
From: Jan-Peter Klein <jan-peter.klein@skymatic.de>
Date: Mon, 27 Apr 2026 14:40:47 +0200
Subject: [PATCH 2/8] simplify EmergencyBadge to warning/error types and drop
 position prop

---
 frontend/src/components/VaultList.vue         |   6 +-
 .../EmergencyAccessVaultList.vue              |  14 +--
 .../emergencyaccess/EmergencyBadge.vue        | 100 ++----------------
 3 files changed, 16 insertions(+), 104 deletions(-)

diff --git a/frontend/src/components/VaultList.vue b/frontend/src/components/VaultList.vue
index d7e4bff8f..c9b0e2063 100644
--- a/frontend/src/components/VaultList.vue
+++ b/frontend/src/components/VaultList.vue
@@ -95,17 +95,15 @@
             <div v-if="ownedVaults?.some(ownedVault => ownedVault.id == vault.id) && !isCommunityLicense && settings?.enableEmergencyAccess">
               <EmergencyBadge
                 v-if="settings && settings.defaultMinMembers > emergencyAccessMembers(vault).length"
-                type="insufficientCouncilMembers"
+                type="warning"
                 :title="t('emergencyAccess.badge.insufficientCouncilMembers.title')"
                 :message="t('emergencyAccess.badge.insufficientCouncilMembers.message', [settings.defaultMinMembers])"
-                position="right"
               />
               <EmergencyBadge
                 v-else-if="vault.requiredEmergencyKeyShares > emergencyAccessMembers(vault).length"
-                type="broken"
+                type="error"
                 :title="t('emergencyAccess.badge.broken.title')"
                 :message="t('emergencyAccess.badge.broken.message')"
-                position="right"
               />
             </div>
             <div class="ml-5 shrink-0">
diff --git a/frontend/src/components/emergencyaccess/EmergencyAccessVaultList.vue b/frontend/src/components/emergencyaccess/EmergencyAccessVaultList.vue
index 4af0db197..ea8f6dae7 100644
--- a/frontend/src/components/emergencyaccess/EmergencyAccessVaultList.vue
+++ b/frontend/src/components/emergencyaccess/EmergencyAccessVaultList.vue
@@ -98,23 +98,20 @@
 
                 <div class="flex flex-wrap items-center gap-2 sm:justify-end" @click.stop>
                   <EmergencyBadge
-                    v-if="isBroken(vault)"
-                    type="broken"
+                    v-if="!isBroken(vault)"
+                    type="warning"
                     :title="t('emergencyAccess.badge.broken.title')"
                     :message="t('emergencyAccess.badge.broken.message')"
                   />
-
                   <EmergencyBadge
                     v-if="settings && settings.defaultMinMembers > emergencyAccessMembers(vault).length"
-                    type="insufficientCouncilMembers"
+                    type="warning"
                     :title="t('emergencyAccess.badge.insufficientCouncilMembers.title')"
                     :message="t('emergencyAccess.badge.insufficientCouncilMembers.message', [settings.defaultMinMembers])"
-                    position="right"
                   />
-
                   <EmergencyBadge
                     v-else-if="vault.requiredEmergencyKeyShares === emergencyAccessMembers(vault).length"
-                    type="noRedundancy"
+                    type="warning"
                     :title="t('emergencyAccess.badge.noRedundancy.title')"
                     :message="t('emergencyAccess.badge.noRedundancy.message')"
                   />
@@ -155,10 +152,9 @@
                   <div class="mt-auto pt-2 flex flex-wrap items-center gap-2">
                     <EmergencyBadge
                       v-if="!isEmergencyKeyShareHolder(vault)"
-                      type="notCouncil"
+                      type="warning"
                       :title="t('emergencyAccess.badge.notCouncil.title')"
                       :message="t('emergencyAccess.badge.notCouncil.message')"
-                      position="left"
                     />
                     <EmergencyProcessButton
                       v-if="getProcessByType(vault, 'COUNCIL_CHANGE')"
diff --git a/frontend/src/components/emergencyaccess/EmergencyBadge.vue b/frontend/src/components/emergencyaccess/EmergencyBadge.vue
index 63ba5d097..ae8e6baaf 100644
--- a/frontend/src/components/emergencyaccess/EmergencyBadge.vue
+++ b/frontend/src/components/emergencyaccess/EmergencyBadge.vue
@@ -1,9 +1,9 @@
 <template>
-  <div v-if="type !== 'none'" class="relative mr-3 inline-block">
+  <div class="relative mr-3 inline-block">
     <button
       type="button"
       class="inline-flex items-center gap-2 rounded-full px-2 py-2 text-xs font-medium cursor-default ring-1 outline-none focus-visible:ring-2"
-      :class="badgeClasses"
+      :class="isError ? 'bg-red-100 ring-red-300/70 text-red-800' : 'bg-yellow-50 ring-yellow-300/70 text-yellow-800'"
       :style="{ anchorName: anchor }"
       :aria-label="title"
       @mouseenter="showIfHover"
@@ -12,22 +12,22 @@
       @blur="hideIfHover"
       @click.stop="toggleOnTouch"
     >
-      <ExclamationTriangleIcon class="h-4 w-4" :class="iconColor" />
+      <ExclamationTriangleIcon class="h-4 w-4" :class="isError ? 'text-red-600' : 'text-yellow-500'" />
     </button>
 
     <div
       ref="panel"
       popover="auto"
       class="popover-panel px-2 py-1 rounded shadow-sm border text-xs hyphens-auto relative"
-      :class="[tooltipClasses, positionAreaClass]"
+      :class="isError ? 'bg-red-50 border-red-300 text-red-900' : 'bg-yellow-50 border-yellow-300 text-yellow-900'"
       :style="{ positionAnchor: anchor }"
       @click.stop.prevent
     >
       <b>{{ title }}</b><br />
       <span>{{ message }}</span>
       <div
-        class="absolute bottom-0 translate-y-1/2 rotate-45 w-2 h-2 border-r border-b"
-        :class="[arrowClasses, arrowPositionClasses]"
+        class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 rotate-45 w-2 h-2 border-r border-b"
+        :class="isError ? 'bg-red-50 border-red-300' : 'bg-yellow-50 border-yellow-300'"
       ></div>
     </div>
   </div>
@@ -38,14 +38,14 @@ import { computed, ref, useId } from 'vue';
 import { ExclamationTriangleIcon } from '@heroicons/vue/24/solid';
 
 const props = defineProps<{
-  type: 'notCouncil' | 'broken' | 'noRedundancy' | 'insufficientCouncilMembers' | 'none';
+  type: 'warning' | 'error';
   title: string;
   message: string;
-  position?: 'center' | 'left' | 'right';
 }>();
 
 const anchor = `--ea-anchor-${useId()}`;
-const panel = ref<HTMLElement | null>(null);
+const panel = ref<HTMLElement | undefined>();
+const isError = computed(() => props.type === 'error');
 
 function isHoverDevice() {
   return window.matchMedia('(hover: hover) and (pointer: fine)').matches;
@@ -70,73 +70,6 @@ function toggleOnTouch() {
   if (p.matches(':popover-open')) p.hidePopover();
   else p.showPopover();
 }
-
-const positionAreaClass = computed(() => {
-  switch (props.position) {
-    case 'left':
-      return 'pos-left';
-    case 'right':
-      return 'pos-right';
-    case 'center':
-    default:
-      return 'pos-center';
-  }
-});
-
-const badgeClasses = computed(() => {
-  switch (props.type) {
-    case 'notCouncil':
-    case 'insufficientCouncilMembers':
-    case 'noRedundancy':
-      return 'bg-yellow-50 ring-yellow-300/70 text-yellow-800';
-    case 'broken':
-      return 'bg-red-100 ring-red-300/70 text-red-800';
-    default:
-      return '';
-  }
-});
-
-const tooltipClasses = computed(() => {
-  switch (props.type) {
-    case 'notCouncil':
-    case 'insufficientCouncilMembers':
-    case 'noRedundancy':
-      return 'bg-yellow-50 border-yellow-300 text-yellow-900';
-    case 'broken':
-      return 'bg-red-50 border-red-300 text-red-900';
-    default:
-      return '';
-  }
-});
-
-const arrowClasses = computed(() => {
-  switch (props.type) {
-    case 'notCouncil':
-    case 'insufficientCouncilMembers':
-    case 'noRedundancy':
-      return 'bg-yellow-50 border-yellow-300';
-    case 'broken':
-      return 'bg-red-50 border-red-300';
-    default:
-      return '';
-  }
-});
-
-const arrowPositionClasses = computed(() => {
-  switch (props.position) {
-    case 'left':
-      return 'left-3';
-    case 'right':
-      return 'right-3';
-    case 'center':
-    default:
-      return 'left-1/2 -translate-x-1/2';
-  }
-});
-
-const iconColor = computed(() => {
-  return props.type === 'broken' ? 'text-red-600' : 'text-yellow-500';
-});
 </script>
 
 <style scoped>
@@ -147,23 +80,8 @@ const iconColor = computed(() => {
   width: fit-content;
   max-width: min(20rem, calc(100vw - 2rem));
   overflow: visible;
-}
-
-.popover-panel.pos-center {
   left: calc(anchor(center) - min(calc(anchor(center) - 1rem), calc(100vw - anchor(center) - 1rem), 10rem));
   right: calc(anchor(center) - min(calc(anchor(center) - 1rem), calc(100vw - anchor(center) - 1rem), 10rem));
   margin-inline: auto;
 }
-
-.popover-panel.pos-left {
-  left: max(1.5rem, anchor(left));
-  right: 1rem;
-  margin-right: auto;
-}
-
-.popover-panel.pos-right {
-  left: 1rem;
-  right: max(1rem, anchor(right));
-  margin-left: auto;
-}
 </style>

From 0b6c801d5deaf277cdbeee5ed1e59f214e637f77 Mon Sep 17 00:00:00 2001
From: Jan-Peter Klein <jan-peter.klein@skymatic.de>
Date: Mon, 27 Apr 2026 14:44:19 +0200
Subject: [PATCH 3/8] undo

---
 .../src/components/emergencyaccess/EmergencyAccessVaultList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/emergencyaccess/EmergencyAccessVaultList.vue b/frontend/src/components/emergencyaccess/EmergencyAccessVaultList.vue
index ea8f6dae7..63c462c68 100644
--- a/frontend/src/components/emergencyaccess/EmergencyAccessVaultList.vue
+++ b/frontend/src/components/emergencyaccess/EmergencyAccessVaultList.vue
@@ -98,7 +98,7 @@
 
                 <div class="flex flex-wrap items-center gap-2 sm:justify-end" @click.stop>
                   <EmergencyBadge
-                    v-if="!isBroken(vault)"
+                    v-if="isBroken(vault)"
                     type="warning"
                     :title="t('emergencyAccess.badge.broken.title')"
                     :message="t('emergencyAccess.badge.broken.message')"

From c4e252498e3409f4138b7e0d6f264b144ec35860 Mon Sep 17 00:00:00 2001
From: Jan-Peter Klein <jan-peter.klein@skymatic.de>
Date: Mon, 27 Apr 2026 14:52:30 +0200
Subject: [PATCH 4/8] use error type for broken vault EmergencyBadge

---
 .../src/components/emergencyaccess/EmergencyAccessVaultList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/emergencyaccess/EmergencyAccessVaultList.vue b/frontend/src/components/emergencyaccess/EmergencyAccessVaultList.vue
index 63c462c68..99115dbcf 100644
--- a/frontend/src/components/emergencyaccess/EmergencyAccessVaultList.vue
+++ b/frontend/src/components/emergencyaccess/EmergencyAccessVaultList.vue
@@ -99,7 +99,7 @@
                 <div class="flex flex-wrap items-center gap-2 sm:justify-end" @click.stop>
                   <EmergencyBadge
                     v-if="isBroken(vault)"
-                    type="warning"
+                    type="error"
                     :title="t('emergencyAccess.badge.broken.title')"
                     :message="t('emergencyAccess.badge.broken.message')"
                   />

From 4babd92883a62cb08765a99c1a73e10397e85feb Mon Sep 17 00:00:00 2001
From: Jan-Peter Klein <jan-peter.klein@skymatic.de>
Date: Mon, 27 Apr 2026 15:31:38 +0200
Subject: [PATCH 5/8] replace popover API with CSS-only hover tooltip in
 EmergencyBadge

---
 .../emergencyaccess/EmergencyBadge.vue        | 63 +++++++------------
 1 file changed, 21 insertions(+), 42 deletions(-)

diff --git a/frontend/src/components/emergencyaccess/EmergencyBadge.vue b/frontend/src/components/emergencyaccess/EmergencyBadge.vue
index ae8e6baaf..31d66c8f7 100644
--- a/frontend/src/components/emergencyaccess/EmergencyBadge.vue
+++ b/frontend/src/components/emergencyaccess/EmergencyBadge.vue
@@ -1,27 +1,20 @@
 <template>
-  <div class="relative mr-3 inline-block">
-    <button
-      type="button"
+  <div class="badge-wrapper relative mr-3 inline-block" @click.stop.prevent>
+    <span
+      tabindex="0"
       class="inline-flex items-center gap-2 rounded-full px-2 py-2 text-xs font-medium cursor-default ring-1 outline-none focus-visible:ring-2"
       :class="isError ? 'bg-red-100 ring-red-300/70 text-red-800' : 'bg-yellow-50 ring-yellow-300/70 text-yellow-800'"
       :style="{ anchorName: anchor }"
-      :aria-label="title"
-      @mouseenter="showIfHover"
-      @mouseleave="hideIfHover"
-      @focus="showIfHover"
-      @blur="hideIfHover"
-      @click.stop="toggleOnTouch"
+      :aria-label="title"   
     >
       <ExclamationTriangleIcon class="h-4 w-4" :class="isError ? 'text-red-600' : 'text-yellow-500'" />
-    </button>
+    </span>
 
     <div
-      ref="panel"
-      popover="auto"
-      class="popover-panel px-2 py-1 rounded shadow-sm border text-xs hyphens-auto relative"
+      class="tooltip-panel px-2 py-1 rounded shadow-sm border text-xs hyphens-auto"
       :class="isError ? 'bg-red-50 border-red-300 text-red-900' : 'bg-yellow-50 border-yellow-300 text-yellow-900'"
       :style="{ positionAnchor: anchor }"
-      @click.stop.prevent
+      role="tooltip"
     >
       <b>{{ title }}</b><br />
       <span>{{ message }}</span>
@@ -34,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useId } from 'vue';
+import { computed, useId } from 'vue';
 import { ExclamationTriangleIcon } from '@heroicons/vue/24/solid';
 
 const props = defineProps<{
@@ -44,44 +37,30 @@ const props = defineProps<{
 }>();
 
 const anchor = `--ea-anchor-${useId()}`;
-const panel = ref<HTMLElement | undefined>();
 const isError = computed(() => props.type === 'error');
-
-function isHoverDevice() {
-  return window.matchMedia('(hover: hover) and (pointer: fine)').matches;
-}
-
-function showIfHover() {
-  if (!isHoverDevice()) return;
-  const p = panel.value;
-  if (p && !p.matches(':popover-open')) p.showPopover();
-}
-
-function hideIfHover() {
-  if (!isHoverDevice()) return;
-  const p = panel.value;
-  if (p?.matches(':popover-open')) p.hidePopover();
-}
-
-function toggleOnTouch() {
-  if (isHoverDevice()) return;
-  const p = panel.value;
-  if (!p) return;
-  if (p.matches(':popover-open')) p.hidePopover();
-  else p.showPopover();
-}
 </script>
 
 <style scoped>
-.popover-panel {
+.tooltip-panel {
+  position: fixed;
   inset: auto;
   bottom: anchor(top);
   margin: 0 0 0.5rem 0;
   width: fit-content;
   max-width: min(20rem, calc(100vw - 2rem));
-  overflow: visible;
   left: calc(anchor(center) - min(calc(anchor(center) - 1rem), calc(100vw - anchor(center) - 1rem), 10rem));
   right: calc(anchor(center) - min(calc(anchor(center) - 1rem), calc(100vw - anchor(center) - 1rem), 10rem));
   margin-inline: auto;
+  z-index: 20;
+
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 150ms, visibility 150ms;
+}
+
+.badge-wrapper:hover .tooltip-panel,
+.badge-wrapper:focus-within .tooltip-panel {
+  visibility: visible;
+  opacity: 1;
 }
 </style>

From aace8465e0a2b08ff2ae3ed7aca2c1c6e62f303d Mon Sep 17 00:00:00 2001
From: Jan-Peter Klein <jan-peter.klein@skymatic.de>
Date: Mon, 27 Apr 2026 17:09:52 +0200
Subject: [PATCH 6/8] remove arrow, add min-width and flip-block fallback to
 EmergencyBadge tooltip

---
 .../components/emergencyaccess/EmergencyBadge.vue  | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/emergencyaccess/EmergencyBadge.vue b/frontend/src/components/emergencyaccess/EmergencyBadge.vue
index 31d66c8f7..a85e06f50 100644
--- a/frontend/src/components/emergencyaccess/EmergencyBadge.vue
+++ b/frontend/src/components/emergencyaccess/EmergencyBadge.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="badge-wrapper relative mr-3 inline-block" @click.stop.prevent>
+  <div class="badge-wrapper mr-3 inline-block" @click.stop.prevent>
     <span
       tabindex="0"
       class="inline-flex items-center gap-2 rounded-full px-2 py-2 text-xs font-medium cursor-default ring-1 outline-none focus-visible:ring-2"
@@ -18,10 +18,6 @@
     >
       <b>{{ title }}</b><br />
       <span>{{ message }}</span>
-      <div
-        class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 rotate-45 w-2 h-2 border-r border-b"
-        :class="isError ? 'bg-red-50 border-red-300' : 'bg-yellow-50 border-yellow-300'"
-      ></div>
     </div>
   </div>
 </template>
@@ -43,15 +39,15 @@ const isError = computed(() => props.type === 'error');
 <style scoped>
 .tooltip-panel {
   position: fixed;
-  inset: auto;
   bottom: anchor(top);
-  margin: 0 0 0.5rem 0;
-  width: fit-content;
-  max-width: min(20rem, calc(100vw - 2rem));
   left: calc(anchor(center) - min(calc(anchor(center) - 1rem), calc(100vw - anchor(center) - 1rem), 10rem));
   right: calc(anchor(center) - min(calc(anchor(center) - 1rem), calc(100vw - anchor(center) - 1rem), 10rem));
   margin-inline: auto;
+  margin-block-end: 0.5rem;
+  width: fit-content;
+  min-width: 10rem;
   z-index: 20;
+  position-try-fallbacks: flip-block;
 
   visibility: hidden;
   opacity: 0;

From bc3dd54d1de54fc1f1c0623d038746438333bf0b Mon Sep 17 00:00:00 2001
From: Jan-Peter Klein <jan-peter.klein@skymatic.de>
Date: Tue, 28 Apr 2026 13:10:50 +0200
Subject: [PATCH 7/8] clean up EmergencyBadge style

---
 .../emergencyaccess/EmergencyBadge.vue        | 36 ++++++-------------
 1 file changed, 10 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/emergencyaccess/EmergencyBadge.vue b/frontend/src/components/emergencyaccess/EmergencyBadge.vue
index a85e06f50..e896e0e94 100644
--- a/frontend/src/components/emergencyaccess/EmergencyBadge.vue
+++ b/frontend/src/components/emergencyaccess/EmergencyBadge.vue
@@ -1,23 +1,23 @@
 <template>
-  <div class="badge-wrapper mr-3 inline-block" @click.stop.prevent>
-    <span
-      tabindex="0"
-      class="inline-flex items-center gap-2 rounded-full px-2 py-2 text-xs font-medium cursor-default ring-1 outline-none focus-visible:ring-2"
+  <div class="group mr-3 inline-block" @click.stop.prevent>
+    <button
+      type="button"
+      class="inline-flex items-center gap-2 rounded-full p-2 text-xs font-medium cursor-default ring-1 outline-none focus-visible:ring-2"
       :class="isError ? 'bg-red-100 ring-red-300/70 text-red-800' : 'bg-yellow-50 ring-yellow-300/70 text-yellow-800'"
       :style="{ anchorName: anchor }"
-      :aria-label="title"   
+      :aria-label="title"
     >
-      <ExclamationTriangleIcon class="h-4 w-4" :class="isError ? 'text-red-600' : 'text-yellow-500'" />
-    </span>
+      <ExclamationTriangleIcon class="size-4" :class="isError ? 'text-red-600' : 'text-yellow-500'" />
+    </button>
 
     <div
-      class="tooltip-panel px-2 py-1 rounded shadow-sm border text-xs hyphens-auto"
+      class="tooltip-panel fixed mx-auto mb-2 w-fit min-w-40 z-20 px-2 py-1 rounded shadow-sm border text-xs hyphens-auto invisible opacity-0 transition-[opacity,visibility] duration-150 group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100"
       :class="isError ? 'bg-red-50 border-red-300 text-red-900' : 'bg-yellow-50 border-yellow-300 text-yellow-900'"
       :style="{ positionAnchor: anchor }"
       role="tooltip"
     >
-      <b>{{ title }}</b><br />
-      <span>{{ message }}</span>
+      <p class="font-bold">{{ title }}</p>
+      <p>{{ message }}</p>
     </div>
   </div>
 </template>
@@ -38,25 +38,9 @@ const isError = computed(() => props.type === 'error');
 
 <style scoped>
 .tooltip-panel {
-  position: fixed;
   bottom: anchor(top);
   left: calc(anchor(center) - min(calc(anchor(center) - 1rem), calc(100vw - anchor(center) - 1rem), 10rem));
   right: calc(anchor(center) - min(calc(anchor(center) - 1rem), calc(100vw - anchor(center) - 1rem), 10rem));
-  margin-inline: auto;
-  margin-block-end: 0.5rem;
-  width: fit-content;
-  min-width: 10rem;
-  z-index: 20;
   position-try-fallbacks: flip-block;
-
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity 150ms, visibility 150ms;
-}
-
-.badge-wrapper:hover .tooltip-panel,
-.badge-wrapper:focus-within .tooltip-panel {
-  visibility: visible;
-  opacity: 1;
 }
 </style>

From a4f27a78b5241b8af307e9e903f20bd81366a560 Mon Sep 17 00:00:00 2001
From: Jan-Peter Klein <jan-peter.klein@skymatic.de>
Date: Tue, 28 Apr 2026 16:15:18 +0200
Subject: [PATCH 8/8] shift EmergencyBadge tooltip away from viewport edge and
 suppress desktop click trigger

---
 frontend/src/components/emergencyaccess/EmergencyBadge.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/emergencyaccess/EmergencyBadge.vue b/frontend/src/components/emergencyaccess/EmergencyBadge.vue
index e896e0e94..ea3a12ef3 100644
--- a/frontend/src/components/emergencyaccess/EmergencyBadge.vue
+++ b/frontend/src/components/emergencyaccess/EmergencyBadge.vue
@@ -11,7 +11,7 @@
     </button>
 
     <div
-      class="tooltip-panel fixed mx-auto mb-2 w-fit min-w-40 z-20 px-2 py-1 rounded shadow-sm border text-xs hyphens-auto invisible opacity-0 transition-[opacity,visibility] duration-150 group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100"
+      class="tooltip-panel fixed mb-2 z-20 px-2 py-1 rounded shadow-sm border text-xs hyphens-auto invisible opacity-0 transition-[opacity,visibility] duration-150 group-hover:visible group-hover:opacity-100 group-has-focus-visible:visible group-has-focus-visible:opacity-100 pointer-coarse:group-focus-within:visible pointer-coarse:group-focus-within:opacity-100"
       :class="isError ? 'bg-red-50 border-red-300 text-red-900' : 'bg-yellow-50 border-yellow-300 text-yellow-900'"
       :style="{ positionAnchor: anchor }"
       role="tooltip"
@@ -39,8 +39,8 @@ const isError = computed(() => props.type === 'error');
 <style scoped>
 .tooltip-panel {
   bottom: anchor(top);
-  left: calc(anchor(center) - min(calc(anchor(center) - 1rem), calc(100vw - anchor(center) - 1rem), 10rem));
-  right: calc(anchor(center) - min(calc(anchor(center) - 1rem), calc(100vw - anchor(center) - 1rem), 10rem));
+  left: max(1rem, calc(anchor(center) - 10rem));
+  right: max(1rem, calc(anchor(center) - 10rem));
   position-try-fallbacks: flip-block;
 }
 </style>