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)}>
<body
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}
>
{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">
{/* Ambient glow behind the fan */}
<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/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/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-full max-w-[300px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-amber-400/10 blur-[80px]" />
</div>
{/* Fan container with perspective */}
@@ -15,13 +15,13 @@ export const ReportFan = () => {
style={{ perspective: "1200px" }}
>
{/* 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={{
backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)",
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={{
backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)",
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">
{/* Ambient glow */}
<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/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/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-full max-w-[250px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-amber-400/10 blur-[80px]" />
</div>
{/* Card */}

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

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