style: move icons on timeline toolbar

1 files 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" />
@@ -886,19 +899,6 @@ function PreviewToolbar({
         <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"
           className="size-4!"
           onClick={onToggleExpanded}
           title="Enter fullscreen"