fix: sync modal now fills viewport via portal and persists after completion

app/(manage)/manage/games/games-client.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { useEffect, useRef, useState } from "react"
+import { createPortal } from "react-dom"
 import Image from "next/image"
 import Link from "next/link"
 import {
@@ -71,6 +72,7 @@ export function GamesClient() {
     failed: 0,
     results: new Map(),
   })
+  const [syncCompleted, setSyncCompleted] = useState(false)
 
   const handleSelectAll = (checked: boolean) => {
     if (checked) {
@@ -182,6 +184,7 @@ export function GamesClient() {
     }))
     setSyncing(false)
     setSelectedIds(new Set())
+    setSyncCompleted(true)
   }
 
   const handleSyncAll = async () => {
@@ -277,6 +280,7 @@ export function GamesClient() {
         isRunning: false,
         currentGame: null,
       }))
+      setSyncCompleted(true)
     } catch (error) {
       console.error("Sync all failed:", error)
       alert("Sync failed. Check console for details.")
@@ -285,6 +289,19 @@ export function GamesClient() {
     }
   }
 
+  const closeSyncOverlay = () => {
+    setSyncCompleted(false)
+    setSyncProgress({
+      isRunning: false,
+      current: 0,
+      total: 0,
+      currentGame: null,
+      synced: 0,
+      failed: 0,
+      results: new Map(),
+    })
+  }
+
   const isSearchChangeRef = useRef(false)
 
   const handleSearchChange = (value: string) => {
@@ -574,10 +591,13 @@ export function GamesClient() {
         </table>
       </div>
 
-      {/* Sync Progress Overlay */}
+      {/* Sync Progress Overlay — portaled to body for guaranteed viewport coverage */}
-      {syncProgress.isRunning && (
+      {(syncProgress.isRunning || syncCompleted) &&
-        <div className="fixed inset-0 z-40 bg-background/80 backdrop-blur-sm flex items-center justify-center">
+        createPortal(
-          <div className="w-full max-w-md mx-4 p-6 bg-background border border-border rounded-2xl shadow-2xl">
+          <div className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm flex items-center justify-center">
+            <div className="w-full max-w-md mx-4 p-6 bg-background border border-border rounded-2xl shadow-2xl max-h-[90vh] overflow-y-auto">
+              {syncProgress.isRunning ? (
+                <>
                   <div className="flex items-center gap-3 mb-4">
                     <div className="relative">
                       <Loader2 className="h-8 w-8 text-primary animate-spin" />
@@ -614,8 +634,31 @@ export function GamesClient() {
                       <p className="text-sm font-medium text-text truncate">{syncProgress.currentGame}</p>
                     </div>
                   )}
+                </>
+              ) : (
+                <>
+                  {/* Completed state header */}
+                  <div className="flex items-center justify-between mb-4">
+                    <div className="flex items-center gap-3">
+                      <CheckCircle2Icon className="h-8 w-8 text-green-400" />
+                      <div>
+                        <h3 className="font-semibold text-text">Sync Complete</h3>
+                        <p className="text-sm text-text/50">
+                          {syncProgress.synced} synced, {syncProgress.failed} failed
+                        </p>
+                      </div>
+                    </div>
+                    <button
+                      onClick={closeSyncOverlay}
+                      className="px-3 py-1.5 rounded-md text-xs font-medium bg-text/5 text-text hover:bg-text/10 transition-colors cursor-pointer"
+                    >
+                      Close
+                    </button>
+                  </div>
+                </>
+              )}
 
-            {/* Stats */}
+              {/* Stats — shown in both running and completed states */}
               <div className="flex gap-4 mb-4">
                 <div className="flex-1 p-3 bg-green-500/10 rounded-lg">
                   <div className="flex items-center gap-2">
@@ -633,11 +676,16 @@ export function GamesClient() {
                 </div>
               </div>
 
-            {/* Recent results */}
+              {/* Results list — scrollable */}
               {syncProgress.results.size > 0 && (
-              <div className="max-h-32 overflow-y-auto">
+                <div className="max-h-48 overflow-y-auto space-y-1">
-                <p className="text-xs text-text/50 mb-2">Recent results:</p>
+                  <p className="text-xs text-text/50 mb-2">
-                {Array.from(syncProgress.results.entries()).slice(-5).reverse().map(([gameId, result]) => {
+                    {syncCompleted ? "All results:" : "Recent results:"}
+                  </p>
+                  {(syncCompleted
+                    ? Array.from(syncProgress.results.entries())
+                    : Array.from(syncProgress.results.entries()).slice(-5).reverse()
+                  ).map(([gameId, result]) => {
                     const game = games.find((g) => g.id === gameId)
                     return (
                       <div key={gameId} className="flex items-center gap-2 py-1">
@@ -651,7 +699,7 @@ export function GamesClient() {
                         </span>
                         {!result.success && result.error && (
                           <span className="text-xs text-red-400/70 ml-auto shrink-0">
-                          {result.error.length > 20 ? result.error.slice(0, 20) + "..." : result.error}
+                            {result.error}
                           </span>
                         )}
                       </div>
@@ -660,7 +708,8 @@ export function GamesClient() {
                 </div>
               )}
             </div>
-        </div>
+          </div>,
+          document.body
         )}
 
       {/* Floating action bar */}