From 1a5a56cf4c78fb8763974f40d91fdf61ee60d23a Mon Sep 17 00:00:00 2001
From: twotalesanimation <80506065+twotalesanimation@users.noreply.github.com>
Date: Mon, 22 Jun 2026 08:03:00 +0200
Subject: [PATCH] updated client review page2

---
 .../[token]/review/[versionId]/page.tsx       | 78 +++++++++----------
 1 file changed, 39 insertions(+), 39 deletions(-)

diff --git a/app/client/[token]/review/[versionId]/page.tsx b/app/client/[token]/review/[versionId]/page.tsx
index 6c5c0c6..fc1f535 100644
--- a/app/client/[token]/review/[versionId]/page.tsx
+++ b/app/client/[token]/review/[versionId]/page.tsx
@@ -268,9 +268,9 @@ export default function ClientReviewPage({
   return (
     <div className="flex flex-col h-screen bg-zinc-950 text-white overflow-hidden">
       {/* Header */}
-      <header className="flex flex-col sm:flex-row sm:items-center gap-2 px-4 py-2.5 border-b border-zinc-800 bg-zinc-900 shrink-0">
-        {/* Row 1: back + shot info + status */}
-        <div className="flex items-center gap-3 flex-1 min-w-0">
+      <header className="grid grid-cols-[1fr_auto_1fr] items-center gap-2 px-4 py-2.5 border-b border-zinc-800 bg-zinc-900 shrink-0">
+        {/* Left: back + shot path */}
+        <div className="flex items-center gap-3 min-w-0">
           <Link
             href={`/client/${token}`}
             className="text-zinc-400 hover:text-white transition-colors flex items-center gap-1.5 text-sm shrink-0"
@@ -281,7 +281,7 @@ export default function ClientReviewPage({
 
           <div className="h-4 w-px bg-zinc-700 shrink-0" />
 
-          <div className="flex items-center gap-2 flex-1 min-w-0">
+          <div className="flex items-center gap-2 min-w-0">
             <div className="w-5 h-5 rounded bg-black flex items-center justify-center shrink-0">
               <Image src="/logo.svg" alt="Logo" width={14} height={14} />
             </div>
@@ -298,9 +298,7 @@ export default function ClientReviewPage({
                   <span className="text-xs text-zinc-500 hidden sm:block">{project?.code}</span>
                   <span className="text-zinc-600">/</span>
                   {contextCode && (
-                    <>
-                      <span className="font-mono font-semibold">{contextCode}</span>
-                    </>
+                    <span className="font-mono font-semibold">{contextCode}</span>
                   )}
                   {taskName && (
                     <>
@@ -328,7 +326,10 @@ export default function ClientReviewPage({
               );
             })()}
           </div>
+        </div>
 
+        {/* Center: status badge + decision buttons */}
+        <div className="flex items-center gap-2 shrink-0">
           <span
             className={cn(
               "text-xs px-2.5 py-1 rounded-full border hidden sm:inline-flex items-center gap-1 shrink-0",
@@ -346,52 +347,51 @@ export default function ClientReviewPage({
             )}
             {currentApprovalStatus.replace(/_/g, " ")}
           </span>
-        </div>
-
-        {/* Row 2 on mobile / inline on desktop: decision buttons */}
-        <div className="flex items-center gap-2 shrink-0">
-          {prevReview && (
-            <>
-              <Link
-                href={`/client/${token}/review/${prevReview.versionId}`}
-                className="inline-flex items-center gap-1 text-sm font-medium text-zinc-300 hover:text-white transition-colors shrink-0"
-              >
-                <ChevronLeft className="h-4 w-4" />
-                Prev
-                <span className="font-mono text-xs text-zinc-500 hidden sm:inline">{prevReview.label}</span>
-              </Link>
-              <div className="h-6 w-px bg-zinc-700" />
-            </>
-          )}
           <Button
             size="sm"
             variant="outline"
-            className="flex-1 sm:flex-none h-9 sm:h-8 text-xs gap-1 text-orange-400 border-orange-500/30 hover:bg-orange-500/10"
+            className="h-8 text-xs gap-1 text-orange-400 border-orange-500/30 hover:bg-orange-500/10"
             onClick={() => setApprovalDialog({ open: true, status: "NEEDS_CHANGES" })}
           >
             <AlertCircle className="h-3.5 w-3.5" />
-            Needs Changes
+            <span className="hidden sm:inline">Needs Changes</span>
           </Button>
           <Button
             size="sm"
-            className="flex-1 sm:flex-none h-9 sm:h-8 text-xs gap-1 bg-emerald-600 hover:bg-emerald-500 text-white"
+            className="h-8 text-xs gap-1 bg-emerald-600 hover:bg-emerald-500 text-white"
             onClick={() => setApprovalDialog({ open: true, status: "APPROVED" })}
           >
             <CheckCircle2 className="h-3.5 w-3.5" />
             Approve
           </Button>
-          {nextReview && (
-            <>
-              <div className="h-6 w-px bg-zinc-700" />
-              <Link
-                href={`/client/${token}/review/${nextReview.versionId}`}
-                className="inline-flex items-center gap-1 text-sm font-medium text-zinc-300 hover:text-white transition-colors shrink-0"
-              >
-                <span className="font-mono text-xs text-zinc-500 hidden sm:inline">{nextReview.label}</span>
-                Next
-                <ChevronRight className="h-4 w-4" />
-              </Link>
-            </>
+        </div>
+
+        {/* Right: Prev / Next navigation */}
+        <div className="flex items-center gap-2 justify-end shrink-0">
+          {prevReview ? (
+            <Link
+              href={`/client/${token}/review/${prevReview.versionId}`}
+              className="inline-flex items-center gap-1 text-sm font-medium text-zinc-300 hover:text-white transition-colors shrink-0"
+            >
+              <ChevronLeft className="h-4 w-4" />
+              <span className="hidden sm:inline">Prev</span>
+              <span className="font-mono text-xs text-zinc-500 hidden md:inline">{prevReview.label}</span>
+            </Link>
+          ) : (
+            <span className="w-14" />
+          )}
+          {(prevReview || nextReview) && <div className="h-6 w-px bg-zinc-700" />}
+          {nextReview ? (
+            <Link
+              href={`/client/${token}/review/${nextReview.versionId}`}
+              className="inline-flex items-center gap-1 text-sm font-medium text-zinc-300 hover:text-white transition-colors shrink-0"
+            >
+              <span className="font-mono text-xs text-zinc-500 hidden md:inline">{nextReview.label}</span>
+              <span className="hidden sm:inline">Next</span>
+              <ChevronRight className="h-4 w-4" />
+            </Link>
+          ) : (
+            <span className="w-14" />
           )}
         </div>
       </header>