fix: make tours responsive on mobile

Author: kevinjosethomas

src/components/Misc/GameInfo.tsx

@@ -31,7 +31,10 @@ export const GameInfo: React.FC<Props> = ({
   const { startTour } = useTour()
 
   return (
-    <div className="flex w-full flex-col items-start justify-start gap-1 overflow-hidden bg-background-1 p-3 md:rounded">
+    <div
+      id="analysis-game-list"
+      className="flex w-full flex-col items-start justify-start gap-1 overflow-hidden bg-background-1 p-3 md:rounded"
+    >
       <div className="flex w-full items-center justify-between">
         <div className="flex items-center justify-start gap-1.5">
           <span className="material-symbols-outlined text-xl">{icon}</span>

src/components/Openings/OpeningSelectionModal.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useMemo, useEffect } from 'react'
+import React, { useState, useMemo, useEffect, useContext } from 'react'
 import Image from 'next/image'
-import { AnimatePresence, motion } from 'framer-motion'
+import { motion } from 'framer-motion'
 import Chessground from '@react-chess/chessground'
 import {
   Opening,
@@ -11,6 +11,7 @@ import {
 import { ModalContainer } from '../Misc/ModalContainer'
 import { useTour } from 'src/contexts'
 import { tourConfigs } from 'src/config/tours'
+import { WindowSizeContext } from 'src/contexts/WindowSizeContext'
 
 const MAIA_VERSIONS = [
   { id: 'maia_kdd_1100', name: 'Maia 1100' },
@@ -37,40 +38,47 @@ const TabNavigation: React.FC<{
   activeTab: MobileTab
   setActiveTab: (tab: MobileTab) => void
   selectionsCount: number
-}> = ({ activeTab, setActiveTab, selectionsCount }) => (
-  <div className="flex w-full border-b border-white/10 md:hidden">
-    <button
-      onClick={() => setActiveTab('browse')}
-      className={`flex-1 py-3 text-sm font-medium transition-colors ${
-        activeTab === 'browse'
-          ? 'border-b-2 border-human-4 text-primary'
-          : 'text-secondary hover:text-primary'
-      }`}
-    >
-      Browse
-    </button>
-    <button
-      onClick={() => setActiveTab('preview')}
-      className={`flex-1 py-3 text-sm font-medium transition-colors ${
-        activeTab === 'preview'
-          ? 'border-b-2 border-human-4 text-primary'
-          : 'text-secondary hover:text-primary'
-      }`}
-    >
-      Preview
-    </button>
-    <button
-      onClick={() => setActiveTab('selected')}
-      className={`flex-1 py-3 text-sm font-medium transition-colors ${
-        activeTab === 'selected'
-          ? 'border-b-2 border-human-4 text-primary'
-          : 'text-secondary hover:text-primary'
-      }`}
-    >
-      Selected ({selectionsCount})
-    </button>
-  </div>
-)
+}> = ({ activeTab, setActiveTab, selectionsCount }) => {
+  const { isMobile } = useContext(WindowSizeContext)
+
+  return (
+    <div className="flex w-full border-b border-white/10 md:hidden">
+      <button
+        {...(isMobile ? { id: 'opening-drill-browse' } : {})}
+        onClick={() => setActiveTab('browse')}
+        className={`flex-1 py-3 text-sm font-medium transition-colors ${
+          activeTab === 'browse'
+            ? 'border-b-2 border-human-4 text-primary'
+            : 'text-secondary hover:text-primary'
+        }`}
+      >
+        Browse
+      </button>
+      <button
+        {...(isMobile ? { id: 'opening-drill-preview' } : {})}
+        onClick={() => setActiveTab('preview')}
+        className={`flex-1 py-3 text-sm font-medium transition-colors ${
+          activeTab === 'preview'
+            ? 'border-b-2 border-human-4 text-primary'
+            : 'text-secondary hover:text-primary'
+        }`}
+      >
+        Preview
+      </button>
+      <button
+        {...(isMobile ? { id: 'opening-drill-selected' } : {})}
+        onClick={() => setActiveTab('selected')}
+        className={`flex-1 py-3 text-sm font-medium transition-colors ${
+          activeTab === 'selected'
+            ? 'border-b-2 border-human-4 text-primary'
+            : 'text-secondary hover:text-primary'
+        }`}
+      >
+        Selected ({selectionsCount})
+      </button>
+    </div>
+  )
+}
 
 // Left Panel - Opening Selection - moved outside main component
 const BrowsePanel: React.FC<{

src/pages/analysis/[...id].tsx

@@ -881,7 +881,7 @@ const Analysis: React.FC<Props> = ({
             >
               <NestedGameInfo />
             </GameInfo>
-            <div className="relative flex h-[100vw] w-screen">
+            <div id="analysis" className="relative flex h-[100vw] w-screen">
               <GameBoard
                 game={analyzedGame}
                 availableMoves={controller.moves}

src/pages/train.tsx

@@ -1130,7 +1130,10 @@ const Train: React.FC<Props> = ({
             </div>
             <StatsDisplay stats={stats} />
             <ContinueAgainstMaia launchContinue={launchContinue} />
-            <div className="flex w-full flex-col gap-1 overflow-hidden">
+            <div
+              id="analysis"
+              className="flex w-full flex-col gap-1 overflow-hidden"
+            >
               <div className="relative">
                 <BlunderMeter
                   hover={showAnalysis ? hover : mockHover}