responsiveness for ipad

Author: rayraycodes

src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { HashRouter as Router, Routes, Route, Navigate, useLocation } from 'react-router-dom';
 import { Navigation } from './components/Navigation';
 import { Footer } from './components/Footer';
@@ -21,11 +21,40 @@ import './utils/navHeight';
 function AppContent() {
   const location = useLocation();
   const isHomePage = location.pathname === '/' || location.pathname === '/#/';
+  const prevPathnameRef = useRef<string>(location.pathname);
+  const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
-  // Scroll to top when opening About, Stories, Projects, etc. so the top nav "moves up" into view
+  // Check if current route is a detail page (project or story detail)
+  const isDetailPage = /^\/(projects|impact|storiesofadventure)\/[^/]+$/.test(location.pathname);
+
+  // Scroll to top on route changes - simplified, no interference with user scrolling
   useEffect(() => {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  }, [location.pathname]);
+    const pathnameChanged = prevPathnameRef.current !== location.pathname;
+    
+    if (pathnameChanged) {
+      // Clear any pending scroll timeouts
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+      
+      // Always scroll to top for detail pages, otherwise only if not already scrolled
+      if (isDetailPage || window.scrollY === 0) {
+        // Use a small delay to ensure DOM is ready
+        scrollTimeoutRef.current = setTimeout(() => {
+          window.scrollTo({ top: 0, behavior: 'instant' });
+          scrollTimeoutRef.current = null;
+        }, 0);
+      }
+      
+      prevPathnameRef.current = location.pathname;
+    }
+
+    return () => {
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+    };
+  }, [location.pathname, isDetailPage]);
 
   // Disable right-click context menu on all pages
   useEffect(() => {

src/components/Navigation.tsx

@@ -19,12 +19,22 @@ export function Navigation({ inline = false }: NavigationProps) {
   const tabRefs = useRef<(HTMLAnchorElement | null)[]>([]);
 
   useEffect(() => {
+    let rafId: number | null = null;
     const handleScroll = () => {
-      setIsScrolled(window.scrollY > 20);
+      // Use requestAnimationFrame to throttle scroll updates
+      if (rafId === null) {
+        rafId = requestAnimationFrame(() => {
+          setIsScrolled(window.scrollY > 20);
+          rafId = null;
+        });
+      }
     };
 
-    window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      if (rafId !== null) cancelAnimationFrame(rafId);
+    };
   }, []);
 
   // Center the active tab with equal tabs on both sides when possible
@@ -185,34 +195,34 @@ export function Navigation({ inline = false }: NavigationProps) {
       });
     }
 
-    // Update immediately and after layout
+    // Debounced update function to prevent excessive calls
+    let updateTimeout: NodeJS.Timeout | null = null;
+    const debouncedUpdateNavHeight = () => {
+      if (updateTimeout) clearTimeout(updateTimeout);
+      updateTimeout = setTimeout(() => {
+        updateNavHeight();
+        updateTimeout = null;
+      }, 16); // ~60fps throttling
+    };
+    
+    // Update immediately
     updateNavHeight();
-    requestAnimationFrame(() => {
-      updateNavHeight();
-      requestAnimationFrame(updateNavHeight);
-    });
 
-    // Update after delays to catch all render states
-    const timeouts = [
-      setTimeout(updateNavHeight, 0),
-      setTimeout(updateNavHeight, 10),
-      setTimeout(updateNavHeight, 50),
-      setTimeout(updateNavHeight, 100),
-      setTimeout(updateNavHeight, 200),
-      setTimeout(updateNavHeight, 500)
-    ];
+    // Single delayed check after layout settles
+    const initialTimeout = setTimeout(updateNavHeight, 100);
 
