style: make stream ui consistent with analysis

Author: kevinjosethomas

src/components/Analysis/StreamAnalysis.tsx

@@ -278,29 +278,35 @@ export const StreamAnalysis: React.FC<Props> = ({
       exit="exit"
       style={{ willChange: 'transform, opacity' }}
     >
-      <div className="flex h-full w-[90%] flex-row gap-2">
+      <div className="flex h-full w-[90%] flex-row gap-3">
         <motion.div
           id="navigation"
-          className="desktop-left-column-container flex flex-col gap-2 overflow-hidden"
+          className="desktop-left-column-container flex flex-col overflow-hidden"
           variants={itemVariants}
           style={{ willChange: 'transform, opacity' }}
         >
-          <GameInfo
-            title="Analysis"
-            icon="live_tv"
-            type="analysis"
-            streamState={streamState}
-          >
-            <NestedGameInfo />
-          </GameInfo>
-          <div className="flex h-1/2 w-full flex-1 flex-col gap-2">
-            <div className="flex h-full flex-col overflow-y-scroll">
+          <div className="flex h-full w-full flex-col overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md">
+            {/* Header */}
+            <GameInfo
+              title="Analysis"
+              icon="live_tv"
+              type="analysis"
+              streamState={streamState}
+              embedded
+            >
+              <NestedGameInfo />
+            </GameInfo>
+            {/* Moves + controller */}
+            <div className="red-scrollbar flex h-full flex-1 flex-col overflow-y-auto">
+              <div className="h-3 border-b border-glassBorder" />
               <MovesContainer
                 game={game}
                 termination={game.termination}
                 showAnnotations={true}
                 disableKeyboardNavigation={false}
                 disableMoveClicking={false}
+                embedded
+                heightClass="h-40"
               />
               <BoardController
                 gameTree={analysisController.gameTree}
@@ -314,6 +320,7 @@ export const StreamAnalysis: React.FC<Props> = ({
                 goToRootNode={analysisController.goToRootNode}
                 disableKeyboardNavigation={false}
                 disableNavigation={false}
+                embedded
               />
             </div>
           </div>
@@ -503,6 +510,7 @@ export const StreamAnalysis: React.FC<Props> = ({
                 goToRootNode={analysisController.goToRootNode}
                 disableKeyboardNavigation={false}
                 disableNavigation={false}
+                embedded
               />
             </div>
             <div className="relative bottom-0 h-48 max-h-48 flex-1 overflow-auto overflow-y-hidden">

src/pages/analysis/stream/[gameId].tsx

@@ -172,6 +172,15 @@ const StreamAnalysisPage: NextPage = () => {
         />
       </Head>
 
+      {/* Radial gradient backdrop to match new design language */}
+      <div
+        className="pointer-events-none absolute inset-0"
+        style={{
+          background:
+            'radial-gradient(ellipse 75% 60% at center top, rgba(239, 68, 68, 0.08) 0%, transparent 60%)',
+        }}
+      />
+
       <AnimatePresence>
         {analysisController &&
         (analysisController.maia.status === 'no-cache' ||