feat(renderer): Add dynamic max width calculation for editor content

Implement character width measurement using DOM probe
Calculate and update max width based on longest line in code
Apply min-width to code content element for proper scrolling
Adjust gutter position and diff highlighting colors in styles

Author: vipmax

anycode-base/src/renderer/Renderer.ts

@@ -44,6 +44,9 @@ export class Renderer {
     private completionRenderer: CompletionRenderer;
 
     private visualRows: VisualRow[] = [];
+    
+    private maxWidth: number = 0;
+    private charWidth: number = 0;
 
     constructor(
         container: HTMLDivElement,
@@ -164,6 +167,8 @@ export class Renderer {
         if (search && search.isActive()) {
             this.searchRenderer.updateSearchHighlights(search);
         }
+        
+        this.updateMaxWidth(code);
     }
 
     /**
@@ -598,6 +603,8 @@ export class Renderer {
                 this.renderSelection(code, selection!);
             }
         }
+        
+        this.updateMaxWidth(code);
     }
 
     private ensureSpacers(container: HTMLElement) {
@@ -824,4 +831,46 @@ export class Renderer {
     public clearAllDiffs(): void {
         this.diffRenderer.clearAllDiffs();
     }
+
+    private getCharWidth(): number {
+        if (this.charWidth > 0) return this.charWidth;
+
+        const probe = document.createElement('span');
+        probe.textContent = 'M';
+        probe.style.position = 'absolute';
+        probe.style.visibility = 'hidden';
+        probe.style.whiteSpace = 'pre';
+        probe.style.pointerEvents = 'none';
+
+        const computed = window.getComputedStyle(this.codeContent);
+        probe.style.fontFamily = computed.fontFamily;
+        probe.style.fontSize = computed.fontSize;
+        probe.style.fontWeight = computed.fontWeight;
+        probe.style.letterSpacing = computed.letterSpacing;
+
+        this.codeContent.appendChild(probe);
+        const measured = probe.getBoundingClientRect().width;
+        probe.remove();
+
+        this.charWidth = measured > 0 ? measured : 8;
+        return this.charWidth;
+    }
+
+    private updateMaxWidth(code: Code): void {
+        const charW = this.getCharWidth();
+        const totalLines = code.linesLength();
+        let maxW = 0;
+
+        for (let i = 0; i < totalLines; i++) {
+            const width = code.lineLength(i) * charW;
+            if (width > maxW) {
+                maxW = width;
+            }
+        }
+
+        this.maxWidth = maxW;
+        if (this.maxWidth > 0) {
+            this.codeContent.style.minWidth = `${this.maxWidth + 100}px`;
+        }
+    }
 }

anycode-base/src/styles.css

@@ -30,7 +30,7 @@
 
 .anyeditor .gutter {
   position: sticky;
-  left: 31px;
+  left: 32px;
   user-select: none;
   pointer-events: auto;
   background: inherit;
@@ -94,7 +94,7 @@
 }
 
 .diff-added {
-  background-color: rgba(76, 175, 79, 0.311);
+  background-color: rgba(76, 175, 79, 0.206);
   position: relative;
 }
 
@@ -105,7 +105,7 @@
   top: 0;
   bottom: 0;
   width: 3px;
-  background-color: rgba(76, 175, 80, 0.5);
+  background-color: rgba(76, 175, 79, 0.405);
 }
 
 .gutter .ln.diff-deleted {