From 38f32c58072da2cc2d3213df977c36a3aed260fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=9C=E7=81=AF?= <me@lampese.com>
Date: Tue, 20 Oct 2026 03:03:38 +0800
Subject: [PATCH] fix: open desktop sidebar help menu to the right

Align the desktop Help popup with the bottom of its trigger and preserve
upward placement on mobile. Document the placement in the component README.

Model: gpt-6.1-sol
---
 packages/components/src/components/README.md        | 4 +++-
 packages/components/src/components/loro-sidebar.tsx | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/README.md b/packages/components/src/components/README.md
index feb05d58c..386d9b361 100644
--- a/packages/components/src/components/README.md
+++ b/packages/components/src/components/README.md
@@ -98,7 +98,9 @@ and [details group](../../../../.agents/notes/implemented/feature/2026-10-18-sid
   and its [layout-handoff follow-up](../../../../.agents/notes/implemented/feature/2026-10-19-boot-shell-layout-handoff.md).
 
 - Sidebar footer: Help (`?`), Archive, Settings, in that order. Help retains the
-  documentation, GitHub repository, community, GitHub Issues feedback, and bug-report menu; Archive is a direct
+  documentation, GitHub repository, community, GitHub Issues feedback, and bug-report menu.
+  Desktop Help opens to the right of its button with bottom edges aligned; mobile Help opens upward.
+  Archive is a direct
   button and becomes the return action while open. Desktop controls are 28px and use
   the navigation rows' ink and fills (`sidebarSurface.iconButton`, shared with the
   header's icon buttons); mobile actions retain their touch targets. See the
diff --git a/packages/components/src/components/loro-sidebar.tsx b/packages/components/src/components/loro-sidebar.tsx
index 735b90788..ad4ad8925 100644
--- a/packages/components/src/components/loro-sidebar.tsx
+++ b/packages/components/src/components/loro-sidebar.tsx
@@ -1671,7 +1671,7 @@ export const LoroSidebar = memo(function LoroSidebar({
                   </IconButton>
                 }
               />
-              <Menu.Content side="top" align="end" className="min-w-[160px]">
+              <Menu.Content side={isMobile ? 'top' : 'right'} align="end" className="min-w-[160px]">
                 <Menu.Item icon={BookOpen} onClick={() => onDocsClicked?.()}>
                   {mergedLabels.docs}
                 </Menu.Item>