fix(web): expand editor content when outline is collapsed

apps/web/src/components/EditorOutline.tsx

@@ -14,6 +14,8 @@ type OutlineItem = {
 type EditorOutlineProps = {
   editor: Editor | null;
   scrollContainer: HTMLDivElement | null;
+  collapsed: boolean;
+  onCollapsedChange: (collapsed: boolean) => void;
 };
 
 const stripLeadingEmoji = (str: string): string => {
@@ -42,10 +44,9 @@ const getOutlineItems = (editor: Editor): OutlineItem[] => {
   return items;
 };
 
-export const EditorOutline = ({ editor, scrollContainer }: EditorOutlineProps) => {
+export const EditorOutline = ({ editor, scrollContainer, collapsed, onCollapsedChange }: EditorOutlineProps) => {
   const { t } = useTranslation();
   const [items, setItems] = useState<OutlineItem[]>([]);
-  const [collapsed, setCollapsed] = useState(false);
   const [activePos, setActivePos] = useState<number | null>(null);
 
   const refresh = useCallback(() => {
@@ -174,7 +175,7 @@ export const EditorOutline = ({ editor, scrollContainer }: EditorOutlineProps) =
             "group flex items-center text-left text-[11px] font-bold uppercase tracking-wider text-slate-400 transition-colors hover:text-slate-600",
             collapsed ? "h-7 w-7 justify-center rounded-md hover:bg-slate-100" : "gap-1.5"
           )}
-          onClick={() => setCollapsed((value) => !value)}
+          onClick={() => onCollapsedChange(!collapsed)}
           aria-expanded={!collapsed}
           aria-label={t(collapsed ? "editor.showOutline" : "editor.hideOutline")}
           title={t(collapsed ? "editor.showOutline" : "editor.hideOutline")}

apps/web/src/components/EditorPane.tsx

@@ -67,6 +67,7 @@ import { RevisionHistoryDialog } from "./dialogs/RevisionHistoryDialog";
 import { api } from "@/lib/api";
 import { consumeStandaloneMobileEditorReturn, openStandaloneMobileEditor } from "@/lib/mobile-editor";
 import { cn, formatDateTime, parseTagsText } from "@/lib/utils";
+import { EDITOR_CONTENT_MAX_WIDTH, EDITOR_CONTENT_MAX_WIDTH_COLLAPSED } from "@/lib/workspace-ui";
 import {
   countMemoCharacters,
   docToMarkdown,
@@ -1167,6 +1168,7 @@ const RichEditorPane = ({
   const [isMarkdownMode, setIsMarkdownMode] = useState(false);
   const [mobileToolbarOpen, setMobileToolbarOpen] = useState(false);
   const [mobileImeDebugOpen, setMobileImeDebugOpen] = useState(false);
+  const [editorOutlineCollapsed, setEditorOutlineCollapsed] = useState(false);
   const [mobileImeDebugActiveElement, setMobileImeDebugActiveElement] = useState(getActiveElementLabel);
   const [mobileImeDebugEvents, setMobileImeDebugEvents] = useState<MobileImeDebugEntry[]>([]);
   const [wechatCopyState, setWechatCopyState] = useState<"idle" | "copying" | "copied" | "error">("idle");
@@ -2981,8 +2983,11 @@ const RichEditorPane = ({
               "min-w-0 flex-1 transition-[max-width] duration-200",
               desktopFocusMode
                 ? "max-w-[960px]"
-                : "max-w-[var(--editor-content-max-width,880px)]"
+                : "max-w-none"
             )}
+            style={!desktopFocusMode ? {
+              maxWidth: editorOutlineCollapsed ? EDITOR_CONTENT_MAX_WIDTH_COLLAPSED : EDITOR_CONTENT_MAX_WIDTH,
+            } : undefined}
           >
             {useMobilePlainTextEditor ? (
               <>
@@ -3036,7 +3041,12 @@ const RichEditorPane = ({
             )}
           </div>
           {!isMobileViewport && !useMobilePlainTextEditor && !useMarkdownSourceEditor && (
-            <EditorOutline editor={editor} scrollContainer={editorScrollContainer} />
+            <EditorOutline
+              editor={editor}
+              scrollContainer={editorScrollContainer}
+              collapsed={editorOutlineCollapsed}
+              onCollapsedChange={setEditorOutlineCollapsed}
+            />
           )}
         </div>
       </div>

apps/web/src/lib/workspace-ui.ts

@@ -7,3 +7,4 @@ export const WORKSPACE_PAGE_TITLE_CLASSNAME = "text-sm font-semibold leading-5 t
  */
 export const EDITOR_OUTLINE_WIDTH = "300px";
 export const EDITOR_CONTENT_MAX_WIDTH = "880px";
+export const EDITOR_CONTENT_MAX_WIDTH_COLLAPSED = "1200px";

package.json

@@ -1,6 +1,6 @@
 {
   "name": "edgeever",
-  "version": "1.6.10",
+  "version": "1.6.11",
   "private": true,
   "type": "module",
   "workspaces": [