castad
/
o2o-infinith-demo
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: contain all overflowing blobs within viewport 

- 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>
claude/bold-hawking
Haewon Kam 2026-04-03 23:42:35 +09:00
parent 71c56783ed
commit 2b7494305a
2 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Modules.tsx
View File

@ -116,11 +116,13 @@ const ModuleCard: React.FC<{ mod: any, className?: string }> = ({ mod, className
export default function Modules() { export default function Modules() {
return ( return (
<section id="modules" className="py-24 md:py-32 bg-white px-6 overflow-hidden relative"> <section id="modules" className="py-24 md:py-32 bg-white px-6 overflow-clip relative">
{/* Animated Background Blobs */} {/* Animated Background Blobs — contained within section via max-w and inset */}
<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 inset-0 overflow-clip pointer-events-none">
<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 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 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> <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"> <div className="max-w-7xl mx-auto relative z-10">
<motion.div <motion.div

4
src/index.css
View File

@ -69,6 +69,10 @@
overflow-x: clip; overflow-x: clip;
@apply font-sans text-slate-800 bg-slate-50 antialiased; @apply font-sans text-slate-800 bg-slate-50 antialiased;
} }
#root {
overflow-x: clip;
max-width: 100vw;
}
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
@apply font-serif text-primary-900; @apply font-serif text-primary-900;