docs: fix code blocks uniform in size

Author: abhaymauryadev

src/content/index.mdx

@@ -30,7 +30,7 @@ import Install from "../components/Splash/install/install.mdx";
 
 ## Bundle It
 
-<div className="splash__wrap">
+<div id="bundle-it-section" className="splash__wrap">
   <div className="splash__left">
     <SecondLeft />
   </div>

src/styles/tailwind.css

@@ -83,7 +83,7 @@
   @apply max-w-100 m-auto;
 }
 .splash__left {
-  @apply w-full float-left md:w-1/2 md:px-3.75;
+  @apply w-full  float-left md:w-1/2 md:px-3.75;
 }
 .splash__left p {
   @apply text-left;
@@ -94,3 +94,38 @@
 .splash__right p {
   @apply text-left;
 }
+
+/* Specific bundle section layout */
+@media (min-width: 768px) {
+  #bundle-it-section {
+    display: grid !important;
+    grid-template-columns: 1fr 1fr;
+    row-gap: 1.5rem;
+  }
+  #bundle-it-section::before,
+  #bundle-it-section::after {
+    display: none !important;
+  }
+  #bundle-it-section > .splash__left,
+  #bundle-it-section > .splash__right {
+    float: none !important;
+    width: auto !important;
+    display: grid !important;
+    grid-template-rows: subgrid !important;
+    grid-row: span 3;
+    margin-bottom: 0 !important;
+  }
+  #bundle-it-section > .splash__left .code-block-wrapper,
+  #bundle-it-section > .splash__right .code-block-wrapper {
+    display: flex !important;
+    flex-direction: column !important;
+    margin: 0 !important;
+    height: 100% !important;
+  }
+  #bundle-it-section > .splash__left .code-block-wrapper pre,
+  #bundle-it-section > .splash__right .code-block-wrapper pre {
+    flex-grow: 1 !important;
+    margin: 0 !important;
+    height: 100% !important;
+  }
+}

src/sw.js

@@ -1,4 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable import/named */
 import { CacheableResponsePlugin } from "workbox-cacheable-response";
 import { cacheNames } from "workbox-core";
 import { ExpirationPlugin } from "workbox-expiration";