From 724b0cbefeb19ae0cfafd5a61b396cf62ca0a5dd Mon Sep 17 00:00:00 2001
From: twotalesanimation <80506065+twotalesanimation@users.noreply.github.com>
Date: Fri, 18 Sep 2026 08:13:13 +0200
Subject: [PATCH] fix(shot-status): Group by buttons fit on phones

The project picker (fixed 288px) and the Group by buttons shared one
unwrapping row, so on a phone the buttons ran off the right edge. Below md
the picker fills the row and Group by wraps onto its own line; from md it
is one row as before.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 app/(dashboard)/shot-status/ShotStatusClient.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/(dashboard)/shot-status/ShotStatusClient.tsx b/app/(dashboard)/shot-status/ShotStatusClient.tsx
index 2c7d82f..a34a42f 100644
--- a/app/(dashboard)/shot-status/ShotStatusClient.tsx
+++ b/app/(dashboard)/shot-status/ShotStatusClient.tsx
@@ -1132,10 +1132,12 @@ export function ShotStatusClient({
       </div>
 
       {/* Project selector */}
-      <div className="flex items-center gap-3">
+      {/* Phones: the picker fills the row and "Group by" wraps onto its own
+          line. From md: one row, as on desktop. */}
+      <div className="flex flex-wrap items-center gap-3">
         <label className="text-sm text-zinc-400 shrink-0">Project:</label>
         <Select value={selectedProjectId ?? ""} onValueChange={handleProjectChange}>
-          <SelectTrigger className="w-72">
+          <SelectTrigger className="flex-1 min-w-0 md:flex-none md:w-72">
             <SelectValue placeholder="Select a project..." />
           </SelectTrigger>
           <SelectContent>
@@ -1148,7 +1150,7 @@ export function ShotStatusClient({
           </SelectContent>
         </Select>
         {selectedProject && !isEpisodic && (
-          <>
+          <div className="flex w-full md:w-auto items-center gap-3">
             <span className="text-sm text-zinc-500">Group by:</span>
             {(["flat", "scene", "group"] as const).map((mode) => (
               <button
@@ -1164,7 +1166,7 @@ export function ShotStatusClient({
                 {mode === "flat" ? "None" : mode === "scene" ? "Scene" : "Group"}
               </button>
             ))}
-          </>
+          </div>
         )}
       </div>