mobile client player layoout updates

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

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">
+      <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">
-        <Link
+        {/* Row 1: back + shot info + status */}
-          href={`/client/${token}`}
+        <div className="flex items-center gap-3 flex-1 min-w-0">
-          className="text-zinc-400 hover:text-white transition-colors flex items-center gap-1.5 text-sm"
+          <Link
-        >
+            href={`/client/${token}`}
-          <ArrowLeft className="h-4 w-4" />
+            className="text-zinc-400 hover:text-white transition-colors flex items-center gap-1.5 text-sm shrink-0"
-          <span className="hidden sm:inline">All Shots</span>
+          >
-        </Link>
+            <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="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">
+            <div className="w-5 h-5 rounded bg-black flex items-center justify-center shrink-0">
-            <Film className="h-3 w-3 text-black" />
+              <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;
+          <span
-            const contextCode =
+            className={cn(
-              version.shot?.shotCode ??
+              "text-xs px-2.5 py-1 rounded-full border hidden sm:inline-flex items-center gap-1 shrink-0",
-              version.task?.shot?.shotCode ??
+              approvalStyle
-              version.task?.asset?.assetCode ??
+            )}
-              null;
+          >
-            return (
+            {currentApprovalStatus === "PENDING_REVIEW" ? (
-              <>
+              <Clock className="h-3 w-3" />
-                <span className="text-xs text-zinc-500 hidden sm:block">{project?.code}</span>
+            ) : currentApprovalStatus === "APPROVED" ? (
-                <span className="text-zinc-600">/</span>
+              <CheckCircle2 className="h-3 w-3" />
-                {contextCode && (
+            ) : currentApprovalStatus === "NEEDS_CHANGES" ? (
-                  <>
+              <AlertCircle className="h-3 w-3" />
-                    <span className="font-mono font-semibold">{contextCode}</span>
+            ) : (
-                    <span className="text-zinc-600">/</span>
+              <XCircle className="h-3 w-3" />
-                  </>
+            )}
-                )}
+            {currentApprovalStatus.replace(/_/g, " ")}
-                <span className="font-mono text-sm text-zinc-300">
+          </span>
-                  v{String(version.versionNumber).padStart(3, "0")}
-                </span>
-              </>
-            );
-          })()}
         </div>
 
-        <span
+        {/* Row 2 on mobile / inline on desktop: decision buttons */}
-          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 */}
         <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>