From 4bd42f9c508345391806eb7c5c2ed39863764695 Mon Sep 17 00:00:00 2001
From: Clawd <ai@clawd.bot>
Date: Sat, 28 Feb 2026 14:47:43 -0800
Subject: Fix CodeMirror line wrapping and container overflow

- Add EditorView.lineWrapping for soft word wrap
- Fix container CSS to prevent horizontal overflow
- Add min-width: 0 to document-pane for proper flex shrinking
- Add overflow: hidden to contain the editor
---
 renderer/src/components/DocumentPane.tsx | 4 +++-
 renderer/src/styles/globals.css          | 8 ++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

(limited to 'renderer/src')

diff --git a/renderer/src/components/DocumentPane.tsx b/renderer/src/components/DocumentPane.tsx
index cf777b1..c5f456c 100644
--- a/renderer/src/components/DocumentPane.tsx
+++ b/renderer/src/components/DocumentPane.tsx
@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { EditorState } from "@codemirror/state";
-import { EditorView, keymap, lineNumbers, highlightActiveLine } from "@codemirror/view";
+import { EditorView, keymap, lineNumbers, highlightActiveLine, drawSelection } from "@codemirror/view";
 import { markdown } from "@codemirror/lang-markdown";
 import { languages } from "@codemirror/language-data";
 import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
@@ -43,12 +43,14 @@ function MarkdownEditor({
       extensions: [
         lineNumbers(),
         highlightActiveLine(),
+        drawSelection(),
         history(),
         keymap.of([...defaultKeymap, ...historyKeymap]),
         markdown({ codeLanguages: languages }),
         oneDark,
         updateListener,
         EditorView.editable.of(!disabled),
+        EditorView.lineWrapping,
         EditorView.theme({
           "&": {
             height: "100%",
diff --git a/renderer/src/styles/globals.css b/renderer/src/styles/globals.css
index f115734..7ad199e 100644
--- a/renderer/src/styles/globals.css
+++ b/renderer/src/styles/globals.css
@@ -113,6 +113,8 @@ body {
   display: flex;
   flex-direction: column;
   border-right: 1px solid var(--border);
+  min-width: 0;
+  overflow: hidden;
 }
 
 .document-header {
@@ -155,10 +157,16 @@ body {
 .codemirror-editor {
   flex: 1;
   overflow: hidden;
+  min-height: 0;
 }
 
 .codemirror-editor .cm-editor {
   height: 100%;
+  max-width: 100%;
+}
+
+.codemirror-editor .cm-scroller {
+  overflow: auto !important;
 }
 
 .codemirror-editor .cm-gutters {
-- 
cgit v1.2.3