denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: prevent image/badge cutoff on iPad in Hero section
All checks were successful
CI / CD / test-build (push) Successful in 10m11s
Details
CI / CD / deploy-dev (push) Successful in 1m17s
Details
CI / CD / deploy-production (push) Has been skipped
Details

Browse Source 
overflow-hidden on the <section> was clipping the -bottom-6 badge
and the image bottom on iPad viewports where content sits near the
section edge. Move overflow-hidden to the blobs container (absolute
inset-0) so the blobs are still clipped but the image and badge can
render freely. Add pb-10 sm:pb-16 bottom padding so the badge always
has clearance.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
denshooter
2026-03-06 15:14:30 +01:00
parent 1c49289386
commit 7f7ed39b0e
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/components/Hero.tsx
View File

@@ -15,14 +15,14 @@ export default async function Hero({ locale }: HeroProps) {
const getLabel = (key: string, fallback: string) => cmsMessages[key] || fallback; const getLabel = (key: string, fallback: string) => cmsMessages[key] || fallback;
return ( return (
<section className="relative min-h-screen flex flex-col items-center justify-center overflow-hidden bg-stone-50 dark:bg-stone-950 px-6 transition-colors duration-500"> <section className="relative min-h-screen flex flex-col items-center justify-center bg-stone-50 dark:bg-stone-950 px-6 transition-colors duration-500">
{/* Liquid Ambient Background */} {/* Liquid Ambient Background — overflow-hidden here so the blobs are clipped, not the image/badge */}
<div className="absolute inset-0 pointer-events-none"> <div className="absolute inset-0 pointer-events-none overflow-hidden">
<div className="absolute top-[5%] left-[5%] w-[60vw] h-[60vw] bg-liquid-mint rounded-full blur-[140px] opacity-20" /> <div className="absolute top-[5%] left-[5%] w-[60vw] h-[60vw] bg-liquid-mint rounded-full blur-[140px] opacity-20" />
<div className="absolute bottom-[5%] right-[5%] w-[50vw] h-[50vw] bg-liquid-purple rounded-full blur-[120px] opacity-15" /> <div className="absolute bottom-[5%] right-[5%] w-[50vw] h-[50vw] bg-liquid-purple rounded-full blur-[120px] opacity-15" />
</div> </div>
<div className="relative z-10 max-w-7xl mx-auto w-full pt-12 sm:pt-16 md:pt-20"> <div className="relative z-10 max-w-7xl mx-auto w-full pt-12 sm:pt-16 md:pt-20 pb-10 sm:pb-16">
<div className="flex flex-col xl:flex-row items-center gap-8 sm:gap-10 xl:gap-24"> <div className="flex flex-col xl:flex-row items-center gap-8 sm:gap-10 xl:gap-24">
{/* Left: Text Content */} {/* Left: Text Content */}