frontend: kraken: prevent container-not-up icon from overlapping update button

Author: nicoschmdt

core/frontend/src/components/kraken/cards/InstalledExtensionCard.vue

@@ -8,28 +8,29 @@
         size="150"
       />
     </div>
-    <v-icon
-      v-if="extension.enabled && !container && !loading"
-      v-tooltip="'This extension is enabled but the container is not running.'"
-      class="container-not-up-alert"
-      color="warning"
-      size="35"
-    >
-      mdi-robot-dead
-    </v-icon>
     <v-card-title class="pb-1 d-flex justify-space-between align-center">
       <div class="d-flex align-center">
-        <v-avatar
+        <v-badge
           v-if="extensionData && extensionData.extension_logo"
-          size="60"
-          class="mr-3"
-          rounded="0"
+          v-tooltip="container_not_up ? 'This extension is enabled but the container is not running.' : ''"
+          :value="container_not_up"
+          overlap
+          offset-x="7"
+          offset-y="10"
+          color="warning"
+          icon="mdi-robot-dead"
+          class="mr-3 container-not-up-badge"
         >
-          <v-img
-            :src="extensionData.extension_logo"
-            :alt="extension.name"
-          />
-        </v-avatar>
+          <v-avatar
+            size="60"
+            rounded="0"
+          >
+            <v-img
+              :src="extensionData.extension_logo"
+              :alt="extension.name"
+            />
+          </v-avatar>
+        </v-badge>
         <div>
           <div>{{ extension.name }}</div>
           <span
@@ -292,6 +293,9 @@ export default Vue.extend({
     buttonBgColor() {
       return settings.is_dark_theme ? '#20455e' : '#BDE0F0'
     },
+    container_not_up(): boolean {
+      return this.extension.enabled && !this.container && !this.loading
+    },
     update_available() : false | string {
       if (!this.extensionData) {
         return false
@@ -426,9 +430,15 @@ export default Vue.extend({
   z-index: 9999 !important;
 }
 
-.container-not-up-alert {
-  position: absolute;
-  right: 13px;
-  top: 13px;
+.container-not-up-badge ::v-deep .v-badge__badge {
+  min-width: 20px;
+  height: 20px;
+  padding: 0;
+  opacity: 0.9;
+}
+
+.container-not-up-badge ::v-deep .v-badge__badge .v-icon {
+  font-size: 18px;
 }
+
 </style>