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

1 files changed, 3 insertions, 1 deletions

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%",