Maia3 paper, team update, copyright, lint setup, zoom/layout fixes

- Add Maia3 Chessformer paper card on the home page
- Add Daniel Monroe to the contributors team
- Update copyright to 2026
- Fix ESLint on Windows: Prettier endOfLine "auto", ignore Next.js-
  generated next-env.d.ts, plus prettier-plugin-tailwindcss class
  ordering in candidates.tsx
- Fix layout shifts and drag-piece offset at non-100% browser zoom in
  play mode: pin the left sidebar to a constant size, allow the FEN/PGN
  containers to shrink below their content width so the FEN string no
  longer pushes the board horizontally, manual scroll in the moves panel
  to avoid scrollIntoView propagating to the document body

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: daniel-monroe

.eslintignore

@@ -0,0 +1,3 @@
+# Auto-generated by Next.js — should not be linted or hand-edited
+next-env.d.ts
+.next/

.prettierrc.json

@@ -2,5 +2,6 @@
   "semi": false,
   "singleQuote": true,
   "tabWidth": 2,
+  "endOfLine": "auto",
   "plugins": ["prettier-plugin-tailwindcss"]
 }

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

public/assets/papers/maia3.jpg

@@ -161,7 +161,7 @@ export const GameplayInterface: React.FC<React.PropsWithChildren<Props>> = (
     <>
       <div className="flex h-full flex-1 flex-col justify-center gap-1 py-2 md:py-4">
         <div className="mx-auto mt-2 flex w-[90%] flex-row items-start justify-between gap-3">
-          <div className="flex h-[75vh] min-w-[16rem] max-w-[22rem] flex-shrink-0 flex-col">
+          <div className="flex h-[75vh] max-h-[75vh] min-h-[75vh] w-[22rem] min-w-[22rem] max-w-[22rem] flex-shrink-0 flex-col overflow-hidden">
             <div className="flex h-full w-full flex-col overflow-hidden rounded-md border border-glass-border bg-glass backdrop-blur-md">
               <GameInfo
                 icon="swords"
@@ -219,7 +219,7 @@ export const GameplayInterface: React.FC<React.PropsWithChildren<Props>> = (
               />
             ) : null}
           </div>
