From 621a37cd5d4992b8ab565926fcf7930827b402f1 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Fri, 27 Sep 2024 11:50:58 +0200
Subject: [PATCH] fix: show sidebar in mobile  viewports for content pages

---
 components/ContentType/ContentPage/contentPage.module.css | 2 ++
 components/Sidebar/sidebar.module.css                     | 8 +++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/components/ContentType/ContentPage/contentPage.module.css b/components/ContentType/ContentPage/contentPage.module.css
index 4535ecf56..feeb3fb4c 100644
--- a/components/ContentType/ContentPage/contentPage.module.css
+++ b/components/ContentType/ContentPage/contentPage.module.css
@@ -4,6 +4,8 @@
 
 .contentPage {
   padding-bottom: var(--Spacing-x9);
+  container-name: content-page;
+  container-type: inline-size;
 }
 
 .header {
diff --git a/components/Sidebar/sidebar.module.css b/components/Sidebar/sidebar.module.css
index b4ca2a6d5..695e35b46 100644
--- a/components/Sidebar/sidebar.module.css
+++ b/components/Sidebar/sidebar.module.css
@@ -8,10 +8,16 @@
   padding: var(--Spacing-x0) var(--Spacing-x2);
 }
 
-@media screen and (min-width: 1366px) {
+@media screen and (min-width: 1367px) {
   .aside {
     align-content: flex-start;
     display: grid;
     gap: var(--Spacing-x4);
   }
 }
+
+@container content-page (max-width: 1366px) {
+  .aside {
+    display: grid;
+  }
+}