fix(sbb-map-container): remove z-index to avoid stacking problems (#2924

) Closes #2804
sbb-design-systems · Jul 11, 2024 · bf27c10 · bf27c10
1 parent 51f3005
commit bf27c10
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 21 deletions.
diff --git a/src/elements/map-container/__snapshots__/map-container.snapshot.spec.snap.js b/src/elements/map-container/__snapshots__/map-container.snapshot.spec.snap.js
@@ -9,6 +9,10 @@ snapshots["sbb-map-container renders DOM"] =
 
 snapshots["sbb-map-container renders Shadow DOM"] = 
 `<div class="sbb-map-container">
+  <div class="sbb-map-container__map">
+    <slot name="map">
+    </slot>
+  </div>
   <div class="sbb-map-container__sidebar">
     <span>
     </span>
@@ -31,10 +35,6 @@ snapshots["sbb-map-container renders Shadow DOM"] =
       Show map
     </sbb-tertiary-button>
   </div>
-  <div class="sbb-map-container__map">
-    <slot name="map">
-    </slot>
-  </div>
 </div>
 `;
 /* end snapshot sbb-map-container renders Shadow DOM */
@@ -47,14 +47,14 @@ snapshots["sbb-map-container renders without scroll-up button DOM"] =
 
 snapshots["sbb-map-container renders without scroll-up button Shadow DOM"] = 
 `<div class="sbb-map-container">
-  <div class="sbb-map-container__sidebar">
-    <slot>
-    </slot>
-  </div>
   <div class="sbb-map-container__map">
     <slot name="map">
     </slot>
   </div>
+  <div class="sbb-map-container__sidebar">
+    <slot>
+    </slot>
+  </div>
 </div>
 `;
 /* end snapshot sbb-map-container renders without scroll-up button Shadow DOM */

diff --git a/src/elements/map-container/map-container.scss b/src/elements/map-container/map-container.scss
@@ -8,14 +8,14 @@
   --sbb-map-container-map-height-small: #{sbb.px-to-rem-build(320)};
   --sbb-map-container-sidebar-width: #{sbb.px-to-rem-build(400)};
   --sbb-map-container-sidebar-background-color: var(--sbb-color-white);
-  --sbb-map-container-map-height: calc(
-    var(--sbb-map-container-map-height-zero) + var(--sbb-border-radius-4x)
-  );
   --sbb-map-container-border-radius: var(--sbb-border-radius-4x);
   --sbb-map-container-animation-duration: var(
     --sbb-disable-animation-zero-time,
     var(--sbb-animation-duration-4x)
   );
+  --sbb-map-container-map-height: calc(
+    var(--sbb-map-container-map-height-zero) + var(--sbb-map-container-border-radius)
+  );
 
   @include sbb.mq($from: small) {
     --sbb-map-container-map-height: calc(
@@ -33,14 +33,12 @@
 .sbb-map-container {
   display: grid;
   grid-template-rows: auto auto;
-  height: 100%;
 
   @include sbb.mq($from: medium) {
     grid-template-columns: max(var(--sbb-map-container-sidebar-width)) calc(
         100% - var(--sbb-map-container-sidebar-width)
       );
     height: calc(100vh - var(--sbb-map-container-margin-start, var(--sbb-header-height)));
-    overflow: hidden;
   }
 }
 
@@ -81,10 +79,8 @@
   grid-column: 1 / 3;
   grid-row: 2 / 3;
   width: 100%;
-  height: calc(100% + var(--sbb-map-container-border-radius));
   overflow: hidden auto;
   position: relative;
-  z-index: 2;
   border-start-end-radius: var(--sbb-map-container-border-radius);
   border-start-start-radius: var(--sbb-map-container-border-radius);
   margin-block-start: calc(var(--sbb-map-container-border-radius) * -1);
@@ -103,15 +99,17 @@
   position: sticky;
   inset-block-start: 0;
   inset-inline: 0;
-  z-index: 1;
   grid-row: 1 / 2;
   grid-column: 1 / 3;
-  height: var(--sbb-map-container-map-height);
+
+  // We use "to: medium" to avoid resetting the styles
+  @include sbb.mq($to: medium) {
+    height: var(--sbb-map-container-map-height);
+  }
 
   @include sbb.mq($from: medium) {
     grid-row: 1 / 3;
     grid-column: 2 / 3;
-    height: 100%;
     position: relative;
   }
 }
diff --git a/src/elements/map-container/map-container.ts b/src/elements/map-container/map-container.ts
@@ -79,6 +79,9 @@ export class SbbMapContainerElement extends LitElement {
   protected override render(): TemplateResult {
     return html`
       <div class="sbb-map-container">
+        <div class="sbb-map-container__map">
+          <slot name="map"></slot>
+        </div>
         <div class="sbb-map-container__sidebar">
           ${!this.hideScrollUpButton
             ? html`<span
@@ -111,9 +114,6 @@ export class SbbMapContainerElement extends LitElement {
               </sbb-tertiary-button>`
             : nothing}
         </div>
-        <div class="sbb-map-container__map">
-          <slot name="map"></slot>
-        </div>
       </div>
     `;
   }