From e5a0deb777be91eef119be45ca9f5a95aadad0c6 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Tue, 5 Aug 2025 17:18:41 +0200
Subject: [PATCH] style: move icons on timeline toolbar

---
 .../src/components/editor/preview-panel.tsx   | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index b92922d4..cc58a598 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -835,12 +835,25 @@ function PreviewToolbar({
       className="flex justify-end gap-2 h-auto pb-5 pr-5 pt-4 w-full"
     >
       <div className="flex items-center gap-2">
+        <Button
+          variant="text"
+          size="icon"
+          onClick={toggle}
+          disabled={!hasAnyElements}
+          className="h-auto p-0"
+        >
+          {isPlaying ? (
+            <Pause className="h-3 w-3" />
+          ) : (
+            <Play className="h-3 w-3" />
+          )}
+        </Button>
         <Popover>
           <PopoverTrigger asChild>
             <Button
               variant="text"
               size="icon"
-              className="h-auto p-0"
+              className="h-auto p-0 mr-1"
               title="Toggle layout guide"
             >
               <SocialsIcon className="!size-6" />
@@ -883,19 +896,6 @@ function PreviewToolbar({
             </div>
           </PopoverContent>
         </Popover>
-        <Button
-          variant="text"
-          size="icon"
-          onClick={toggle}
-          disabled={!hasAnyElements}
-          className="h-auto p-0"
-        >
-          {isPlaying ? (
-            <Pause className="h-3 w-3" />
-          ) : (
-            <Play className="h-3 w-3" />
-          )}
-        </Button>
         <Button
           variant="text"
           size="icon"