Archive page improvements: viewport fix, logo nav, stats disclaimer

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>

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

components/GameClient.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useCallback, useEffect, useRef } from 'react';
 import { Condition, getGlobalStats, calculatePercentileBeat, getPuzzleGuessDistribution, calculatePuzzlePercentile, GlobalStats } from '@/lib/supabase';
 import { getCookieConsent } from './CookieConsent';
 import DiagnosisAutocomplete from './DiagnosisAutocomplete';
 import { checkAnswer } from '@/lib/gameLogic';
@@ -434,6 +434,12 @@
   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,11 +533,12 @@
 
   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"
+      data-testid="results-modal"
       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 +577,10 @@
 
         {/* 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>

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

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 */}

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

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();

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('..');