fix: mobile drawer close-on-outside-click, navbar layout offset, testimonials error handling & leaderboard UI (#1670)

* fix: testimonials carousel swipe navigation stuck on mobile (#1667)

- Add touchEventsTarget='container' to Swiper so touch listeners attach to container instead of wrapper
- Add grabCursor for visual drag feedback on desktop
- Fix className bug: home && 'h-32' → home ? 'h-32' : '' to prevent 'false' string in DOM
- Add touchAction: 'pan-y' on blockquote to allow horizontal swipes to pass through to Swiper

Closes #1667

* fix: mobile drawer, navbar layout, testimonials error handling, leaderboard UI

- Fix mobile drawer not closing on outside click (useRef + click-outside listener)
- Fix CSS transform creating containing block issue (translateY(0) → none)
- Add global padding-top for fixed navbar offset (64px, excluding footer)
- Add extra home hero padding for activity banner
- Add try/catch error handling in testimonial fetches
- Fix ESLint jsx-sort-props (shorthand booleans first)
- Center leaderboard loading spinner
- Remove overflow-hidden from leaderboard page
- Import leaderBoard.css in LeaderBoard component

---------

Co-authored-by: aniket <aniket@Rahuls-MacBook-Air.local>
Co-authored-by: aniket <aniket@Mac-68.lan>

Author: 3 people

package.json

@@ -157,6 +157,6 @@
     "react-snap": "^1.23.0",
     "tailwind-scrollbar": "^2.1.0",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5.3.3"
+    "typescript": "^5.9.3"
   }
 }

src/common/Testimonial/TestimonialCard.jsx

@@ -53,7 +53,10 @@ const TestimonialCard = ({ home, quote, name, avatarUrl, category, created_at, e
       </div>
 
       <div className="mx-2 mt-4">
-        <blockquote className={`${home && 'h-32'} max-h-32 px-6 overflow-y-auto`}>
+        <blockquote
+          className={`${home ? 'h-32' : ''} max-h-32 px-6 overflow-y-auto`}
+          style={{ touchAction: 'pan-y' }}
+        >
           <p
             className="leading-relaxed text-gray-700"
             dangerouslySetInnerHTML={{ __html: replaceWithBr() }}

src/common/Testimonial/TestimonialSection.jsx

@@ -18,8 +18,13 @@ function TestimonialSection() {
   const [testimonials, setTestimonials] = useState([]);
 
   const fetchTestimonials = async () => {
-    const res = await submit(fetchTestimonialsHomePage());
-    setTestimonials(res);
+    try {
+      const res = await submit(fetchTestimonialsHomePage());
+      setTestimonials(res || []);
+    } catch (error) {
+      console.warn('Failed to fetch testimonials:', error.message);
+      setTestimonials([]);
+    }
   };
 
   useEffect(() => {
@@ -30,6 +35,7 @@ function TestimonialSection() {
     <>
       <div className="mx-5 lg:mx-20 h-72 mt-16 sm:mt-20">
         <Swiper
+          grabCursor
           rewind
           autoplay={{
             delay: 2500,
@@ -56,6 +62,7 @@ function TestimonialSection() {
           }}
           slidesPerView={1}
           spaceBetween={10}
+          touchEventsTarget="container"
         >
           {testimonials &&
             testimonials.map((testimonial) => (

src/common/Testimonial/Testimonials.jsx

@@ -15,8 +15,13 @@ const Testimonials = () => {
   const isAuthenticated = useAuthenticated();
 
   const fetchTestimonials = async () => {
-    const res = await submit(fetchAllTestimonials());
-    setTestimonials(res);
+    try {
+      const res = await submit(fetchAllTestimonials());
+      setTestimonials(res || []);
+    } catch (error) {
+      console.warn('Failed to fetch testimonials:', error.message);
+      setTestimonials([]);
+    }
   };
 
   const handleLogin = (value) => {

src/common/header/HeaderNav.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { BsGithub, BsTrophyFill } from 'react-icons/bs';
 import { FaLightbulb } from 'react-icons/fa';
@@ -16,6 +16,26 @@ const HeaderNav = ({ showBrowse }) => {
   const { showShareModal, setShowShareModal } = useSearchContext();
 
   const [showToggleMenu, setShowToggleMenu] = useState(false);
+  const menuRef = useRef(null);
+
+  // Close drawer when clicking outside the menu panel
+  useEffect(() => {
+    if (!showToggleMenu) return;
+
+    const handleClickOutside = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setShowToggleMenu(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('touchstart', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
+    };
+  }, [showToggleMenu]);
 
   const [anchorEl, setAnchorEl] = useState(null);
 
@@ -129,6 +149,7 @@ const HeaderNav = ({ showBrowse }) => {
         <ul
           className="header-links"
           data-testid="header-links-container"
+          ref={menuRef}
           onClick={(e) => e.stopPropagation()}
         >
           <li className="menu-closer">

src/common/header/header.css

@@ -29,7 +29,12 @@
 }
 
 .nav--visible {
-  transform: translateY(0);
+  transform: none;
+}
+
+/* Push page content below the fixed header, but not the footer */
+.nav-wrapper ~ *:not(footer) {
+  padding-top: 64px;
 }
 
 

src/common/home/home.css

@@ -13,6 +13,7 @@
   width: 100%;
   overflow-x: hidden;
   min-height: 100vh;
+  padding-top: 32px; /* extra offset for activity banner on home page */
 }
 
 .app-home-body .app-home-body-content {

src/common/playleaderboard/LeaderBoard.jsx

@@ -6,6 +6,7 @@ import TopPlayCreators from './TopPlayCreators';
 import { Watch } from 'react-loader-spinner';
 import { groupBy } from 'lodash';
 import { format, lastDayOfMonth } from 'date-fns';
+import './leaderBoard.css';
 
 const LeaderBoard = () => {
   const [top10Contributors, updateTop10Contributors] = useState([]);
@@ -69,7 +70,7 @@ const LeaderBoard = () => {
   }, [publishedPlays]);
 
   return (
-    <main className="app-body  app-body-overflow-hidden">
+    <main className="app-body">
       {publishedPlays.length && (topContributorOfTheMonth || top10Contributors) ? (
         <div className=" overflow-auto lg:flex flex-row justify-center">
           {topContributorOfTheMonth && (

src/common/playleaderboard/leaderBoard.css

@@ -38,6 +38,13 @@
     height: 100vh;
   } */
 
+.leaderboard-loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100vh - 160px);
+}
+
 .leaderboard-wrapper {
     background-color: #ffffff;
     border-radius: 16px;