alezmad/whyrating
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: eliminate mobile horizontal overflow and right-side blank space

Browse Source 
Use overflow-x: hidden + max-width: 100% on html/body to prevent
mobile viewport expansion. Cap decorative glow blobs with max-w
instead of fixed widths, and hide decorative dots on mobile.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Alejandro Gutiérrez
2026-03-01 18:47:10 +00:00
parent f04e8639da
commit b82358a934
4 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/modules/common/layout/base.tsx
View File

@@ -34,7 +34,7 @@ export const BaseLayout = ({ children, locale }: BaseLayoutProps) => {
<html lang={locale} suppressHydrationWarning className={cn(sans.variable, wordmark.variable, mono.variable)}> <html lang={locale} suppressHydrationWarning className={cn(sans.variable, wordmark.variable, mono.variable)}>
<body <body
suppressHydrationWarning suppressHydrationWarning
className="bg-background text-foreground flex min-h-screen w-full flex-col overflow-x-clip font-sans antialiased" className="bg-background text-foreground flex min-h-screen w-full flex-col overflow-x-hidden font-sans antialiased"
data-theme={appConfig.theme.color} data-theme={appConfig.theme.color}
> >
{children} {children}

8
apps/web/src/modules/marketing/home/report-fan.tsx
View File

@@ -5,8 +5,8 @@ export const ReportFan = () => {
<div className="animate-fade-in relative mx-auto mt-12 -translate-y-4 opacity-0 [--animation-delay:800ms] sm:mt-16 md:mt-20"> <div className="animate-fade-in relative mx-auto mt-12 -translate-y-4 opacity-0 [--animation-delay:800ms] sm:mt-16 md:mt-20">
{/* Ambient glow behind the fan */} {/* Ambient glow behind the fan */}
<div className="pointer-events-none absolute inset-0 -bottom-10"> <div className="pointer-events-none absolute inset-0 -bottom-10">
<div className="absolute top-1/2 left-1/2 h-[500px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue-500/8 blur-[100px]" /> <div className="absolute top-1/2 left-1/2 h-[500px] w-full max-w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue-500/8 blur-[100px]" />
<div className="absolute top-1/3 left-1/3 h-[300px] w-[300px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-amber-400/10 blur-[80px]" /> <div className="absolute top-1/3 left-1/3 h-[300px] w-full max-w-[300px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-amber-400/10 blur-[80px]" />
</div> </div>
{/* Fan container with perspective */} {/* Fan container with perspective */}
@@ -15,13 +15,13 @@ export const ReportFan = () => {
style={{ perspective: "1200px" }} style={{ perspective: "1200px" }}
> >
{/* Floating grid dots decoration */} {/* Floating grid dots decoration */}
<div className="pointer-events-none absolute -top-8 -right-12 h-24 w-24 opacity-[0.04]" <div className="pointer-events-none absolute -top-8 -right-12 hidden h-24 w-24 opacity-[0.04] sm:block"
style={{ style={{
backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)", backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)",
backgroundSize: "8px 8px", backgroundSize: "8px 8px",
}} }}
/> />
<div className="pointer-events-none absolute -bottom-6 -left-10 h-20 w-20 opacity-[0.04]" <div className="pointer-events-none absolute -bottom-6 -left-10 hidden h-20 w-20 opacity-[0.04] sm:block"
style={{ style={{
backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)", backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)",
backgroundSize: "8px 8px", backgroundSize: "8px 8px",

4
apps/web/src/modules/marketing/home/report-preview.tsx
View File

@@ -580,8 +580,8 @@ export const ReportPreview = () => {
<div className="relative w-full max-w-3xl"> <div className="relative w-full max-w-3xl">
{/* Ambient glow */} {/* Ambient glow */}
<div className="pointer-events-none absolute inset-0 -bottom-10"> <div className="pointer-events-none absolute inset-0 -bottom-10">
<div className="absolute top-1/2 left-1/2 h-[400px] w-[500px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue-500/8 blur-[100px]" /> <div className="absolute top-1/2 left-1/2 h-[400px] w-full max-w-[500px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue-500/8 blur-[100px]" />
<div className="absolute top-1/3 left-1/3 h-[250px] w-[250px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-amber-400/10 blur-[80px]" /> <div className="absolute top-1/3 left-1/3 h-[250px] w-full max-w-[250px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-amber-400/10 blur-[80px]" />
</div> </div>
{/* Card */} {/* Card */}

6
packages/ui/web/src/styles/globals.css
View File

@@ -89,6 +89,12 @@
@apply border-border outline-ring/50; @apply border-border outline-ring/50;
} }
html,
body {
overflow-x: hidden;
max-width: 100%;
}
html { html {
overscroll-behavior: none; overscroll-behavior: none;
scroll-behavior: auto; scroll-behavior: auto;