From 978ebfbf3a477477c69c5a432176e202c05cb725 Mon Sep 17 00:00:00 2001
From: Jake Jarvis <jake@jarv.is>
Date: Mon, 2 Mar 2026 14:06:48 -0500
Subject: [PATCH] Fix hero backdrop to span full viewport width on wide screens

Use full-bleed margin technique to break out of max-w-6xl container,
add explicit w-full to prevent aspect-ratio from shrinking the image
container when max-height kicks in, and add overflow-x-hidden to the
page wrapper to prevent scrollbar from 100vw units.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/(pages)/explore/hero-banner.tsx | 4 ++--
 app/(pages)/layout.tsx              | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/(pages)/explore/hero-banner.tsx b/app/(pages)/explore/hero-banner.tsx
index 860cc29..e049df4 100644
--- a/app/(pages)/explore/hero-banner.tsx
+++ b/app/(pages)/explore/hero-banner.tsx
@@ -45,12 +45,12 @@ export function HeroBanner({
 
   return (
     <motion.div
-      className="relative -mx-4 -mt-6 mb-4 overflow-hidden sm:-mx-6"
+      className="relative -mt-6 mb-4 ml-[calc(-50vw+50%)] mr-[calc(-50vw+50%)] overflow-hidden"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 0.6 }}
     >
-      <div className="relative aspect-[21/9] min-h-[280px] max-h-[420px]">
+      <div className="relative w-full min-h-[280px] max-h-[420px] aspect-[21/9]">
         {backdropPath ? (
           <Image
             src={backdropPath}
diff --git a/app/(pages)/layout.tsx b/app/(pages)/layout.tsx
index 2e976f1..c6f4fa0 100644
--- a/app/(pages)/layout.tsx
+++ b/app/(pages)/layout.tsx
@@ -14,7 +14,7 @@ export default function PagesLayout({
 }) {
   return (
     <KeyboardProvider>
-      <div className="min-h-screen pb-14 sm:pb-0">
+      <div className="min-h-screen overflow-x-hidden pb-14 sm:pb-0">
         <NavBar />
         {/* Ambient glow */}
         <div className="pointer-events-none fixed left-1/2 top-1/4 -translate-x-1/2 -translate-y-1/2 h-[600px] w-[800px] rounded-full bg-primary/3 blur-[200px]" />