Merge pull request #6034 from akatsoulas/topics-css

Fix product metadata overlap
mozilla · May 30, 2024 · 7f6ba58 · 7f6ba58
2 parents a185499 + e6c5c6f
commit 7f6ba58
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 28 deletions.
diff --git a/kitsune/sumo/static/sumo/scss/base/_utilities.scss b/kitsune/sumo/static/sumo/scss/base/_utilities.scss
@@ -100,7 +100,7 @@
   text-align: center;
 
   @media #{p.$mq-lg} {
-    @include p.bidi(((text-align, left, right),));
+    @include p.bidi(((text-align, left, right), ));
   }
 }
 
@@ -121,38 +121,40 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-}
 
-.tooltip-container .tooltip {
-  background-color: var(--color-inverse-bg);
-  color: var(--color-inverse);
-  border-radius: var(--global-radius);
-  padding: p.$spacing-sm;
-  position: absolute;
-  width: max-content;
-  visibility: hidden;
+  .tooltip {
+    background-color: var(--color-inverse-bg);
+    color: var(--color-inverse);
+    padding: p.$spacing-sm;
+    position: absolute;
+    white-space: wrap;
+    z-index: 1;
+    visibility: hidden;
+    overflow-wrap: break-word;
 
-  @media #{p.$mq-xs} {
-    max-width: p.$content-xs;
-  }
+    @media #{p.$mq-xs} {
+      max-width: p.$content-xs;
+    }
 
-  @media #{p.$mq-sm} {
-    max-width: p.$content-sm;
-  }
+    @media #{p.$mq-sm} {
+      max-width: p.$content-sm;
+    }
 
-  @media #{p.$mq-md} {
-    max-width: p.$content-md;
-  }
+    @media #{p.$mq-md} {
+      max-width: p.$content-md;
+    }
 
-  @media #{p.$mq-lg} {
-    max-width: p.$content-lg;
-  }
+    @media #{p.$mq-lg} {
+      max-width: p.$content-lg;
+    }
+
+    @media #{p.$mq-xl} {
+      max-width: p.$content-xl;
+    }
 
-  @media #{p.$mq-xl} {
-    max-width: p.$content-xl;
   }
 }
 
 .tooltip-container:hover .tooltip {
   visibility: visible;
-}
+}
diff --git a/kitsune/sumo/static/sumo/scss/components/_tabs.scss b/kitsune/sumo/static/sumo/scss/components/_tabs.scss
@@ -34,7 +34,7 @@
     outline: 1px solid var(--color-link);
   }
 
-  &:hover  {
+  &:hover {
     color: var(--color-link);
   }
 
@@ -99,6 +99,7 @@
     }
 
     .tabs--dropdown {
+      z-index: 10;
       display: block;
     }
   }
@@ -116,6 +117,7 @@
     .tabs--item {
       border-top: 1px solid var(--color-border);
       background-color: var(--page-bg);
+
       span {
         padding: 0;
       }
@@ -139,6 +141,7 @@
     opacity: 0;
     transform: translateY(-1em);
   }
+
   100% {
     opacity: 1;
     transform: translateY(0);
@@ -147,7 +150,8 @@
 
 
 // jquery UI overrides
-.html-ltr, .html-rtl {
+.html-ltr,
+.html-rtl {
   .ui-widget.ui-widget-content {
     border: 0 none;
 
@@ -198,4 +202,4 @@
     @extend %link-styles;
   }
 
-}
+}