From 2b373737d825949c58a24997173fe629620eeaac Mon Sep 17 00:00:00 2001
From: twotalesanimation <80506065+twotalesanimation@users.noreply.github.com>
Date: Fri, 18 Sep 2026 08:13:14 +0200
Subject: [PATCH] feat(review): review players usable on phones

Internal review: the comments panel stayed a 320px sidebar on phones,
leaving the video a 55px strip. Below md it now sits under the video
(collapsible, arrow pointing down/up), and the top bar puts shot + version
on one row with the share and approval actions on a second.

Client review: the header's three-column grid overlapped on phones
(Approve drawn over the shot code). Below md it is two rows: back, shot and
prev/next, then status and the decision buttons. The status badge now shows
on phones, and the notes toggle points down/up to match its position.

Desktop is unchanged on both.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../[token]/review/[versionId]/page.tsx       | 27 +++++++++-----
 app/review/[versionId]/ReviewPageClient.tsx   | 35 +++++++++++++------
 2 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/app/client/[token]/review/[versionId]/page.tsx b/app/client/[token]/review/[versionId]/page.tsx
index 609b3df..f6168ef 100644
--- a/app/client/[token]/review/[versionId]/page.tsx
+++ b/app/client/[token]/review/[versionId]/page.tsx
@@ -28,6 +28,8 @@ import {
   Clock,
   ChevronLeft,
   ChevronRight,
+  ChevronDown,
+  ChevronUp,
   Copy,
   Check,
   Download,
@@ -357,9 +359,11 @@ export default function ClientReviewPage({
   return (
     <div className="flex flex-col h-screen bg-zinc-950 text-white overflow-hidden">
       {/* Header */}
-      <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">
+      {/* Phones: back + shot + prev/next on the first row, status and decision
+          buttons on a second full-width row. From md: the three-column grid. */}
+      <header className="flex flex-wrap items-center gap-2 md:grid md:grid-cols-[1fr_auto_1fr] 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">
+        <div className="flex items-center gap-3 min-w-0 flex-1 md:flex-none">
           <Link
             href={`/client/${token}`}
             className="text-zinc-400 hover:text-white transition-colors flex items-center gap-1.5 text-sm shrink-0"
@@ -387,7 +391,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 truncate">{contextCode}</span>
                   )}
                   {taskName && (
                     <>
@@ -417,11 +421,11 @@ export default function ClientReviewPage({
           </div>
         </div>
 
-        {/* Center: status badge + decision buttons */}
-        <div className="flex items-center gap-2 shrink-0">
+        {/* Center: status badge + decision buttons (their own row on phones) */}
+        <div className="order-last md:order-none flex w-full md:w-auto 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",
+              "text-xs px-2.5 py-1 rounded-full border inline-flex items-center gap-1 shrink-0 mr-auto md:mr-0",
               approvalStyle
             )}
           >
@@ -542,10 +546,17 @@ export default function ClientReviewPage({
             className="flex items-center justify-center h-10 w-full border-b border-zinc-800 hover:bg-zinc-800/60 transition-colors shrink-0"
             title={commentsOpen ? "Collapse notes" : "Expand notes"}
           >
+            {/* Below the video on phones, so down/up there and right/left from md. */}
             {commentsOpen ? (
-              <ChevronRight className="h-4 w-4 text-zinc-400" />
+              <>
+                <ChevronDown className="h-4 w-4 text-zinc-400 md:hidden" />
+                <ChevronRight className="h-4 w-4 text-zinc-400 hidden md:block" />
+              </>
             ) : (
-              <ChevronLeft className="h-4 w-4 text-zinc-400" />
+              <>
+                <ChevronUp className="h-4 w-4 text-zinc-400 md:hidden" />
+                <ChevronLeft className="h-4 w-4 text-zinc-400 hidden md:block" />
+              </>
             )}
             {!commentsOpen && (
               <MessageSquare className="h-4 w-4 text-zinc-400 mt-1" />
diff --git a/app/review/[versionId]/ReviewPageClient.tsx b/app/review/[versionId]/ReviewPageClient.tsx
index 41ebbbd..a153cc5 100644
--- a/app/review/[versionId]/ReviewPageClient.tsx
+++ b/app/review/[versionId]/ReviewPageClient.tsx
@@ -33,6 +33,7 @@ import {
   XCircle,
   AlertCircle,
   ChevronDown,
+  ChevronUp,
   ChevronRight,
   ChevronLeft,
   ArrowLeft,
@@ -231,8 +232,9 @@ export function ReviewPageClient({
 
   return (
     <div className="flex flex-col h-screen bg-background overflow-hidden">
-      {/* Top bar */}
-      <div className="flex items-center gap-3 px-4 py-2 border-b border-border bg-card shrink-0">
+      {/* Top bar — phones: shot + version on the first row, actions wrap to a
+          second row. From md: one row. */}
+      <div className="flex flex-wrap md:flex-nowrap items-center gap-x-3 gap-y-2 px-4 py-2 border-b border-border bg-card shrink-0">
         <Link
           href={backHref}
           className="text-muted-foreground hover:text-foreground transition-colors"
@@ -247,7 +249,7 @@ export function ReviewPageClient({
           <span className="text-muted-foreground">/</span>
           {contextCode && (
             <>
-              <span className="font-mono text-sm font-semibold">{contextCode}</span>
+              <span className="font-mono text-sm font-semibold truncate">{contextCode}</span>
               <span className="text-muted-foreground">/</span>
             </>
           )}
@@ -284,6 +286,10 @@ export function ReviewPageClient({
           {version.approvalStatus.replace("_", " ")}
         </span>
 
+        {/* Actions: their own full-width row on phones; md:contents puts them
+            back in the top bar's single row, exactly as before. */}
+        {(canShare || canApprove) && (
+        <div className="flex w-full items-center justify-end gap-3 md:contents">
         {/* Share with Client */}
         {canShare && (
           <ShareWithClientButton
@@ -329,10 +335,12 @@ export function ReviewPageClient({
             )}
           </div>
         )}
+        </div>
+        )}
       </div>
 
-      {/* Main content — player + comments */}
-      <div className="flex flex-1 overflow-hidden">
+      {/* Main content — player + comments: stacked on phones, side by side from md */}
+      <div className="flex flex-col md:flex-row flex-1 overflow-hidden">
         {/* Player — 70% */}
         <div className="flex-1 min-w-0 min-h-0 overflow-hidden flex flex-col bg-black">
           <ReviewPlayer
@@ -350,20 +358,27 @@ export function ReviewPageClient({
         {/* Comment panel — collapsible */}
         <div
           className={cn(
-            "shrink-0 flex flex-col border-l border-border transition-all duration-200",
-            commentsOpen ? "w-80 xl:w-96" : "w-10"
+            "shrink-0 flex flex-col border-t md:border-t-0 md:border-l border-border transition-all duration-200",
+            commentsOpen ? "h-[45%] md:h-auto md:w-80 xl:w-96" : "h-10 md:h-auto md:w-10"
           )}
         >
-          {/* Collapse toggle */}
+          {/* Collapse toggle — the panel sits below the video on phones, so
+              the arrow points down/up there and right/left from md. */}
           <button
             onClick={() => setCommentsOpen((o) => !o)}
             className="flex items-center justify-center h-10 w-full border-b border-border hover:bg-muted/50 transition-colors shrink-0"
             title={commentsOpen ? "Collapse comments" : "Expand comments"}
           >
             {commentsOpen ? (
-              <ChevronRight className="h-4 w-4 text-muted-foreground" />
+              <>
+                <ChevronDown className="h-4 w-4 text-muted-foreground md:hidden" />
+                <ChevronRight className="h-4 w-4 text-muted-foreground hidden md:block" />
+              </>
             ) : (
-              <ChevronLeft className="h-4 w-4 text-muted-foreground" />
+              <>
+                <ChevronUp className="h-4 w-4 text-muted-foreground md:hidden" />
+                <ChevronLeft className="h-4 w-4 text-muted-foreground hidden md:block" />
+              </>
             )}
             {!commentsOpen && (
               <MessageSquare className="h-4 w-4 text-muted-foreground mt-1" />