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

fix: gauge overlap, scroll trapping, and fan clipping

Browse Source 
- Shrink gauge arc (r 80→65) to clearly separate from color band
- Replace overflow-hidden with overflow-clip on report preview,
  score spectrum, and marquee to prevent scroll trapping
- Remove overflow-x-clip from report fan so side pages aren't clipped

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Alejandro Gutiérrez
2026-02-22 20:57:16 +00:00
parent 8be3984d72
commit 82bb0e766e
4 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/modules/marketing/home/how-to-read.tsx
View File

@@ -64,7 +64,7 @@ export const HowToRead = () => {
<h3 className="text-foreground mb-3 text-sm font-bold">
{t("howToRead.scoreTitle")}
</h3>
<div className="mb-1.5 flex h-7 overflow-hidden rounded-md">
<div className="mb-1.5 flex h-7 overflow-clip rounded-md">
{SCORE_BANDS.map((band) => (
<div
key={band.range}

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

@@ -2,7 +2,7 @@ import Image from "next/image";
export const ReportFan = () => {
return (
<div className="animate-fade-in relative mx-auto mt-12 -translate-y-4 overflow-x-clip 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 */}
<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]" />

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

@@ -101,26 +101,26 @@ type Tab = (typeof TABS)[number];
function ScoreTab() {
const { t } = useTranslation("marketing");
const radius = 80;
const stroke = 12;
const radius = 65;
const stroke = 10;
const cx = 100;
const cy = 88;
const cy = 72;
const circumference = Math.PI * radius;
const offset = circumference - (SCORE / 100) * circumference;
return (
<div className="flex flex-col items-center gap-4 sm:flex-row sm:items-start sm:gap-10">
{/* Left: Gauge + band */}
<div className="flex shrink-0 flex-col items-center gap-5">
<div className="flex shrink-0 flex-col items-center gap-4">
<span className="text-muted-foreground text-xs tracking-wide uppercase">
{t("reportPreview.demo.businessName")}
</span>
<div className="relative" style={{ width: 200, height: 112 }}>
<div className="relative" style={{ width: 200, height: 82 }}>
<svg
width="200"
height="112"
viewBox="0 0 200 112"
height="82"
viewBox="0 0 200 82"
className="overflow-visible"
>
<circle
@@ -150,14 +150,14 @@ function ScoreTab() {
className="transition-all duration-1000 ease-out"
/>
</svg>
<div className="absolute inset-0 flex flex-col items-center justify-end pb-1">
<div className="absolute inset-0 flex flex-col items-center justify-end pb-0">
<span
className="text-6xl font-bold tabular-nums"
className="text-5xl font-bold tabular-nums"
style={{ color: SCORE_COLOR }}
>
{SCORE}
</span>
<span className="text-muted-foreground text-xs tracking-wide">
<span className="text-muted-foreground text-[10px] tracking-wide">
{t("reportPreview.demo.scoreLabel")}
</span>
</div>
@@ -586,7 +586,7 @@ export const ReportPreview = () => {
</div>
{/* Card */}
<div className="bg-background relative overflow-hidden rounded-2xl border shadow-sm">
<div className="bg-background relative overflow-clip rounded-2xl border shadow-sm">
{/* Tab bar */}
<div className="flex border-b">
{TABS.map((tab) => (