Dynamic column calculation

Author: mgiannopoulos24

src/editor.ts

@@ -2,6 +2,7 @@
 import * as monaco from 'monaco-editor';
 import { EXAMPLES } from './examples.js';
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import { calculateColumns } from './utils.js';
 
 // Helper to get ?code param from URL
 function getCodeFromQuery(): string | null {
@@ -84,13 +85,14 @@ export function initMonaco(runCode: () => void, clearConsole: () => void): void
         return 14;
     };
 
-    // Responsive word wrap column based on screen width
-    const getWordWrapColumn = (): number => {
-        const width = window.innerWidth;
-        if (width <= 375) return 40;
-        if (width <= 480) return 50;
-        if (width <= 768) return 55;
-        return 80;
+    // Calculate word wrap column based on actual editor container width
+    const calculateWordWrapColumn = (): number => {
+        const fontSize = getFontSize();
+        return calculateColumns(
+            editorContainer,
+            "'JetBrains Mono', 'Fira Code', Consolas, monospace",
+            `${fontSize}px`
+        );
     };
 
     editor = monaco.editor.create(editorContainer, {
@@ -106,7 +108,7 @@ export function initMonaco(runCode: () => void, clearConsole: () => void): void
         tabSize: 4,
         insertSpaces: true,
         wordWrap: 'wordWrapColumn',
-        wordWrapColumn: getWordWrapColumn(),
+        wordWrapColumn: calculateWordWrapColumn(),
         lineNumbers: 'on',
         renderLineHighlight: 'line',
         cursorBlinking: 'smooth',
@@ -115,13 +117,24 @@ export function initMonaco(runCode: () => void, clearConsole: () => void): void
         padding: { top: 12, bottom: 12 },
     });
 
-    // Update font size on window resize
-    const updateFontSize = () => {
+    // Update font size and word wrap column on window resize
+    const updateEditorOptions = () => {
         if (editor) {
-            editor.updateOptions({ fontSize: getFontSize() });
+            editor.updateOptions({ 
+                fontSize: getFontSize(),
+                wordWrapColumn: calculateWordWrapColumn()
+            });
         }
     };
-    window.addEventListener('resize', updateFontSize);
+    
+    // Use ResizeObserver for more accurate container size tracking
+    const resizeObserver = new ResizeObserver(() => {
+        updateEditorOptions();
+    });
+    resizeObserver.observe(editorContainer);
+    
+    // Also listen to window resize as fallback
+    window.addEventListener('resize', updateEditorOptions);
 
     // Update ?code param on every change
     editor.onDidChangeModelContent(() => {

src/main.ts

@@ -5,6 +5,7 @@ import { initMonaco, getEditor } from './editor.js';
 import { initCompiler, runCode } from './env.js';
 import { Terminal } from '@xterm/xterm';
 import '@xterm/xterm/css/xterm.css';
+import { calculateColumns } from './utils.js';
 
 // ============================================
 // DOM ELEMENTS
@@ -49,13 +50,9 @@ const elements: Elements = {
     sendInputBtn: $('send-input-btn') as HTMLButtonElement
 };
 
-// Responsive cols based on screen width
-const getCols = (): number => {
-    const width = window.innerWidth;
-    if (width <= 375) return 40;
-    if (width <= 480) return 48;
-    if (width <= 768) return 60;
-    return 80;
+// Calculate columns based on actual container width
+const calculateCols = (): number => {
+    return calculateColumns(elements.consoleOutput);
 };
 
 // Initialize xterm.js terminal
@@ -66,12 +63,28 @@ const term = new Terminal({
         cursor: '#58a6ff',
     },
     rows: 48,
-    cols: getCols(),
+    cols: calculateCols(),
     convertEol: true,
     scrollback: 10000,
 });
 term.open(elements.consoleOutput);
 
+// Resize terminal when window or container size changes
+const resizeTerminal = (): void => {
+    const cols = calculateCols();
+    const rows = term.rows || 48;
+    term.resize(cols, rows);
+};
+
+// Use ResizeObserver for more accurate container size tracking
+const resizeObserver = new ResizeObserver(() => {
+    resizeTerminal();
+});
+resizeObserver.observe(elements.consoleOutput);
+
+// Also listen to window resize as fallback
+window.addEventListener('resize', resizeTerminal);
+
 let isRunning = false;
 
 // ============================================

src/utils.ts

@@ -0,0 +1,38 @@
+/**
+ * Calculate the number of columns that fit in a container based on its width
+ * and the actual character width of the font being used.
+ * 
+ * @param container - The HTML element to measure
+ * @param fontFamily - Optional font family override (defaults to container's computed style)
+ * @param fontSize - Optional font size override (defaults to container's computed style)
+ * @returns The number of columns that fit in the container
+ */
+export function calculateColumns(
+    container: HTMLElement,
+    fontFamily?: string,
+    fontSize?: string
+): number {
+    const computedStyle = window.getComputedStyle(container);
+    const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
+    const paddingRight = parseFloat(computedStyle.paddingRight) || 0;
+    const availableWidth = container.clientWidth - paddingLeft - paddingRight;
+    
+    // Measure actual character width by creating a temporary element
+    const measureEl = document.createElement('span');
+    measureEl.style.position = 'absolute';
+    measureEl.style.visibility = 'hidden';
+    measureEl.style.whiteSpace = 'pre';
+    measureEl.style.fontFamily = fontFamily || computedStyle.fontFamily;
+    measureEl.style.fontSize = fontSize || computedStyle.fontSize;
+    measureEl.style.fontWeight = computedStyle.fontWeight;
+    measureEl.textContent = 'M'; // 'M' is typically the widest character
+    document.body.appendChild(measureEl);
+    
+    const charWidth = measureEl.offsetWidth;
+    document.body.removeChild(measureEl);
+    
+    // Calculate columns, ensuring at least 1 column
+    const cols = Math.floor(availableWidth / charWidth);
+    return Math.max(1, cols);
+}
+