From adb5937796b9401b87a82bfe70e976023194e5c7 Mon Sep 17 00:00:00 2001
From: Abhay Maurya <abhaymaurya821@gmail.com>
Date: Mon, 30 Mar 2026 02:52:10 +0530
Subject: [PATCH] docs: fix code blocks uniform in size

---
 src/content/index.mdx   |  2 +-
 src/styles/tailwind.css | 37 ++++++++++++++++++++++++++++++++++++-
 src/sw.js               |  1 +
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/content/index.mdx b/src/content/index.mdx
index b012c92a1d30..98de65c6915d 100644
--- a/src/content/index.mdx
+++ b/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>
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 9db5fb51dfaf..95414cb4b845 100644
--- a/src/styles/tailwind.css
+++ b/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;
+  }
+}
diff --git a/src/sw.js b/src/sw.js
index f745338f3752..2737a9c70a71 100644
--- a/src/sw.js
+++ b/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";