check

Author: NalinDalal

src/components/Banner/index.astro

@@ -5,12 +5,14 @@ const { Content } = await entry.render();
 const { link, title } = entry.data;
 ---
 
-<div class="banner bg-accent-color text-accent-type-color" style={{ display: 'none' }} data-title={title}>
-  <a class="banner-content" href={link} target="_blank">
-    <Content />
-  </a>
-  <button id="hideBanner" aria-label="Hide banner"><Icon kind="close" /></button>
-</div>
+<header>
+  <div class="banner bg-accent-color text-accent-type-color" style={{ display: 'none' }} data-title={title}>
+    <a class="banner-content" href={link} target="_blank">
+      <Content />
+    </a>
+    <button id="hideBanner" aria-label="Hide banner"><Icon kind="close" /></button>
+  </div>
+</header>
 
 <script>
 const banner = document.querySelector('.banner');

src/components/CodeContainer/index.astro

@@ -1,5 +1,5 @@
 <code
-  class={`relative inline-block w-full bg-bg-gray-40 rounded-[1.25rem] p-sm my-md text-body-mono [&>pre]:text-wrap break-all code-box ${Astro.props.class}`}
+  class={`relative inline-block w-full rounded-[1.25rem] p-sm my-md text-body-mono [&>pre]:text-wrap break-all code-box ${Astro.props.class}`}
 >
   <slot />
 </code>

styles/global.scss

@@ -261,7 +261,6 @@ section,
 }
 
 .astro-code,
-.code-box,
 .reference-item pre {
   background-color: var(--bg-gray-40) !important;
   padding: var(--spacing-sm);
@@ -279,6 +278,17 @@ section,
   }
 }
 
+.code-box {
+  background-color: #fff !important;
+  padding: var(--spacing-sm);
+  max-width: 100%;
+  overflow-x: auto;
+  border-radius: 20px;
+  @media (max-width: $breakpoint-tablet) {
+    border-radius: 10px;
+  }
+}
+
 .reference-item pre code {
   background-color: transparent;
 }