UPDATE page layout

src/main/frontend/components/ClipConfig.tsx

@@ -1,14 +1,15 @@
 export default function ClipConfig() {
     return (
-        <div className={"flex flex-col gap-2"}>
+        <div className={"flex flex-col gap-2 p-10 rounded-md"}>
+            <h2 className={"text-3xl font-bold text-gray-800 mb-4 underline"}>Clip Export Settings</h2>
             <div className="flex items-center gap-2">
                 <label htmlFor="resolution"
-                       className={"w-24"}
+                       className={"w-full"}
                 >Resolution: </label>
                 <select id="resolution"
                         name="resolution"
                         defaultValue="1280,720"
-                        className={"border-black bg-gray-200 p-1 rounded-md"}>
+                        className={"border-black bg-gray-200 p-2 rounded-md w-full"}>
                     <option value="3840,2160">2160p (4K)</option>
                     <option value="2560,1440">1440p (QHD)</option>
                     <option value="1920,1080">1080p (Full HD)</option>
@@ -20,12 +21,12 @@ export default function ClipConfig() {
 
             <div className="flex items-center gap-2">
                 <label htmlFor="fps"
-                       className={"w-24"}
+                       className={"w-full"}
                 >FPS: </label>
                 <select id="fps"
                         name="fps"
                         defaultValue="30"
-                        className={"border-black bg-gray-200 p-1 rounded-md"}>
+                        className={"border-black bg-gray-200 p-2 rounded-md w-full"}>
                     <option value="60">60</option>
                     <option value="30">30</option>
                     <option value="15">15</option>
@@ -33,13 +34,13 @@ export default function ClipConfig() {
             </div>
 
             <div className="flex items-center gap-2">
-                <label className={"w-24"}>
+                <label className={"w-full"}>
                     File Size (mb):
                 </label>
                 <input type="number"
                        min="1"
                        defaultValue="10"
-                       className={"border-black bg-gray-200 p-1 rounded-md"}
+                       className={"border-black bg-gray-200 p-2 rounded-md w-full"}
                 />
             </div>
         </div>

src/main/frontend/index.css

@@ -12,6 +12,8 @@
     --color-text: oklch(0.17 0.01 270);       /* Dark Slate (#111827) */
     --color-background: oklch(0.98 0.005 250);/* Soft off-white (#F9FAFB) */
 
+    --color-primary-pressed: oklch(0.55 0.21 254 / 0.5);
+
     /* Easing */
     --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
     --ease-snappy: cubic-bezier(0.2, 0, 0, 1);

src/main/frontend/views/video/{id}.tsx

@@ -26,11 +26,10 @@ export default function VideoId() {
     }, [id]);
 
     return (
-        <div className={"flex flex-col max-w-3xl m-auto align-middle"}>
+        <div className={"grid grid-cols-[70%_30%]"}>
             <video
                    ref={videoRef}
-                   width={"600"}
+                   className={"w-full rounded-lg shadow-lg border border-gray-300 bg-black m-auto"}>
-                   className={"w-full max-w-3xl rounded-lg shadow-lg border border-gray-300 bg-black m-auto"}>
                 <source src={videoUrl} type="video/mp4" />
                 <source src={videoUrl} type="video/webm" />
                 <source src={videoUrl} type="video/ogg" />
@@ -38,6 +37,8 @@ export default function VideoId() {
             </video>
 
 
+            <ClipConfig />
+
             {metadata &&
                 <div>
                     <Playbar
@@ -61,10 +62,12 @@ export default function VideoId() {
                         setClipRangeValue={setClipRangeValue}
                         className={"w-full mb-10 bg-primary"}
                     />
+                </div>}
+
+            <button
+                className={"bg-primary text-text p-2 rounded-lg hover:bg-primary-pressed h-10 w-3/4 m-auto"}
+            >Export</button>
 
-                    <ClipConfig />
-                </div>
-            }
         </div>
     );
 }