From cb63f4eca1b092bead15332650f00cc2a313d576 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Thu, 16 Jul 2020 12:43:37 -0700
Subject: [PATCH] Fix `is-missing` layout problem #3194 (#3195)

- Fixes related to `is-missing` including fixes for Display Layout
alphanumeric views and Tabs view tabs;
---
 .../components/telemetry-view.scss            | 15 ++++++-------
 src/plugins/tabs/components/tabs.vue          | 21 +++++++++++--------
 src/styles/_mixins.scss                       |  5 ++++-
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/plugins/displayLayout/components/telemetry-view.scss b/src/plugins/displayLayout/components/telemetry-view.scss
index 075ded5273..22ea9a90b4 100644
--- a/src/plugins/displayLayout/components/telemetry-view.scss
+++ b/src/plugins/displayLayout/components/telemetry-view.scss
@@ -27,13 +27,14 @@
         border: 1px solid transparent;
     }
 
-    &.is-missing {
-        @include isMissing($absPos: true);
-        border: $borderMissing;
+    @include isMissing($absPos: true);
 
-        .is-missing__indicator {
-            top: 0;
-            left: 0;
-        }
+    .is-missing__indicator {
+        top: 0;
+        left: 0;
+    }
+
+    &.is-missing {
+        border: $borderMissing;
     }
 }
diff --git a/src/plugins/tabs/components/tabs.vue b/src/plugins/tabs/components/tabs.vue
index 0d32867131..294ba41470 100644
--- a/src/plugins/tabs/components/tabs.vue
+++ b/src/plugins/tabs/components/tabs.vue
@@ -22,21 +22,24 @@
         <button
             v-for="(tab,index) in tabsList"
             :key="index"
-            class="c-tabs-view__tab c-tab c-object-label"
+            class="c-tab c-tabs-view__tab"
             :class="{
-                'is-current': isCurrent(tab),
-                'is-missing': tab.domainObject.status === 'missing'
+                'is-current': isCurrent(tab)
             }"
             @click="showTab(tab, index)"
         >
-            <div class="c-object-label__type-icon"
-                 :class="tab.type.definition.cssClass"
+            <div class="c-object-label"
+                 :class="{'is-missing': tab.domainObject.status === 'missing'}"
             >
-                <span class="is-missing__indicator"
-                      title="This item is missing"
-                ></span>
+                <div class="c-object-label__type-icon"
+                     :class="tab.type.definition.cssClass"
+                >
+                    <span class="is-missing__indicator"
+                          title="This item is missing"
+                    ></span>
+                </div>
+                <span class="c-button__label c-object-label__name">{{ tab.domainObject.name }}</span>
             </div>
-            <span class="c-button__label c-object-label__name">{{ tab.domainObject.name }}</span>
         </button>
     </div>
     <div
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 3da26cc316..d765105dbb 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -123,7 +123,7 @@
     //pointer-events: none; // Don't think we can do this, as disables title hover on icon element
 
     .is-missing__indicator {
-        display: block;
+        display: none ;
         text-shadow: $colorBodyBg 0 0 2px;
         color: $colorAlert;
         font-family: symbolsfont;
@@ -139,6 +139,9 @@
             z-index: 3;
         }
     }
+
+    &.is-missing .is-missing__indicator,
+    .is-missing .is-missing__indicator { display: block !important; }
 }
 
 @mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {