From 80aac520661a0d21a4103d07bdfd5f569aa9a8de Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 17 Apr 2026 20:38:35 +0300
Subject: [PATCH] feat(markdown): improve display mode selector on mobile

---
 .../src/widgets/ribbon/NoteActionsCustom.css  | 27 +++++++++++++++++++
 .../src/widgets/ribbon/NoteActionsCustom.tsx  | 24 +++++++++--------
 2 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/apps/client/src/widgets/ribbon/NoteActionsCustom.css b/apps/client/src/widgets/ribbon/NoteActionsCustom.css
index 4962f439a6..5e232b114e 100644
--- a/apps/client/src/widgets/ribbon/NoteActionsCustom.css
+++ b/apps/client/src/widgets/ribbon/NoteActionsCustom.css
@@ -2,3 +2,30 @@ body.mobile .note-actions-custom:not(:empty) {
     margin-bottom: calc(var(--bs-dropdown-divider-margin-y) * 2);
 }
 
+body.mobile .note-actions-custom-display-mode {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+
+    & > .dropdown-item {
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        gap: 0.25em;
+        padding-inline: 0.25em;
+        font-size: 0.85em;
+        border-radius: 0 !important;
+        border: 0 !important;
+    }
+
+    & > .dropdown-item:first-child {
+        border-start-start-radius: var(--bs-border-radius) !important;
+        border-end-start-radius: var(--bs-border-radius) !important;
+    }
+
+    & > .dropdown-item:last-child {
+        border-start-end-radius: var(--bs-border-radius) !important;
+        border-end-end-radius: var(--bs-border-radius) !important;
+    }
+}
+
diff --git a/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx b/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
index 7fd397b780..15120fd2aa 100644
--- a/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
+++ b/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
@@ -218,17 +218,19 @@ function DisplayModeSwitcher({ note, isDefaultViewMode }: NoteActionsCustomInner
     ];
 
     if (cachedIsMobile) {
-        return <>
-            {buttons.map(({ value, icon, text }) => (
-                <NoteAction
-                    key={value}
-                    icon={icon}
-                    text={text}
-                    active={mode === value}
-                    onClick={() => setDisplayMode(value)}
-                />
-            ))}
-        </>;
+        return (
+            <div className="note-actions-custom-display-mode">
+                {buttons.map(({ value, icon, text }) => (
+                    <NoteAction
+                        key={value}
+                        icon={icon}
+                        text={text}
+                        active={mode === value}
+                        onClick={() => setDisplayMode(value)}
+                    />
+                ))}
+            </div>
+        );
     }
 
     return (