fix(components): update section container in the megadropdown (#7004)

## 📄 Description

This PR fixes an issue with the newly introduced container for the
header and megadropdown content which was causing incorrect layout on
tablet and mobile.

## 🚀 Demo


https://preview-7004--swisspost-design-system-next.netlify.app/?path=/docs/27a2e64d-55ba-492d-ab79-5f7c5e818498--docs

---

## 🔮 Design review

- [ ] Design review done
- [x] No design review needed

## 📝 Checklist

- ✅ My code follows the style guidelines of this project
- 🛠️ I have performed a self-review of my own code
- 📄 I have made corresponding changes to the documentation
- ⚠️ My changes generate no new warnings or errors
- 🧪 I have added tests that prove my fix is effective or that my feature
works
- ✔️ New and existing unit tests pass locally with my changes

Author: alizedebray

packages/components/src/components/post-megadropdown/post-megadropdown.scss

@@ -20,11 +20,6 @@
     z-index: -1;
     inset-block-start: 100%;
 
-    .section {
-      max-height: calc(100vh - var(--post-header-height) - 3rem);
-      padding: 2rem 2.5rem 2.5rem;
-    }
-
     &.slide-in {
       animation: slide-down 350ms forwards;
     }
@@ -38,23 +33,35 @@
     z-index: 1;
     inset-block-start: var(--post-header-navigation-current-inset);
     overscroll-behavior: contain;
-    display: flex;
-    flex-direction: column;
-
-    .section {
-      height: calc(
-        min(var(--post-header-scroll-parent-height, 100dvh), 100dvh) - var(--post-header-height)
-      );
-      padding-inline: var(--post-burger-menu-padding-inline);
-      padding-block: 1.5rem;
-    }
   }
 
   @include utilities.high-contrast-mode() {
     border-block-end: 1px solid CanvasText;
   }
 }
 
+.section {
+  width: 100%;
+  max-width: var(--post-header-content-max-width);
+  margin-inline: auto;
+  position: relative;
+
+  @include media.only(desktop) {
+    max-height: calc(100vh - var(--post-header-height) - 3rem);
+    padding: 2rem 2.5rem 2.5rem;
+  }
+
+  @include media.max(desktop) {
+    display: flex;
+    flex-direction: column;
+    height: calc(
+      min(var(--post-header-scroll-parent-height, 100dvh), 100dvh) - var(--post-header-height)
+    );
+    padding-inline: var(--post-burger-menu-padding-inline);
+    padding-block: 1.5rem;
+  }
+}
+
 .megadropdown-title {
   margin-block: 0 1rem;
   font-weight: 950;
@@ -98,9 +105,3 @@
     display: none;
   }
 }
-
-.section {
-  max-width: var(--post-header-content-max-width);
-  margin-inline: auto;
-  position: relative;
-}