From 82bb0e766e4f567d3ba26eb9d08eaf48628488ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Guti=C3=A9rrez?=
 <35082514+alezmad@users.noreply.github.com>
Date: Sun, 22 Feb 2026 20:57:16 +0000
Subject: [PATCH] fix: gauge overlap, scroll trapping, and fan clipping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 .../modules/marketing/home/how-to-read.tsx    |  2 +-
 .../src/modules/marketing/home/report-fan.tsx |  2 +-
 .../modules/marketing/home/report-preview.tsx | 22 +++++++++----------
 packages/ui/web/src/components/marquee.tsx    |  2 +-
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/modules/marketing/home/how-to-read.tsx b/apps/web/src/modules/marketing/home/how-to-read.tsx
index ee5e443..0cad4f2 100644
--- a/apps/web/src/modules/marketing/home/how-to-read.tsx
+++ b/apps/web/src/modules/marketing/home/how-to-read.tsx
@@ -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}
diff --git a/apps/web/src/modules/marketing/home/report-fan.tsx b/apps/web/src/modules/marketing/home/report-fan.tsx
index 405183d..c88781f 100644
--- a/apps/web/src/modules/marketing/home/report-fan.tsx
+++ b/apps/web/src/modules/marketing/home/report-fan.tsx
@@ -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]" />
diff --git a/apps/web/src/modules/marketing/home/report-preview.tsx b/apps/web/src/modules/marketing/home/report-preview.tsx
index eacc0dd..4a05ba7 100644
--- a/apps/web/src/modules/marketing/home/report-preview.tsx
+++ b/apps/web/src/modules/marketing/home/report-preview.tsx
@@ -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) => (
diff --git a/packages/ui/web/src/components/marquee.tsx b/packages/ui/web/src/components/marquee.tsx
index 1eeaf56..0e2878a 100644
--- a/packages/ui/web/src/components/marquee.tsx
+++ b/packages/ui/web/src/components/marquee.tsx
@@ -46,7 +46,7 @@ export function Marquee({
     <div
       {...props}
       className={cn(
-        "group flex [gap:var(--gap)] overflow-hidden p-2 [--duration:40s] [--gap:1rem]",
+        "group flex [gap:var(--gap)] overflow-clip p-2 [--duration:40s] [--gap:1rem]",
         {
           "flex-row": !vertical,
           "flex-col": vertical,