From 1af2a07a57e9df5265d6d3fafe49275dddceb4bd Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 17 Apr 2026 19:09:08 +0300
Subject: [PATCH] fix(markdown): align button order between layouts to avoid
 shifts

---
 .../widgets/FloatingButtonsDefinitions.tsx    |  2 +-
 .../src/widgets/ribbon/NoteActionsCustom.tsx  | 28 +++++++++++--------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/apps/client/src/widgets/FloatingButtonsDefinitions.tsx b/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
index 83cf453051..e8769f0213 100644
--- a/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
+++ b/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
@@ -48,8 +48,8 @@ export type FloatingButtonsList = ((context: FloatingButtonContext) => false | V
 
 export const DESKTOP_FLOATING_BUTTONS: FloatingButtonsList = [
     RefreshBackendLogButton,
-    SwitchSplitOrientationButton,
     ToggleReadOnlyButton,
+    SwitchSplitOrientationButton,
     DisplayModeSwitcher,
     EditButton,
     ShowTocWidgetButton,
diff --git a/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx b/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
index 94c08a1550..7fd397b780 100644
--- a/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
+++ b/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
@@ -72,8 +72,8 @@ export default function NoteActionsCustom(props: NoteActionsCustomProps) {
         >
             <AddChildButton {...innerProps} />
             <RunActiveNoteButton {...innerProps } />
-            <DisplayModeSwitcher {...innerProps} />
             <SwitchSplitOrientationButton {...innerProps} />
+            <DisplayModeSwitcher {...innerProps} />
             <SaveToNoteButton {...innerProps} />
             <RefreshButton {...innerProps} />
             <CopyReferenceToClipboardButton {...innerProps} />
@@ -232,17 +232,21 @@ function DisplayModeSwitcher({ note, isDefaultViewMode }: NoteActionsCustomInner
     }
 
     return (
-        <ButtonGroup size="sm">
-            {buttons.map(({ value, icon, text }) => (
-                <NoteAction
-                    key={value}
-                    icon={icon}
-                    text={text}
-                    active={mode === value}
-                    onClick={() => setDisplayMode(value)}
-                />
-            ))}
-        </ButtonGroup>
+        <>
+            <div className="note-actions-custom-spacer" />
+            <ButtonGroup size="sm">
+                {buttons.map(({ value, icon, text }) => (
+                    <NoteAction
+                        key={value}
+                        icon={icon}
+                        text={text}
+                        active={mode === value}
+                        onClick={() => setDisplayMode(value)}
+                    />
+                ))}
+            </ButtonGroup>
+            <div className="note-actions-custom-spacer" />
+        </>
     );
 }