From 400692758a6df3742bc74f08eb71f6833fd4db43 Mon Sep 17 00:00:00 2001
From: Dylan De Faoite <dylanseandefaoite@gmail.com>
Date: Wed, 16 Sep 2026 20:10:43 +0100
Subject: [PATCH] move save between two markers to above clipping

---
 frontend/src/pages/StreamControl.tsx | 36 ++++++++++++++--------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/frontend/src/pages/StreamControl.tsx b/frontend/src/pages/StreamControl.tsx
index 887028b..6002abc 100644
--- a/frontend/src/pages/StreamControl.tsx
+++ b/frontend/src/pages/StreamControl.tsx
@@ -256,24 +256,6 @@ const StreamControl = () => {
 
                     {/* Forefront actions */}
                     <div className="flex flex-col gap-5">
-                        <Box className="p-6 flex flex-col gap-3">
-                            <CardHeader icon={Scissors} title="Clip the last few seconds" />
-                            <div className="flex flex-col gap-1.5">
-                                <label className={labelClass}>Duration (seconds)</label>
-                                <input
-                                    type="number"
-                                    min={1}
-                                    value={clipDuration}
-                                    onChange={(e) => setClipDuration(Number(e.target.value))}
-                                    className={inputClass}
-                                />
-                            </div>
-                            <input type="text" placeholder="Title" value={clipTitle} onChange={(e) => setClipTitle(e.target.value)} className={inputClass} />
-                            <textarea placeholder="Description" value={clipDescription} onChange={(e) => setClipDescription(e.target.value)} rows={2} className={inputClass + " resize-none"} />
-                            {clipError && <p className="text-sm text-error">{clipError}</p>}
-                            <PrimaryButton onClick={handleClip} className="self-start mt-auto">Clip</PrimaryButton>
-                        </Box>
-
                         <Box className="p-6 flex flex-col gap-3">
                             <CardHeader icon={Film} title="Save between two markers" accent="accent" />
                             {markers.length < 2 ? (
@@ -303,6 +285,24 @@ const StreamControl = () => {
                             <PrimaryButton onClick={handleSaveByMarkers} disabled={markers.length < 2} className="self-start mt-auto">Save</PrimaryButton>
                         </Box>
 
+                        <Box className="p-6 flex flex-col gap-3">
+                            <CardHeader icon={Scissors} title="Clip the last few seconds" />
+                            <div className="flex flex-col gap-1.5">
+                                <label className={labelClass}>Duration (seconds)</label>
+                                <input
+                                    type="number"
+                                    min={1}
+                                    value={clipDuration}
+                                    onChange={(e) => setClipDuration(Number(e.target.value))}
+                                    className={inputClass}
+                                />
+                            </div>
+                            <input type="text" placeholder="Title" value={clipTitle} onChange={(e) => setClipTitle(e.target.value)} className={inputClass} />
+                            <textarea placeholder="Description" value={clipDescription} onChange={(e) => setClipDescription(e.target.value)} rows={2} className={inputClass + " resize-none"} />
+                            {clipError && <p className="text-sm text-error">{clipError}</p>}
+                            <PrimaryButton onClick={handleClip} className="self-start mt-auto">Clip</PrimaryButton>
+                        </Box>
+
                         <Box className="p-5 flex flex-col gap-3">
                             <CardHeader icon={Activity} title="Recent actions" />
                             {jobs.length === 0 ? (