From 93fd502e18250442ff00d0a3c57302b4de116d53 Mon Sep 17 00:00:00 2001
From: Pranav-IIITM <jogdandpranav2007@gmail.com>
Date: Sat, 8 Aug 2026 13:19:10 +0530
Subject: [PATCH] fiexed side bar overflowing

Signed-off-by: Pranav-IIITM <jogdandpranav2007@gmail.com>
---
 src/components/RenderATL/RenderATL.jsx |  2 +-
 src/components/Site/Site.jsx           |  2 +-
 src/components/Sponsors/Sponsors.jsx   | 16 ++++++++++------
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/RenderATL/RenderATL.jsx b/src/components/RenderATL/RenderATL.jsx
index a5c2e246e6f1..89470b60ff4f 100644
--- a/src/components/RenderATL/RenderATL.jsx
+++ b/src/components/RenderATL/RenderATL.jsx
@@ -243,7 +243,7 @@ export function RenderATLCard() {
       <Link
         to={TICKETS_URL}
         aria-label="RenderATL 2026, August 12 to 13 in Atlanta — get tickets"
-        className="block w-[220px] overflow-hidden rounded-lg text-blue-800 hover:text-blue-800"
+        className="block w-full max-w-[220px] overflow-hidden rounded-lg text-blue-800 hover:text-blue-800"
       >
         <div className="bg-blue-200 p-[18px]">
           <p
diff --git a/src/components/Site/Site.jsx b/src/components/Site/Site.jsx
index 49daf4fd5d2b..aa6fda300735 100644
--- a/src/components/Site/Site.jsx
+++ b/src/components/Site/Site.jsx
@@ -318,7 +318,7 @@ function Site(props) {
         <Route
           element={
             <div className="flex-[1_1_auto] relative mt-[110px] print:mt-0">
-              <Container className="flex">
+              <Container className="flex relative">
                 <Outlet />
               </Container>
             </div>
diff --git a/src/components/Sponsors/Sponsors.jsx b/src/components/Sponsors/Sponsors.jsx
index dc19d2ea42f7..91b955d6a4cf 100644
--- a/src/components/Sponsors/Sponsors.jsx
+++ b/src/components/Sponsors/Sponsors.jsx
@@ -9,8 +9,11 @@ import { RenderATLCard } from "../RenderATL/RenderATL.jsx";
 // Tailwind CSS is used for styling
 
 const Sponsors = () => (
-  <div className="absolute h-full w-[250px] ml-[-250px] mr-2.5">
-    <div className="sticky hidden xl:flex flex-wrap justify-center items-start border-r-2 border-gray-200 my-6 px-6 pb-12 overflow-hidden bg-transparent transition-colors duration-200 top-24">
+  <div
+    className="absolute h-full right-[100%] mr-2.5 flex justify-end items-start"
+    style={{ maxWidth: "calc(50vw - 520px)" }}
+  >
+    <div className="sticky hidden lg:flex flex-col items-center border-r-2 border-gray-200 my-6 px-2 pb-12 overflow-hidden bg-transparent transition-colors duration-200 top-24 w-[250px] max-w-full">
       {/* AG Grid */}
       <div className="bg-white dark:bg-black shadow-lg rounded-lg m-2 transition-transform duration-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:scale-105 dark:shadow-[0_0_40px_rgba(255,255,255,0.18)]">
         <Link to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
@@ -20,7 +23,7 @@ const Sponsors = () => (
             alt="ag grid"
             width={220}
             loading="lazy"
-            className="block dark:hidden"
+            className="block dark:hidden max-w-full h-auto"
           />
 
           {/* Dark mode */}
@@ -29,7 +32,7 @@ const Sponsors = () => (
             alt="ag grid dark"
             width={220}
             loading="lazy"
-            className="hidden dark:block"
+            className="hidden dark:block max-w-full h-auto"
           />
         </Link>
       </div>
@@ -43,7 +46,7 @@ const Sponsors = () => (
             alt="ag charts"
             width={220}
             loading="lazy"
-            className="block dark:hidden"
+            className="block dark:hidden max-w-full h-auto"
           />
 
           {/* Dark mode */}
@@ -52,7 +55,7 @@ const Sponsors = () => (
             alt="ag charts dark"
             width={220}
             loading="lazy"
-            className="hidden dark:block"
+            className="hidden dark:block max-w-full h-auto"
           />
         </Link>
       </div>
@@ -73,6 +76,7 @@ const Sponsors = () => (
               width={150}
               height={150}
               loading="lazy"
+              className="max-w-full h-auto"
             />
           </div>