From 5bfaf49fa14585302be92e6b70ee094ef5a81ed0 Mon Sep 17 00:00:00 2001
From: twotalesanimation <80506065+twotalesanimation@users.noreply.github.com>
Date: Fri, 12 Jun 2026 11:01:00 +0200
Subject: [PATCH] mobile client player layoout updates

---
 app/client/[token]/page.tsx                   |   2 +-
 .../[token]/review/[versionId]/page.tsx       | 120 +++++++++---------
 2 files changed, 63 insertions(+), 59 deletions(-)

diff --git a/app/client/[token]/page.tsx b/app/client/[token]/page.tsx
index 5dd1df2..5ccd808 100644
--- a/app/client/[token]/page.tsx
+++ b/app/client/[token]/page.tsx
@@ -378,7 +378,7 @@ export default function ClientPortalPage({
                               </div>
                               {ver ? (
                                 <div className="flex items-center gap-3 shrink-0">
-                                  <span className="text-xs font-mono text-zinc-500">
+                                  <span className="hidden sm:inline text-xs font-mono text-zinc-500">
                                     v{String(ver.versionNumber).padStart(3, '0')}
                                   </span>
                                   <span
diff --git a/app/client/[token]/review/[versionId]/page.tsx b/app/client/[token]/review/[versionId]/page.tsx
index 5b01d5d..3e59bbe 100644
--- a/app/client/[token]/review/[versionId]/page.tsx
+++ b/app/client/[token]/review/[versionId]/page.tsx
@@ -2,6 +2,7 @@
 
 import { useState, useEffect, useRef, useCallback } from "react";
 import Link from "next/link";
+import Image from "next/image";
 import { ReviewPlayer, type ReviewPlayerRef } from "@/components/player/ReviewPlayer";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
@@ -215,82 +216,85 @@ export default function ClientReviewPage({
   return (
     <div className="flex flex-col h-screen bg-zinc-950 text-white overflow-hidden">
       {/* Header */}
-      <header className="flex items-center gap-3 px-4 py-2.5 border-b border-zinc-800 bg-zinc-900 shrink-0">
-        <Link
-          href={`/client/${token}`}
-          className="text-zinc-400 hover:text-white transition-colors flex items-center gap-1.5 text-sm"
-        >
-          <ArrowLeft className="h-4 w-4" />
-          <span className="hidden sm:inline">All Shots</span>
-        </Link>
+      <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">
+          <Link
+            href={`/client/${token}`}
+            className="text-zinc-400 hover:text-white transition-colors flex items-center gap-1.5 text-sm shrink-0"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            <span className="hidden sm:inline">All Shots</span>
+          </Link>
 
-        <div className="h-4 w-px bg-zinc-700" />
+          <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="w-5 h-5 rounded bg-amber-500 flex items-center justify-center shrink-0">
-            <Film className="h-3 w-3 text-black" />
+          <div className="flex items-center gap-2 flex-1 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>
+            {(() => {
+              const project = version.shot?.project ?? version.task?.project;
+              const contextCode =
+                version.shot?.shotCode ??
+                version.task?.shot?.shotCode ??
+                version.task?.asset?.assetCode ??
+                null;
+              return (
+                <>
+                  <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="text-zinc-600">/</span>
+                    </>
+                  )}
+                  <span className="font-mono text-sm text-zinc-300">
+                    v{String(version.versionNumber).padStart(3, "000")}
+                  </span>
+                </>
+              );
+            })()}
           </div>
-          {(() => {
-            const project = version.shot?.project ?? version.task?.project;
-            const contextCode =
-              version.shot?.shotCode ??
-              version.task?.shot?.shotCode ??
-              version.task?.asset?.assetCode ??
-              null;
-            return (
-              <>
-                <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="text-zinc-600">/</span>
-                  </>
-                )}
-                <span className="font-mono text-sm text-zinc-300">
-                  v{String(version.versionNumber).padStart(3, "0")}
-                </span>
-              </>
-            );
-          })()}
+
+          <span
+            className={cn(
+              "text-xs px-2.5 py-1 rounded-full border hidden sm:inline-flex items-center gap-1 shrink-0",
+              approvalStyle
+            )}
+          >
+            {currentApprovalStatus === "PENDING_REVIEW" ? (
+              <Clock className="h-3 w-3" />
+            ) : currentApprovalStatus === "APPROVED" ? (
+              <CheckCircle2 className="h-3 w-3" />
+            ) : currentApprovalStatus === "NEEDS_CHANGES" ? (
+              <AlertCircle className="h-3 w-3" />
+            ) : (
+              <XCircle className="h-3 w-3" />
+            )}
+            {currentApprovalStatus.replace(/_/g, " ")}
+          </span>
         </div>
 
-        <span
-          className={cn(
-            "text-xs px-2.5 py-1 rounded-full border hidden sm:inline-flex items-center gap-1",
-            approvalStyle
-          )}
-        >
-          {currentApprovalStatus === "PENDING_REVIEW" ? (
-            <Clock className="h-3 w-3" />
-          ) : currentApprovalStatus === "APPROVED" ? (
-            <CheckCircle2 className="h-3 w-3" />
-          ) : currentApprovalStatus === "NEEDS_CHANGES" ? (
-            <AlertCircle className="h-3 w-3" />
-          ) : (
-            <XCircle className="h-3 w-3" />
-          )}
-          {currentApprovalStatus.replace(/_/g, " ")}
-        </span>
-
-        {/* Decision buttons */}
+        {/* Row 2 on mobile / inline on desktop: decision buttons */}
         <div className="flex items-center gap-2 shrink-0">
           <Button
             size="sm"
             variant="outline"
-            className="h-10 sm:h-8 text-xs gap-1 text-orange-400 border-orange-500/30 hover:bg-orange-500/10"
+            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"
             onClick={() => setApprovalDialog({ open: true, status: "NEEDS_CHANGES" })}
           >
             <AlertCircle className="h-3.5 w-3.5" />
-            <span className="hidden sm:inline">Needs Changes</span>
+            Needs Changes
           </Button>
           <Button
             size="sm"
-            className="h-10 sm:h-8 text-xs gap-1 bg-emerald-600 hover:bg-emerald-500 text-white"
+            className="flex-1 sm:flex-none h-9 sm: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" />
-            <span className="hidden sm:inline">Approve</span>
+            Approve
           </Button>
         </div>
       </header>