fix: mega menu grid (#2237)

telekom · Dec 22, 2023 · 1c707b8 · 1c707b8
1 parent 6dcfdd1
commit 1c707b8
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/packages/components/src/components/telekom/telekom-mega-menu/telekom-mega-menu-column.css b/packages/components/src/components/telekom/telekom-mega-menu/telekom-mega-menu-column.css
@@ -21,16 +21,6 @@
   grid-column: 3 / span 3;
 }
 
-:host-context([children-too-many]):host(:first-child) {
-  grid-column: 2 / span 3;
-}
-
-@media screen and (--2xl) {
-  :host-context([children-too-many]):host(:first-child) {
-    grid-column: 1 / span 3;
-  }
-}
-
 [part~='base'] {
   display: flex;
   flex-direction: column;

diff --git a/packages/components/src/components/telekom/telekom-mega-menu/telekom-mega-menu.css b/packages/components/src/components/telekom/telekom-mega-menu/telekom-mega-menu.css
@@ -86,3 +86,17 @@
     --spacing-x: var(--telekom-spacing-composition-space-08);
   }
 }
+
+/* this is a workaround to host-context not working in FF and safari */
+
+.scale-telekom-mega-menu[children-too-many]
+  scale-telekom-mega-menu-column:first-child {
+  grid-column: 2 / span 3;
+}
+
+@media screen and (--2xl) {
+  .scale-telekom-mega-menu[children-too-many]
+    scale-telekom-mega-menu-column:first-child {
+    grid-column: 1 / span 3;
+  }
+}