Fix zoom issue and board moving

Author: daniel-monroe

src/components/Board/GameplayInterface.tsx

@@ -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'}

src/components/Board/MovesContainer.tsx

@@ -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/Common/ExportGame.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}