From 6f6d52880f91fb7ed0c2ef54bde4a4853a8e1f77 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 21 Jul 2025 09:17:22 +0000
Subject: [PATCH] Align status to the right

Right-align the status element in the Knights Puzzle.
---
 src/components/KnightsPuzzle.tsx | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/KnightsPuzzle.tsx b/src/components/KnightsPuzzle.tsx
index 02b7387..8397d22 100644
--- a/src/components/KnightsPuzzle.tsx
+++ b/src/components/KnightsPuzzle.tsx
@@ -183,17 +183,15 @@ const KnightsPuzzle = ({ showSocialShare = false }: KnightsPuzzleProps) => {
         </p>
       </div>
 
-      {/* Blue: Number of moves */}
-      <div className="text-lg">
-        <span className="font-semibold">Moves: </span>
-        <span className="font-mono text-primary">{moveCount}</span>
-      </div>
-
-      {/* Orange: Status (without heading) */}
-      <div className="text-lg">
-        <span className="font-semibold">
+      {/* Blue and Orange: Moves (left) and Status (right) on same line */}
+      <div className="flex justify-between items-center text-lg">
+        <div>
+          <span className="font-semibold">Moves: </span>
+          <span className="font-mono text-primary">{moveCount}</span>
+        </div>
+        <div className="font-semibold">
           {isComplete ? "🎉 Puzzle Solved!" : "🎯 In Progress"}
-        </span>
+        </div>
       </div>
 
       {/* Yellow: Main interactive with controls */}