Fix iPad layouts and tablet header menu

src/components/Analysis/BroadcastAnalysis.tsx

@@ -10,7 +10,7 @@ import type { Key } from 'chessground/types'
 import { Chess, PieceSymbol } from 'chess.ts'
 import type { DrawShape } from 'chessground/draw'
 
-import { WindowSizeContext } from 'src/contexts'
+import { TABLET_BREAKPOINT_PX, WindowSizeContext } from 'src/contexts'
 import { MAIA_MODELS } from 'src/constants/common'
 import { GameInfo } from 'src/components/Common/GameInfo'
 import { GameBoard } from 'src/components/Board/GameBoard'
@@ -38,7 +38,10 @@ export const BroadcastAnalysis: React.FC<Props> = ({
   analysisController,
 }) => {
   const { width } = useContext(WindowSizeContext)
-  const isMobile = useMemo(() => width > 0 && width <= 670, [width])
+  const isMobile = useMemo(
+    () => width > 0 && width <= TABLET_BREAKPOINT_PX,
+    [width],
+  )
 
   const [hoverArrow, setHoverArrow] = useState<DrawShape | null>(null)
   const [currentSquare, setCurrentSquare] = useState<Key | null>(null)

src/components/Analysis/StreamAnalysis.tsx

@@ -10,7 +10,7 @@ import type { Key } from 'chessground/types'
 import { Chess, PieceSymbol } from 'chess.ts'
 import type { DrawShape } from 'chessground/draw'
 
-import { WindowSizeContext } from 'src/contexts'
+import { TABLET_BREAKPOINT_PX, WindowSizeContext } from 'src/contexts'
 import { MAIA_MODELS } from 'src/constants/common'
 import { GameInfo } from 'src/components/Common/GameInfo'
 import { GameBoard } from 'src/components/Board/GameBoard'
@@ -41,7 +41,10 @@ export const StreamAnalysis: React.FC<Props> = ({
   analysisController,
 }) => {
   const { width } = useContext(WindowSizeContext)
-  const isMobile = useMemo(() => width > 0 && width <= 670, [width])
+  const isMobile = useMemo(
+    () => width > 0 && width <= TABLET_BREAKPOINT_PX,
+    [width],
+  )
 
   const [hoverArrow, setHoverArrow] = useState<DrawShape | null>(null)
   const [currentSquare, setCurrentSquare] = useState<Key | null>(null)

src/components/Board/GameplayInterface.tsx

@@ -269,7 +269,7 @@ export const GameplayInterface: React.FC<React.PropsWithChildren<Props>> = (
           </div>
           <div
             id="play-page"
-            className="relative flex aspect-square h-[100vw] w-screen"
+            className="relative mx-auto flex aspect-square w-full max-w-3xl"
           >
             <GameBoard
               game={game}

src/components/Common/Header.tsx

@@ -332,13 +332,14 @@ export const Header: React.FC = () => {
         </div>
       </Link>
       <button
-        className="block cursor-pointer *:*:fill-primary md:hidden"
+        aria-label="Open navigation menu"
+        className="block cursor-pointer *:*:fill-primary"
         onClick={() => setShowMenu((show) => !show)}
       >
         <span className="material-symbols-outlined text-3xl">menu</span>
       </button>
       {showMenu && (
-        <div className="fixed left-0 top-0 z-40 flex h-screen w-screen flex-col items-start justify-between bg-backdrop py-4">
+        <div className="fixed left-0 top-0 z-40 flex h-screen w-screen flex-col items-start justify-between overflow-y-auto bg-backdrop py-4">
           <div className="flex w-full flex-row justify-between px-4">
             <Link href="/" passHref>
               <div className="flex flex-row items-center gap-2">
@@ -347,26 +348,38 @@ export const Header: React.FC = () => {
               </div>
             </Link>
             <button
-              className="block cursor-pointer *:*:fill-primary md:hidden"
+              aria-label="Close navigation menu"
+              className="block cursor-pointer *:*:fill-primary"
               onClick={() => setShowMenu(false)}
             >
               <span className="material-symbols-outlined text-3xl">menu</span>
             </button>
           </div>
-          <div className="flex flex-col gap-5 px-12 tracking-wider">
+          <div className="flex w-full flex-1 flex-col gap-5 overflow-y-auto px-12 py-6 tracking-wider">
             <div className="flex flex-col items-start justify-center gap-3">
               <button>PLAY</button>
               <div className="ml-4 flex flex-col items-start justify-center gap-2">
-                <button onClick={() => startGame('againstMaia')}>
+                <button
+                  onClick={() => {
+                    setShowMenu(false)
+                    startGame('againstMaia')
+                  }}
+                >
                   Play Maia
                 </button>
-                <button onClick={() => startGame('handAndBrain')}>
+                <button
+                  onClick={() => {
+                    setShowMenu(false)
+                    startGame('handAndBrain')
+                  }}
+                >
                   Play Hand and Brain
                 </button>
                 <a
                   href="https://lichess.org/@/maia1"
                   target="_blank"
                   rel="noreferrer"
+                  onClick={() => setShowMenu(false)}
                 >
                   Play Maia on Lichess
                 </a>
@@ -393,6 +406,15 @@ export const Header: React.FC = () => {
             <Link href="/blog" className="uppercase">
               Maia Blog
             </Link>
+            <a
+              target="_blank"
+              rel="noreferrer"
+              href="https://discord.gg/Az93GqEAs7"
+              className="uppercase"
+              onClick={() => setShowMenu(false)}
+            >
+              Discord
+            </a>
             {/* <a
               target="_blank"
               rel="noreferrer"

src/components/Openings/OpeningDrillAnalysis.tsx

@@ -10,7 +10,7 @@ import { GameNode } from 'src/types'
 import { GameTree } from 'src/types/tree'
 import type { DrawShape } from 'chessground/draw'
 import { useAnalysisController } from 'src/hooks/useAnalysisController'
-import { WindowSizeContext } from 'src/contexts'
+import { TABLET_BREAKPOINT_PX, WindowSizeContext } from 'src/contexts'
 
 interface Props {
   currentNode: GameNode | null
@@ -38,7 +38,10 @@ export const OpeningDrillAnalysis: React.FC<Props> = ({
   makeMove: parentMakeMove,
 }) => {
   const { width } = useContext(WindowSizeContext)
-  const isMobile = useMemo(() => width > 0 && width <= 670, [width])
+  const isMobile = useMemo(
+    () => width > 0 && width <= TABLET_BREAKPOINT_PX,
+    [width],
+  )
 
   const hover = useCallback(
     (move?: string) => {

src/contexts/WindowSizeContext.tsx

@@ -1,6 +1,9 @@
 import { useWindowSize } from 'src/hooks'
 import React, { ReactNode, useMemo } from 'react'
 
+export const PHONE_BREAKPOINT_PX = 670
+export const TABLET_BREAKPOINT_PX = 1024
+
 interface IWindowSizeContext {
   height: number
   width: number
@@ -19,7 +22,12 @@ export const WindowSizeContextProvider: React.FC<{ children: ReactNode }> = ({
   children: ReactNode
 }) => {
   const { width, height } = useWindowSize()
-  const isMobile = useMemo(() => width > 0 && width <= 670, [width])
+  // `isMobile` is used by many layouts as the "stacked" layout trigger.
+  // Include tablets so iPad widths do not fall into cramped desktop layouts.
+  const isMobile = useMemo(
+    () => width > 0 && width <= TABLET_BREAKPOINT_PX,
+    [width],
+  )
   return (
     <WindowSizeContext.Provider value={{ width, height, isMobile }}>
       {children}

src/pages/puzzles.tsx

@@ -48,7 +48,7 @@ import { useAnalysisController } from 'src/hooks/useAnalysisController'
 import { AllStats, useStats } from 'src/hooks/useStats'
 import { PuzzleGame, Status } from 'src/types/puzzle'
 import { AnalyzedGame, MaiaEvaluation, StockfishEvaluation } from 'src/types'
-import { WindowSizeContext, useTour } from 'src/contexts'
+import { TABLET_BREAKPOINT_PX, WindowSizeContext, useTour } from 'src/contexts'
 import { TrainingControllerContext } from 'src/contexts/TrainingControllerContext'
 import {
   getCurrentPlayer,
@@ -316,7 +316,10 @@ const Train: React.FC<Props> = ({
   )
 
   const { width } = useContext(WindowSizeContext)
-  const isMobile = useMemo(() => width > 0 && width <= 670, [width])
+  const isMobile = useMemo(
+    () => width > 0 && width <= TABLET_BREAKPOINT_PX,
+    [width],
+  )
   const [hoverArrow, setHoverArrow] = useState<DrawShape | null>(null)
   const analysisSyncedRef = useRef(false)
   const [promotionFromTo, setPromotionFromTo] = useState<