From 39d3fa23bda219a3d0c0936a0c9f4376fba276c6 Mon Sep 17 00:00:00 2001
From: Kishan Asokan <kishanasokan@gmail.com>
Date: Tue, 24 Feb 2026 22:21:30 -0600
Subject: [PATCH 1/3] Archive page improvements: viewport fix, logo nav, and
 stats disclaimer

- Fix empty blue bar on large screens by using --full-vh viewport compensation
- Make Radiordle logo/title clickable to navigate home from archive
- Remove max-height cap on post-puzzle modal for desktop screens
- Add archive stats disclaimer under Statistics heading in results modal

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/archive/page.tsx      | 10 +++++-----
 components/GameClient.tsx |  7 +++++--
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/app/archive/page.tsx b/app/archive/page.tsx
index 7cfffbc..1f25497 100644
--- a/app/archive/page.tsx
+++ b/app/archive/page.tsx
@@ -4,7 +4,7 @@ import ArchiveBrowser from '@/components/ArchiveBrowser';
 
 export default function ArchivePage() {
   return (
-    <div className="min-h-screen relative overflow-y-auto overflow-x-hidden">
+    <div className="min-h-screen-safe relative overflow-y-auto overflow-x-hidden" style={{ minHeight: 'var(--full-vh)' }}>
       {/* Gradient Background */}
       <div className="absolute inset-0 bg-gradient-to-br from-page-bg via-page-bg-mid to-page-bg">
         {/* Radial Vignette */}
@@ -18,7 +18,7 @@ export default function ArchivePage() {
       </div>
 
       {/* Content */}
-      <div className="relative z-10 min-h-screen flex flex-col">
+      <div className="relative z-10 min-h-screen-safe flex flex-col" style={{ minHeight: 'var(--full-vh)' }}>
         {/* Header */}
         <div className="flex justify-between items-center p-4 sm:p-6">
           {/* Back Button */}
@@ -29,8 +29,8 @@ export default function ArchivePage() {
             <span className="text-xl sm:text-2xl">←</span>
           </Link>
 
-          {/* Logo and Title - Centered */}
-          <div className="flex items-center gap-1 drop-shadow-[0_6px_20px_rgba(0,0,0,0.6)]">
+          {/* Logo and Title - Centered, clickable to return home */}
+          <Link href="/" className="flex items-center gap-1 drop-shadow-[0_6px_20px_rgba(0,0,0,0.6)] hover:opacity-90 transition-opacity">
             <div className="relative w-10 h-10 sm:w-14 sm:h-14 md:w-16 md:h-16 flex-shrink-0">
               <Image
                 src="/radle_icon.svg"
@@ -42,7 +42,7 @@ export default function ArchivePage() {
             <h1 className="text-2xl sm:text-4xl md:text-[3.375rem] text-white font-baloo-2 font-extrabold tracking-tight">
               Radiordle
             </h1>
-          </div>
+          </Link>
 
           {/* Spacer for centering */}
           <div className="w-10 sm:w-12"></div>
diff --git a/components/GameClient.tsx b/components/GameClient.tsx
index f8783f7..5e7fb58 100644
--- a/components/GameClient.tsx
+++ b/components/GameClient.tsx
@@ -531,7 +531,7 @@ function ResultsModal({
       onClick={onClose}
     >
       <div
-        className="bg-gradient-to-b from-modal-bg to-page-bg-dark rounded-lg p-4 sm:p-8 max-w-md sm:max-w-2xl w-full shadow-2xl max-h-[90vh] overflow-y-auto font-baloo-2 animate-modal-enter"
+        className="bg-gradient-to-b from-modal-bg to-page-bg-dark rounded-lg p-4 sm:p-8 max-w-md sm:max-w-2xl w-full shadow-2xl max-h-[90vh] sm:max-h-none overflow-y-auto font-baloo-2 animate-modal-enter"
         onClick={(e) => e.stopPropagation()}
       >
         <h2 className="text-2xl sm:text-3xl font-bold text-white text-center mb-2 sm:mb-4">
@@ -570,7 +570,10 @@ function ResultsModal({
 
         {/* Statistics */}
         <div className="bg-white rounded-lg p-3 sm:p-4 mb-2 sm:mb-4">
-          <h3 className="text-xl sm:text-2xl font-bold text-black text-center mb-2">Statistics</h3>
+          <h3 className="text-xl sm:text-2xl font-bold text-black text-center mb-1">Statistics</h3>
+          {isArchive && (
+            <p className="text-xs italic text-gray-500 text-center mb-2">Archive puzzles are not included in your statistics.</p>
+          )}
           <div className="grid grid-cols-4 gap-2 sm:gap-3 text-center">
             <div>
               <p className="text-xl sm:text-2xl font-bold text-success leading-tight">{stats.gamesPlayed}</p>

From f1d9b143f04b2e3e5e1402e0d1cf423fc7f28e30 Mon Sep 17 00:00:00 2001
From: Kishan Asokan <kishanasokan@gmail.com>
Date: Tue, 24 Feb 2026 22:41:42 -0600
Subject: [PATCH 2/3] Modal UX improvements: transparent backdrop, scroll lock,
 click-outside-to-close

- Replace opaque black backdrop with semi-transparent bg-black/50 on all modals
- Lock background scroll when any modal is open (body overflow: hidden)
- Add click-outside-to-close to Legal modals (Privacy Policy, Terms of Service)
- Remove desktop max-height cap on Stats modal to match Results modal

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 components/FeedbackModal.tsx | 12 ++++++++++--
 components/GameClient.tsx    |  8 +++++++-
 components/LegalModals.tsx   | 18 +++++++++++++-----
 components/StatsModal.tsx    | 12 ++++++++++--
 4 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/components/FeedbackModal.tsx b/components/FeedbackModal.tsx
index a11a244..e0bb7aa 100644
--- a/components/FeedbackModal.tsx
+++ b/components/FeedbackModal.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import Link from 'next/link';
 
 interface FeedbackModalProps {
@@ -25,6 +25,14 @@ export default function FeedbackModal({ isOpen, onClose, pageContext }: Feedback
   const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
   const [errorMessage, setErrorMessage] = useState('');
 
+  // Lock background scroll while modal is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+      return () => { document.body.style.overflow = ''; };
+    }
+  }, [isOpen]);
+
   if (!isOpen) return null;
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -91,7 +99,7 @@ export default function FeedbackModal({ isOpen, onClose, pageContext }: Feedback
 
   return (
     <div
-      className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-[100] p-4 animate-backdrop-fade"
+      className="fixed inset-0 bg-black/50  flex items-center justify-center z-[100] p-4 animate-backdrop-fade"
       onClick={handleClose}
     >
       <div
diff --git a/components/GameClient.tsx b/components/GameClient.tsx
index 5e7fb58..a750cce 100644
--- a/components/GameClient.tsx
+++ b/components/GameClient.tsx
@@ -434,6 +434,12 @@ function ResultsModal({
   onClose,
   onCopied,
 }: ResultsModalProps) {
+  // Lock background scroll while modal is open
+  useEffect(() => {
+    document.body.style.overflow = 'hidden';
+    return () => { document.body.style.overflow = ''; };
+  }, []);
+
   const stats = getStatistics();
   const [globalStats, setGlobalStats] = useState<GlobalStats | null>(null);
   const [percentileBeat, setPercentileBeat] = useState<number | null>(null);
@@ -527,7 +533,7 @@ function ResultsModal({
 
   return (
     <div
-      className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4 animate-backdrop-fade"
+      className="fixed inset-0 bg-black/50  flex items-center justify-center z-50 p-4 animate-backdrop-fade"
       onClick={onClose}
     >
       <div
diff --git a/components/LegalModals.tsx b/components/LegalModals.tsx
index fb75e5c..6bcd2da 100644
--- a/components/LegalModals.tsx
+++ b/components/LegalModals.tsx
@@ -1,11 +1,19 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 export default function LegalModals() {
   const [showPrivacyPolicy, setShowPrivacyPolicy] = useState(false);
   const [showTermsOfService, setShowTermsOfService] = useState(false);
 
+  // Lock background scroll while any legal modal is open
+  useEffect(() => {
+    if (showPrivacyPolicy || showTermsOfService) {
+      document.body.style.overflow = 'hidden';
+      return () => { document.body.style.overflow = ''; };
+    }
+  }, [showPrivacyPolicy, showTermsOfService]);
+
   return (
     <>
       {/* Legal Section Buttons */}
@@ -28,8 +36,8 @@ export default function LegalModals() {
 
       {/* Privacy Policy Modal */}
       {showPrivacyPolicy && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70">
-          <div className="bg-page-bg rounded-xl w-full max-w-2xl max-h-[85vh] overflow-hidden shadow-2xl border border-white/10">
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50" onClick={() => setShowPrivacyPolicy(false)}>
+          <div className="bg-page-bg rounded-xl w-full max-w-2xl max-h-[85vh] overflow-hidden shadow-2xl border border-white/10" onClick={(e) => e.stopPropagation()}>
             <div className="flex justify-between items-center p-4 sm:p-6 border-b border-white/10">
               <h2 className="text-xl sm:text-2xl text-white font-baloo-2 font-bold">Privacy Policy</h2>
               <button
@@ -110,8 +118,8 @@ export default function LegalModals() {
 
       {/* Terms of Service Modal */}
       {showTermsOfService && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70">
-          <div className="bg-page-bg rounded-xl w-full max-w-2xl max-h-[85vh] overflow-hidden shadow-2xl border border-white/10">
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50" onClick={() => setShowTermsOfService(false)}>
+          <div className="bg-page-bg rounded-xl w-full max-w-2xl max-h-[85vh] overflow-hidden shadow-2xl border border-white/10" onClick={(e) => e.stopPropagation()}>
             <div className="flex justify-between items-center p-4 sm:p-6 border-b border-white/10">
               <h2 className="text-xl sm:text-2xl text-white font-baloo-2 font-bold">Terms of Service</h2>
               <button
diff --git a/components/StatsModal.tsx b/components/StatsModal.tsx
index ec583de..dbccb92 100644
--- a/components/StatsModal.tsx
+++ b/components/StatsModal.tsx
@@ -15,6 +15,14 @@ export default function StatsModal({ isOpen, onClose, stats }: StatsModalProps)
   const [globalStats, setGlobalStats] = useState<GlobalStats | null>(null);
   const [percentileBeat, setPercentileBeat] = useState<number | null>(null);
 
+  // Lock background scroll while modal is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+      return () => { document.body.style.overflow = ''; };
+    }
+  }, [isOpen]);
+
   // Fetch global stats when modal opens
   useEffect(() => {
     if (isOpen) {
@@ -61,11 +69,11 @@ export default function StatsModal({ isOpen, onClose, stats }: StatsModalProps)
 
   return (
     <div
-      className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-[100] p-4 animate-backdrop-fade"
+      className="fixed inset-0 bg-black/50  flex items-center justify-center z-[100] p-4 animate-backdrop-fade"
       onClick={onClose}
     >
       <div
-        className="bg-gradient-to-b from-modal-bg to-page-bg-dark rounded-lg p-4 sm:p-8 max-w-md w-full shadow-2xl max-h-[90vh] overflow-y-auto font-baloo-2 animate-modal-enter"
+        className="bg-gradient-to-b from-modal-bg to-page-bg-dark rounded-lg p-4 sm:p-8 max-w-md w-full shadow-2xl max-h-[90vh] sm:max-h-none overflow-y-auto font-baloo-2 animate-modal-enter"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Title */}

From 0ed71cd96decf2a58e523b2c080bdfe03987b8d5 Mon Sep 17 00:00:00 2001
From: Kishan Asokan <kishanasokan@gmail.com>
Date: Tue, 24 Feb 2026 22:48:56 -0600
Subject: [PATCH 3/3] Fix E2E tests: use data-testid for modal locator instead
 of CSS classes

The backdrop class change from bg-black to bg-black/50 broke E2E tests
that located modals via .fixed.inset-0.bg-black CSS selector. Replaced
with stable data-testid="results-modal" attribute.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 components/GameClient.tsx             | 3 ++-
 e2e/tests/first-time-user.spec.ts     | 2 +-
 e2e/tests/guess-time-tracking.spec.ts | 2 +-
 e2e/tests/losing-game.spec.ts         | 2 +-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/GameClient.tsx b/components/GameClient.tsx
index a750cce..c5a6495 100644
--- a/components/GameClient.tsx
+++ b/components/GameClient.tsx
@@ -533,7 +533,8 @@ function ResultsModal({
 
   return (
     <div
-      className="fixed inset-0 bg-black/50  flex items-center justify-center z-50 p-4 animate-backdrop-fade"
+      className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 animate-backdrop-fade"
+      data-testid="results-modal"
       onClick={onClose}
     >
       <div
diff --git a/e2e/tests/first-time-user.spec.ts b/e2e/tests/first-time-user.spec.ts
index 04760b3..16850a5 100644
--- a/e2e/tests/first-time-user.spec.ts
+++ b/e2e/tests/first-time-user.spec.ts
@@ -110,7 +110,7 @@ test.describe('First-Time User Journey', () => {
 
     // The results modal (inline in GameClient) should show stats
     // Check for statistics section in the modal
-    const modal = page.locator('.fixed.inset-0.bg-black');
+    const modal = page.locator('[data-testid="results-modal"]');
     await expect(modal.getByText('Statistics')).toBeVisible();
 
     // Verify stats: 1 game played
diff --git a/e2e/tests/guess-time-tracking.spec.ts b/e2e/tests/guess-time-tracking.spec.ts
index 378febc..2a703d2 100644
--- a/e2e/tests/guess-time-tracking.spec.ts
+++ b/e2e/tests/guess-time-tracking.spec.ts
@@ -78,7 +78,7 @@ test.describe('Guess Time Tracking', () => {
     await expect(page.getByText('Congratulations!').first()).toBeVisible({ timeout: 3000 });
 
     // The results modal should show average guess time
-    const modal = page.locator('.fixed.inset-0.bg-black');
+    const modal = page.locator('[data-testid="results-modal"]');
 
     // Look for the "Avg Time" label — use .first() since desktop+mobile layouts both render it
     const avgTimeLabel = modal.getByText('Avg Time').first();
diff --git a/e2e/tests/losing-game.spec.ts b/e2e/tests/losing-game.spec.ts
index 2492ae2..ecba1ce 100644
--- a/e2e/tests/losing-game.spec.ts
+++ b/e2e/tests/losing-game.spec.ts
@@ -108,7 +108,7 @@ test.describe('Losing Game Flow', () => {
     // Modal should be visible with stats
     await expect(page.getByText('Game Over').first()).toBeVisible({ timeout: 3000 });
 
-    const modal = page.locator('.fixed.inset-0.bg-black');
+    const modal = page.locator('[data-testid="results-modal"]');
 
     // Verify stats: 1 game played, 0% win rate
     const playedStat = modal.locator('text=Played').locator('..');