From 951fdaec700dced6172e6d2324a7b357380acad4 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 19:17:51 +0200
Subject: [PATCH] chore(video_player): change button alignment

---
 .../src/widgets/type_widgets/file/Video.css    | 18 +++++++++++++++---
 .../src/widgets/type_widgets/file/Video.tsx    | 17 +++++++++++------
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.css b/apps/client/src/widgets/type_widgets/file/Video.css
index a879014f8e..1ecb5db8ed 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.css
+++ b/apps/client/src/widgets/type_widgets/file/Video.css
@@ -14,7 +14,7 @@
         bottom: 0;
         left: 0;
         right: 0;
-        padding: 1em;
+        padding: 1.25em;
         display: flex;
         flex-direction: column;
         gap: 0.5em;
@@ -40,8 +40,20 @@
 
     .video-buttons-row {
         display: flex;
-        align-items: center;
-        justify-content: space-between;
+
+        > * {
+            flex: 1;
+        }
+
+        .center {
+            display: flex;
+            justify-content: center;
+        }
+
+        .right {
+            display: flex;
+            justify-content: flex-end;
+        }
     }
 
     .video-volume-row {
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index 3a7e87ef6a..db388050c6 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -42,12 +42,17 @@ export default function VideoPreview({ note }: { note: FNote }) {
             <div className="video-preview-controls">
                 <SeekBar videoRef={videoRef} />
                 <div class="video-buttons-row">
-                    <ActionButton
-                        icon={playing ? "bx bx-pause" : "bx bx-play"}
-                        text={playing ? "Pause" : "Play"}
-                        onClick={togglePlayback}
-                    />
-                    <VolumeControl videoRef={videoRef} />
+                    <div className="left" />
+                    <div className="center">
+                        <ActionButton
+                            icon={playing ? "bx bx-pause" : "bx bx-play"}
+                            text={playing ? "Pause" : "Play"}
+                            onClick={togglePlayback}
+                        />
+                    </div>
+                    <div className="right">
+                        <VolumeControl videoRef={videoRef} />
+                    </div>
                 </div>
             </div>
         </div>