feat: add note to leaderboard explaining player eligibility criteria and improve layout of analysis locked message in training page

Author: kevinjosethomas

src/pages/leaderboard.tsx

@@ -103,6 +103,13 @@ const Leaderboard: React.FC = () => {
             <LeaderboardColumn key={index} {...column} />
           ))}
         </div>
+        <div className="my-2 w-full">
+          <p className="text-xs text-secondary">
+            <span className="font-medium">Note:</span> Each leaderboard column
+            only features players who have played atleast one game of the
+            corresponding type within the last 7 days.
+          </p>
+        </div>
       </div>
     </LeaderboardProvider>
   )

src/pages/train.tsx

@@ -918,7 +918,7 @@ const Train: React.FC<Props> = ({
 
               {/* Smaller screens (below xl): MoveMap full width */}
               <div className="flex h-[calc((85vh)*0.35)] w-full xl:hidden">
-                <div className="relative h-full w-full">
+                <div className="h-full w-full">
                   <MoveMap
                     moveMap={
                       showAnalysis
@@ -935,23 +935,24 @@ const Train: React.FC<Props> = ({
                     }
                     makeMove={showAnalysis ? makeMove : mockMakeMove}
                   />
-                  {!showAnalysis && (
-                    <div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded bg-background-1/80 backdrop-blur-sm">
-                      <div className="rounded bg-background-2/90 p-4 text-center shadow-lg">
-                        <span className="material-symbols-outlined mb-2 text-3xl text-human-3">
-                          lock
-                        </span>
-                        <p className="font-medium text-primary">
-                          Analysis Locked
-                        </p>
-                        <p className="text-sm text-secondary">
-                          Complete the puzzle to unlock analysis
-                        </p>
-                      </div>
-                    </div>
-                  )}
                 </div>
               </div>
+
+              {!showAnalysis && (
+                <div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded bg-background-1/80 backdrop-blur-sm">
+                  <div className="rounded bg-background-2/90 p-4 text-center shadow-lg">
+                    <span className="material-symbols-outlined mb-2 text-3xl text-human-3">
+                      lock
+                    </span>
+                    <p className="font-medium text-primary">
+                      Analysis Locked
+                    </p>
+                    <p className="text-sm text-secondary">
+                      Complete the puzzle to unlock analysis
+                    </p>
+                  </div>
+                </div>
+              )}
             </div>
 
             {/* Smaller screens (below xl): MovesByRating full width */}