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>