From 0f91f46861f22dd4db1184557cc7de5807aa8e41 Mon Sep 17 00:00:00 2001
From: Jitendra Rewar <jiturewar9@gmail.com>
Date: Tue, 4 Aug 2026 14:23:40 +0530
Subject: [PATCH 1/2] fix(ui): resolve blue box overlap on CodeExampleSection

Fixes: #628
Signed-off-by: Jitendra Rewar <jiturewar9@gmail.com>
---
 src/components/content/CodeExampleSection/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/content/CodeExampleSection/index.tsx b/src/components/content/CodeExampleSection/index.tsx
index 9012323161..b878e39a10 100644
--- a/src/components/content/CodeExampleSection/index.tsx
+++ b/src/components/content/CodeExampleSection/index.tsx
@@ -52,18 +52,18 @@ const DesktopCodeBlock = (props: DeskProps) => {
 function CodeExampleSection() {
   return (
     <div className="container my-12 grid place-items-center gap-4 md:grid-cols-12 md:place-items-end">
-      <DesktopCodeBlock className="-z-50 md:col-span-11 md:col-start-1 md:row-start-1 md:row-end-4 md:place-self-center lg:col-span-10 lg:col-start-1" />
+      <DesktopCodeBlock className="md:col-span-8 md:col-start-1 md:row-start-1 md:row-end-4 md:place-self-center lg:col-span-8 lg:col-start-1" />
       <RenderLabelledCode
         {...searchExample}
-        className="row-start-1 md:col-span-5 md:col-start-9 md:self-end lg:col-span-3 lg:col-start-10"
+        className="row-start-1 md:col-span-4 md:col-start-9 md:self-end lg:col-span-4 lg:col-start-9"
       />
       <RenderLabelledCode
         {...searchFilterExample}
-        className="row-start-2 md:col-span-5 md:col-start-9 lg:col-span-3 lg:col-start-10"
+        className="row-start-2 md:col-span-4 md:col-start-9 lg:col-span-4 lg:col-start-9"
       />
       <RenderLabelledCode
         {...imagesExample}
-        className="row-start-3 md:col-span-5 md:col-start-9 lg:col-span-3 lg:col-start-10"
+        className="row-start-3 md:col-span-4 md:col-start-9 lg:col-span-4 lg:col-start-9"
       />
     </div>
   );

From c04369be043dd8472b79aaebc15be95c584ab67a Mon Sep 17 00:00:00 2001
From: Jitendra Rewar <jiturewar9@gmail.com>
Date: Wed, 5 Aug 2026 13:24:12 +0530
Subject: [PATCH 2/2] fix: restore overlap and resolve scrollbar interactivity
 via positive z-indices

---
 src/components/content/CodeExampleSection/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/content/CodeExampleSection/index.tsx b/src/components/content/CodeExampleSection/index.tsx
index b878e39a10..d27f85e8bd 100644
--- a/src/components/content/CodeExampleSection/index.tsx
+++ b/src/components/content/CodeExampleSection/index.tsx
@@ -52,18 +52,18 @@ const DesktopCodeBlock = (props: DeskProps) => {
 function CodeExampleSection() {
   return (
     <div className="container my-12 grid place-items-center gap-4 md:grid-cols-12 md:place-items-end">
-      <DesktopCodeBlock className="md:col-span-8 md:col-start-1 md:row-start-1 md:row-end-4 md:place-self-center lg:col-span-8 lg:col-start-1" />
+      <DesktopCodeBlock className="z-10 md:col-span-11 md:col-start-1 md:row-start-1 md:row-end-4 md:place-self-center lg:col-span-10 lg:col-start-1" />
       <RenderLabelledCode
         {...searchExample}
-        className="row-start-1 md:col-span-4 md:col-start-9 md:self-end lg:col-span-4 lg:col-start-9"
+        className="z-20 row-start-1 md:col-span-5 md:col-start-9 md:self-end lg:col-span-3 lg:col-start-10"
       />
       <RenderLabelledCode
         {...searchFilterExample}
-        className="row-start-2 md:col-span-4 md:col-start-9 lg:col-span-4 lg:col-start-9"
+        className="z-20 row-start-2 md:col-span-5 md:col-start-9 lg:col-span-3 lg:col-start-10"
       />
       <RenderLabelledCode
         {...imagesExample}
-        className="row-start-3 md:col-span-4 md:col-start-9 lg:col-span-4 lg:col-start-9"
+        className="z-20 row-start-3 md:col-span-5 md:col-start-9 lg:col-span-3 lg:col-start-10"
       />
     </div>
   );