-    window.addEventListener('resize', updateNavHeight);
-    window.addEventListener('orientationchange', updateNavHeight);
+    window.addEventListener('resize', debouncedUpdateNavHeight, { passive: true });
+    window.addEventListener('orientationchange', debouncedUpdateNavHeight);
 
     return () => {
       resizeObserver.disconnect();
       mutationObserver.disconnect();
-      window.removeEventListener('resize', updateNavHeight);
-      window.removeEventListener('orientationchange', updateNavHeight);
-      timeouts.forEach(clearTimeout);
+      window.removeEventListener('resize', debouncedUpdateNavHeight);
+      window.removeEventListener('orientationchange', debouncedUpdateNavHeight);
+      if (updateTimeout) clearTimeout(updateTimeout);
+      clearTimeout(initialTimeout);
     };
-  }, [isScrolled, inline, isMobileMenuOpen]); // CRITICAL: Include isMobileMenuOpen
+  }, [inline, isMobileMenuOpen]); // Removed isScrolled - it was causing layout shifts during scroll
 
   return (
     <motion.nav

src/components/pages/ProjectDetail.tsx

@@ -30,7 +30,16 @@ export function ProjectDetail() {
   useEffect(() => {
     if (!selectedProject) {
       navigate('/projects');
+      return;
     }
+
+    // Scroll to top when project detail loads
+    // Use double RAF to ensure it happens after App.tsx scroll handler
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        window.scrollTo({ top: 0, behavior: 'instant' });
+      });
+    });
   }, [selectedProject, navigate]);
 
   // Update meta tags for social sharing

src/components/pages/StoriesOfAdventure.tsx

@@ -215,7 +215,7 @@ export function StoriesOfAdventure() {
   return (
     <div className="min-h-screen" ref={contentRef} data-content-wrapper="true">
       {/* Header */}
-      <section className="pt-4 sm:pt-16 lg:pt-24 pb-20 lg:pb-24 bg-gradient-to-b from-background to-blue-50/20">
+      <section className="pb-20 lg:pb-24 bg-gradient-to-b from-background to-blue-50/20">
         <div className="max-w-7xl mx-auto px-6 lg:px-12">
           <motion.div
             initial={{ opacity: 0, y: 30 }}

src/components/pages/StoryDetail.tsx

@@ -84,7 +84,12 @@ export function StoryDetail() {
     }
 
     // Scroll to top when story loads
-    window.scrollTo({ top: 0, behavior: 'instant' });
+    // Use double RAF to ensure it happens after App.tsx scroll handler
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        window.scrollTo({ top: 0, behavior: 'instant' });
+      });
+    });
   }, [selectedStory, navigate, storyId]);
 
   // Update meta tags for social sharing

src/components/pages/StoryOfAdventureDetail.tsx

@@ -97,7 +97,12 @@ export function StoryOfAdventureDetail() {
     }
 
     // Scroll to top when story loads
-    window.scrollTo({ top: 0, behavior: 'instant' });
+    // Use double RAF to ensure it happens after App.tsx scroll handler
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        window.scrollTo({ top: 0, behavior: 'instant' });
+      });
+    });
 
     // Update meta tags immediately for better crawler support
     const baseUrl = window.location.origin;

src/index.css

@@ -2297,7 +2297,9 @@
 
 html {
   font-size: var(--font-size);
-  scroll-behavior: smooth;
+  /* Smooth scrolling disabled to prevent double-scroll issue */
+  /* scroll-behavior: smooth; - Disabled to fix double-scroll */
+  -webkit-overflow-scrolling: touch;
 }
 
 @property --tw-translate-x {

src/styles/globals.css

@@ -133,6 +133,11 @@
     font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', system-ui, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    /* Smooth scrolling disabled to prevent double-scroll issue */
+    /* scroll-behavior: smooth; - Disabled to fix double-scroll */
+    -webkit-overflow-scrolling: touch;
+    /* Better scroll performance */
+    will-change: scroll-position;
   }
 }
 
