Skip to content

Fix: side bar overflowing #8322

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
avivkeller merged 1 commit into from
Aug 9, 2026
+12 −8
Merged

Fix: side bar overflowing #8322

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/RenderATL/RenderATL.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/components/Site/Site.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
16 changes: 10 additions & 6 deletions src/components/Sponsors/Sponsors.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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 */}
Expand All @@ -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>
Expand All @@ -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 */}
Expand All @@ -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>
Expand All @@ -73,6 +76,7 @@ const Sponsors = () => (
width={150}
height={150}
loading="lazy"
className="max-w-full h-auto"
/>
</div>

Expand Down
Loading