⏪️ Merge pull request gchq#286 from Lissy93/revert-284-FIX/283-item-h…

…over-glitch [REVERT] Fixes hover bug Re: gchq#285
BRAVO68WEB · Oct 20, 2021 · d270ad7 · d270ad7
2 parents de9b41c + 30bdf15
commit d270ad7
Showing 1 changed file with 12 additions and 32 deletions.
diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue
@@ -240,8 +240,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import '@/styles/style-helpers.scss';
-@import '@/styles/media-queries.scss';
 
 .item-wrapper {
   flex-grow: 1;
@@ -271,6 +269,10 @@ export default {
     box-shadow: var(--item-hover-shadow);
     background: var(--item-background-hover);
     color: var(--item-text-color-hover);
+    position: relative;
+    .tile-title span.text {
+      white-space: pre-wrap;
+    }
   }
   &:focus {
     outline: 2px solid var(--primary);
@@ -290,18 +292,11 @@ export default {
   padding: 0;
   z-index: 2;
   display: -webkit-box;
-  -webkit-line-clamp: 1;
+  -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   word-break: keep-all;
-  &:not(.no-icon) {
-    overflow: hidden;
-  }
   span.text {
-    text-overflow: ellipsis;
     white-space: nowrap;
-    overflow: hidden;
-    display: block;
-    width: -webkit-fill-available;
   }
 }
 
@@ -376,7 +371,8 @@ export default {
       margin-bottom: 0.25rem;
     }
     .tile-title {
-      width: 100%;
+      min-width: 100px;
+      max-width: 160px;
       &.no-icon {
         text-align: left;
         width: 100%;
@@ -402,7 +398,6 @@ export default {
     .tile-title {
       height: auto;
       padding: 0.1rem 0.25rem;
-      -webkit-line-clamp: 3;
       span.text {
         position: relative;
         font-weight: bold;
@@ -430,28 +425,13 @@ export default {
   }
 }
 
+</style>
+
+<!-- An un-scoped style tag, since tooltip is outside this DOM tree -->
+<style lang="scss">
+
 .disabled-link {
   pointer-events: none;
 }
 
-/* Modifications for more equal width on auto-layout. This is bad code. */
-.orientation-auto {
-  .collapsable.col-1 .wrap-size-medium {
-    max-width: 50%;
-  }
-  @include tablet-up {
-    .collapsable.col-2 .wrap-size-medium {
-      max-width: 25%;
-    }
-  }
-  @include tablet-up {
-    .collapsable.col-1 .wrap-size-small {
-      min-width: 50%;
-    }
-    .collapsable.col-2 .wrap-size-small {
-      min-width: 20%;
-    }
-  }
-}
-
 </style>