@@ -198,7 +203,25 @@
 
 html {
   font-size: var(--font-size);
-  scroll-behavior: smooth;
+  /* Smooth scrolling disabled to prevent double-scroll issue */
+  /* scroll-behavior: smooth; - Disabled to fix double-scroll */
+  /* Improve scroll performance and smoothness */
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Additional scroll optimizations for scrollable containers */
+.overflow-x-auto,
+.overflow-y-auto,
+.overflow-auto {
+  -webkit-overflow-scrolling: touch;
+  /* scroll-behavior: smooth; - Disabled to prevent double-scroll */
+}
+
+/* Smooth scrolling for horizontal navigation containers */
+nav[aria-label] ul,
+nav[aria-label] div {
+  /* scroll-behavior: smooth; - Disabled to prevent double-scroll */
+  -webkit-overflow-scrolling: touch;
 }
 
 /* Mobile-specific scrollbar hiding */

src/utils/useMobilePadding.ts

@@ -8,6 +8,8 @@ export function useMobilePadding() {
   const contentRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    let timeoutId: NodeJS.Timeout | null = null;
+    
     const applyPadding = () => {
       if (!contentRef.current) return;
 
@@ -24,61 +26,51 @@ export function useMobilePadding() {
         return;
       }
 
-      // Remove conflicting Tailwind classes
-      el.classList.remove('pt-48', 'sm:pt-24', 'lg:pt-32');
+      // Remove conflicting Tailwind classes that add padding-top
+      el.classList.remove('pt-48', 'sm:pt-24', 'lg:pt-32', 'pt-4', 'sm:pt-16', 'lg:pt-24', 'pt-8', 'pt-12', 'pt-16', 'pt-20');
 
       // Apply padding using CSS variable
       el.style.setProperty('padding-top', navHeight, 'important');
 
-      // Verify no overlap
-      requestAnimationFrame(() => {
-        const navEl = document.querySelector('nav');
-        if (navEl && el) {
-          const navRect = navEl.getBoundingClientRect();
-          const elRect = el.getBoundingClientRect();
-          const isOverlapping = elRect.top < navRect.bottom;
-          
-          // If still overlapping, add extra buffer
-          if (isOverlapping) {
-            const neededPadding = navRect.bottom - elRect.top + 20; // 20px buffer
-            const currentPadding = parseFloat(navHeight) || 0;
-            el.style.setProperty('padding-top', `${Math.max(currentPadding, neededPadding)}px`, 'important');
-          }
-        }
-      });
+      // Removed dynamic overlap checking during scroll to prevent layout shifts
+      // Padding is set once based on nav height and doesn't change during scroll
+    };
+    
+    // Debounced version for observers and events
+    const debouncedApplyPadding = () => {
+      if (timeoutId) clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        applyPadding();
+        timeoutId = null;
+      }, 50);
     };
 
     // Apply immediately
     applyPadding();
 
-    // Watch for CSS variable changes
+    // Watch for CSS variable changes with debouncing
     const observer = new MutationObserver(() => {
-      applyPadding();
+      debouncedApplyPadding();
     });
 
     observer.observe(document.documentElement, {
       attributes: true,
       attributeFilter: ['style', 'data-nav-height']
     });
 
-    // Also listen for resize/orientation changes
-    window.addEventListener('resize', applyPadding);
-    window.addEventListener('orientationchange', applyPadding);
+    // Also listen for resize/orientation changes (debounced)
+    window.addEventListener('resize', debouncedApplyPadding, { passive: true });
+    window.addEventListener('orientationchange', debouncedApplyPadding);
 
-    // Apply after delays to catch all render states
-    const timeouts = [
-      setTimeout(applyPadding, 0),
-      setTimeout(applyPadding, 50),
-      setTimeout(applyPadding, 100),
-      setTimeout(applyPadding, 200),
-      setTimeout(applyPadding, 500)
-    ];
+    // Single delayed check after initial render
+    const initialTimeout = setTimeout(applyPadding, 100);
 
     return () => {
       observer.disconnect();
-      window.removeEventListener('resize', applyPadding);
-      window.removeEventListener('orientationchange', applyPadding);
-      timeouts.forEach(clearTimeout);
+      window.removeEventListener('resize', debouncedApplyPadding);
+      window.removeEventListener('orientationchange', debouncedApplyPadding);
+      if (timeoutId) clearTimeout(timeoutId);
+      clearTimeout(initialTimeout);
     };
   }, []);