From 2b7494305a74e61ee54a2a391d5858ac47fe0e45 Mon Sep 17 00:00:00 2001
From: Haewon Kam <haewonkam@Haewons-MacBook-Pro.local>
Date: Fri, 3 Apr 2026 23:42:35 +0900
Subject: [PATCH] fix: contain all overflowing blobs within viewport
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Modules.tsx: wrap blobs in overflow-clip container, use max-w instead
  of min-w to prevent viewport overflow
- index.css: add #root { overflow-x:clip; max-width:100vw } as final
  safety net — no child element can expand beyond viewport

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/Modules.tsx | 12 +++++++-----
 src/index.css              |  4 ++++
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/Modules.tsx b/src/components/Modules.tsx
index 0784cda..f10c12e 100644
--- a/src/components/Modules.tsx
+++ b/src/components/Modules.tsx
@@ -116,11 +116,13 @@ const ModuleCard: React.FC<{ mod: any, className?: string }> = ({ mod, className
 
 export default function Modules() {
   return (
-    <section id="modules" className="py-24 md:py-32 bg-white px-6 overflow-hidden relative">
-      {/* Animated Background Blobs */}
-      <div className="absolute top-[-10%] left-[-10%] w-[50vw] h-[50vw] min-w-[600px] min-h-[600px] rounded-full bg-[#fff3eb] opacity-80 blur-[120px] animate-blob-large pointer-events-none"></div>
-      <div className="absolute top-[20%] right-[-10%] w-[40vw] h-[40vw] min-w-[500px] min-h-[500px] rounded-full bg-[#e4cfff] opacity-40 blur-[120px] animate-blob-large animation-delay-7000 pointer-events-none"></div>
-      <div className="absolute bottom-[-10%] left-[20%] w-[60vw] h-[60vw] min-w-[700px] min-h-[700px] rounded-full bg-[#f5f9ff] opacity-80 blur-[120px] animate-blob-large animation-delay-14000 pointer-events-none"></div>
+    <section id="modules" className="py-24 md:py-32 bg-white px-6 overflow-clip relative">
+      {/* Animated Background Blobs — contained within section via max-w and inset */}
+      <div className="absolute inset-0 overflow-clip pointer-events-none">
+        <div className="absolute top-[-10%] left-[-10%] w-[50vw] h-[50vw] max-w-[600px] max-h-[600px] rounded-full bg-[#fff3eb] opacity-80 blur-[120px] animate-blob-large"></div>
+        <div className="absolute top-[20%] right-[-5%] w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] rounded-full bg-[#e4cfff] opacity-40 blur-[120px] animate-blob-large animation-delay-7000"></div>
+        <div className="absolute bottom-[-10%] left-[20%] w-[50vw] h-[50vw] max-w-[600px] max-h-[600px] rounded-full bg-[#f5f9ff] opacity-80 blur-[120px] animate-blob-large animation-delay-14000"></div>
+      </div>
 
       <div className="max-w-7xl mx-auto relative z-10">
         <motion.div
diff --git a/src/index.css b/src/index.css
index a3409de..804d885 100644
--- a/src/index.css
+++ b/src/index.css
@@ -69,6 +69,10 @@
     overflow-x: clip;
     @apply font-sans text-slate-800 bg-slate-50 antialiased;
   }
+  #root {
+    overflow-x: clip;
+    max-width: 100vw;
+  }
   
   h1, h2, h3, h4, h5, h6 {
     @apply font-serif text-primary-900;