-          <div className="flex h-[75vh] min-w-[18rem] flex-grow flex-col gap-2">
+          <div className="flex h-[75vh] min-w-0 flex-grow basis-[18rem] flex-col gap-2 overflow-hidden">
             {timeControl != 'unlimited' ? (
               <GameClock
                 player={orientation == 'white' ? 'black' : 'white'}

public/assets/team/daniel.png

@@ -162,11 +162,36 @@ export const MovesContainer: React.FC<
   ])
 
   useEffect(() => {
-    if (currentMoveRef.current && containerRef.current) {
-      currentMoveRef.current.scrollIntoView({
+    const move = currentMoveRef.current
+    const container = containerRef.current
+    if (!move || !container) return
+
+    // scrollIntoView walks every scrollable ancestor up to the document body,
+    // so it can shift the whole page if the moves panel sits near a viewport
+    // edge. Scroll the moves panel directly instead, leaving everything above
+    // it alone.
+    const moveRect = move.getBoundingClientRect()
+    const containerRect = container.getBoundingClientRect()
+
+    let topDelta = 0
+    if (moveRect.top < containerRect.top) {
+      topDelta = moveRect.top - containerRect.top
+    } else if (moveRect.bottom > containerRect.bottom) {
+      topDelta = moveRect.bottom - containerRect.bottom
+    }
+
+    let leftDelta = 0
+    if (moveRect.left < containerRect.left) {
+      leftDelta = moveRect.left - containerRect.left
+    } else if (moveRect.right > containerRect.right) {
+      leftDelta = moveRect.right - containerRect.right
+    }
+
+    if (topDelta !== 0 || leftDelta !== 0) {
+      container.scrollTo({
+        top: container.scrollTop + topDelta,
+        left: container.scrollLeft + leftDelta,
         behavior: 'smooth',
-        block: 'nearest',
-        inline: 'nearest',
       })
     }
   }, [controller.currentNode])

src/components/Board/GameplayInterface.tsx

@@ -98,8 +98,8 @@ export const ExportGame: React.FC<Props> = (props) => {
   }
 
   return (
-    <div className="flex w-full flex-col gap-2">
-      <div className="flex w-full flex-col gap-0.5">
+    <div className="flex w-full min-w-0 flex-col gap-2 overflow-hidden">
+      <div className="flex w-full min-w-0 flex-col gap-0.5">
         <div className="flex w-full items-center justify-between">
           <p className="select-none text-xs font-semibold tracking-wider text-secondary">
             FEN
@@ -117,14 +117,14 @@ export const ExportGame: React.FC<Props> = (props) => {
           role="button"
           tabIndex={0}
           onClick={() => copy(fen)}
-          className="border-1 group flex w-full cursor-pointer overflow-x-hidden rounded border border-white/5 p-1"
+          className="border-1 group flex w-full min-w-0 cursor-pointer overflow-x-hidden rounded border border-white/5 p-1"
         >
-          <p className="whitespace-nowrap text-xxs text-secondary group-hover:text-secondary/80">
+          <p className="min-w-0 overflow-hidden whitespace-nowrap text-xxs text-secondary group-hover:text-secondary/80">
             {fen}
           </p>
         </div>
       </div>
-      <div className="flex w-full flex-col gap-0.5">
+      <div className="flex w-full min-w-0 flex-col gap-0.5">
         <div className="flex w-full items-center justify-between">
           <div className="flex w-full items-center">
             <p className="select-none text-xs font-semibold tracking-wider text-secondary">
@@ -144,7 +144,7 @@ export const ExportGame: React.FC<Props> = (props) => {
           role="button"
           tabIndex={0}
           onClick={() => copy(pgn)}
-          className="group flex w-full cursor-pointer overflow-x-hidden overflow-y-scroll rounded border border-white/5 p-1"
+          className="group flex h-40 max-h-40 min-h-40 w-full min-w-0 cursor-pointer overflow-x-hidden overflow-y-scroll rounded border border-white/5 p-1"
         >
           <p className="whitespace-pre-wrap text-xxs text-secondary group-hover:text-secondary/80">
             {pgn}

src/components/Board/MovesContainer.tsx

@@ -18,30 +18,38 @@ export const Footer: React.FC = () => {
       title: 'Research',
       links: [
         {
-          href: 'https://arxiv.org/abs/2006.01855',
-          text: "Maia Paper (KDD '20)",
+          href: 'https://arxiv.org/abs/2605.19091',
+          text: "Maia-3 Paper (ICLR '26)",
         },
         {
           href: 'https://www.cs.toronto.edu/~ashton/pubs/maia2-neurips2024.pdf',
           text: "Maia-2 Paper (NeurIPS '24)",
         },
+        {
+          href: 'https://arxiv.org/abs/2006.01855',
+          text: "Maia Paper (KDD '20)",
+        },
         {
           href: 'https://csslab.cs.toronto.edu/research/',
           text: 'CSSLab Research',
         },
       ],
     },
     {
-      title: 'Opensource',
+      title: 'Open-Source',
       links: [
         {
-          href: 'https://github.com/CSSLab/maia-chess',
-          text: 'Maia Model',
+          href: 'https://github.com/CSSLab/maia3',
+          text: 'Maia-3 Model',
         },
         {
           href: 'https://github.com/CSSLab/maia2',
           text: 'Maia-2 Model',
         },
+        {
+          href: 'https://github.com/CSSLab/maia-chess',
+          text: 'Maia Model',
+        },
         {
           href: 'https://github.com/csslab/maia-platform-frontend',
           text: 'Maia Web Platform',
@@ -153,7 +161,7 @@ export const Footer: React.FC = () => {
           </div>
         </div>
         <p className="text-left text-sm text-secondary md:text-center md:text-xs">
-          © 2025 Maia Chess. All rights reserved.
+          © 2026 Maia Chess. All rights reserved.
         </p>
       </div>
     </div>

src/components/Common/ExportGame.tsx

@@ -42,6 +42,14 @@ const teamMembers = [
     role: 'Model Developer',
     github: 'lilv98',
   },
+  {
+    image: '/assets/team/daniel.png',
+    name: 'Daniel Monroe',
+    website: 'https://daniel-monroe.github.io/',
+    institution: 'University of Toronto',
+    role: 'Model Developer',
+    github: 'daniel-monroe',
+  },
   {
     image: '/assets/team/kevin.jpg',
     name: 'Kevin Thomas',
@@ -75,19 +83,44 @@ const teamMembers = [
   },
 ]
 
-const researchPapers = {
+interface Paper {
+  title: string
+  link: string
+  description: string
+  image?: string
+  shortName?: string
+}
+
+const researchPapers: {
+  maia1: Paper
+  maia2: Paper
+  maia3: Paper
+  others: Paper[]
+} = {
   maia1: {
     title:
       'Aligning Superhuman AI with Human Behavior: Chess as a Model System',
     link: 'https://www.cs.toronto.edu/~ashton/pubs/maia-kdd2020.pdf',
     description:
       'This paper introduces Maia, a chess engine trained to imitate real human moves at different rating levels. Instead of always picking the best move, Maia predicts what a human player of a given skill would actually play. This makes it ideal for training, game analysis, and even coaching, as it helps players learn from realistic decisions rather than computer perfection. It was the first AI to prioritize human-likeness over engine strength, making it a powerful tool for improvement.',
+    image: 'maia1',
+    shortName: 'Maia 1',
   },
   maia2: {
     title: 'Maia‑2: A Unified Model for Human‑AI Alignment in Chess',
     link: 'https://www.cs.toronto.edu/~ashton/pubs/maia2-neurips2024.pdf',
     description:
       "Maia‑2 is the evolution of Maia into a single model that can simulate any skill level in chess. Instead of using separate models for different ratings, it understands and adapts to your level in real time. Whether you're a beginner or a master, Maia‑2 predicts the moves players like you would actually make. It's built to feel human, teach naturally, and support personalized analysis without needing to toggle between bots.",
+    image: 'maia2',
+    shortName: 'Maia 2',
+  },
+  maia3: {
+    title: 'Chessformer: A Unified Architecture for Chess Modeling',
+    link: 'https://arxiv.org/abs/2605.19091',
+    description:
+      'Introduces Chessformer, a transformer-based architecture that unifies chess modeling to capture how human players make decisions across a wide range of skill levels.',
+    image: 'maia3',
+    shortName: 'Maia 3',
   },
   others: [
     {
@@ -125,7 +158,7 @@ const PaperCard = ({
   featured = false,
   className = '',
 }: {
-  paper: typeof researchPapers.maia1
+  paper: Paper
   featured?: boolean
   className?: string
 }) => (
@@ -146,7 +179,7 @@ const PaperCard = ({
     {featured && (
       <div className="aspect-[4/3] w-full overflow-hidden">
         <img
-          src={`/assets/papers/${paper.title.includes('Maia‑2') ? 'maia2' : 'maia1'}.jpg`}
+          src={`/assets/papers/${paper.image}.jpg`}
           alt={`${paper.title} paper preview`}
           className="h-full w-full object-cover object-top"
         />
@@ -172,7 +205,7 @@ const PaperCard = ({
           rel="noreferrer"
           className="inline-flex w-full items-center justify-center bg-human-4/80 px-5 py-3 font-medium text-primary transition duration-200 hover:bg-human-4"
         >
-          Read {paper.title.includes('Maia‑2') ? 'Maia 2' : 'Maia 1'} Paper
+          Read {paper.shortName} Paper
         </a>
       )}
     </div>
@@ -248,46 +281,17 @@ export const AboutMaia = () => {
           </div>
         </div>
         <div className="mx-auto max-w-[95%] px-2 pt-16 md:max-w-[90%] md:px-4">
-          {/* Layout for screens < 1280px */}
-          <div className="xl:hidden">
-            {/* Featured papers in a row */}
-            <div className="mb-6 grid grid-rows-2 gap-6 md:grid-cols-2 md:grid-rows-none">
-              <PaperCard
-                paper={researchPapers.maia1}
-                featured={true}
-                className=""
-              />
-              <PaperCard
-                paper={researchPapers.maia2}
-                featured={true}
-                className=""
-              />
-            </div>
-            {/* Other papers in a row */}
-            <div className="grid grid-rows-2 gap-4 sm:grid-cols-4 sm:grid-rows-none">
-              {researchPapers.others.map((paper, index) => (
-                <PaperCard key={index} paper={paper} className="flex-1" />
-              ))}
-            </div>
+          {/* Featured papers */}
+          <div className="mb-6 grid gap-6 md:grid-cols-3">
+            <PaperCard paper={researchPapers.maia1} featured={true} />
+            <PaperCard paper={researchPapers.maia2} featured={true} />
+            <PaperCard paper={researchPapers.maia3} featured={true} />
           </div>
-
-          {/* Layout for screens >= 1280px (original layout) */}
-          <div className="hidden xl:grid xl:grid-cols-3 xl:gap-6">
-            <PaperCard
-              paper={researchPapers.maia1}
-              featured={true}
-              className=""
-            />
-            <PaperCard
-              paper={researchPapers.maia2}
-              featured={true}
-              className=""
-            />
-            <div className="flex flex-col gap-4">
-              {researchPapers.others.map((paper, index) => (
-                <PaperCard key={index} paper={paper} className="flex-1" />
-              ))}
-            </div>
+          {/* Other papers in two columns */}
+          <div className="grid gap-4 sm:grid-cols-2">
+            {researchPapers.others.map((paper, index) => (
+              <PaperCard key={index} paper={paper} />
+            ))}
           </div>
         </div>
       </section>