From 9d218c8728c4bf5728e97d8e71a3a132d004c514 Mon Sep 17 00:00:00 2001
From: Jose Luis <josele.96@gmail.com>
Date: Fri, 20 Mar 2026 18:08:21 +0100
Subject: [PATCH] fix: replace verify textarea with Open IDE button + fix
 gutter line numbers

- Hide the inline verify textarea, show a clean "Open IDE" button instead
- Add white-space:pre to gutter div so line numbers render one per line
- Match gutter font-family with textarea for consistent alignment

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 editor.html | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/editor.html b/editor.html
index 668ea2a..54324ad 100644
--- a/editor.html
+++ b/editor.html
@@ -126,10 +126,10 @@ body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', syste
 #code-editor-gutter {
     width: 48px; padding: 12px 8px 12px 0;
     background: #181825; text-align: right;
-    font-family: 'Cascadia Code', 'Fira Code', monospace;
+    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
     font-size: 13px; line-height: 1.6;
     color: #555; user-select: none; overflow: hidden;
-    flex-shrink: 0;
+    flex-shrink: 0; white-space: pre;
 }
 
 /* Main textarea */
@@ -992,9 +992,10 @@ function updateProps() {
             const portsStr = (ent.ports || []).map(p => `${p.name}:${p.dir}`).join(', ');
             html += propText('Ports', 'ports', portsStr);
             html += `<div class="prop-row" style="font-size:10px;color:#888;">Format: A:out, B:out, C:in</div>`;
-            // Verify code editor with expand button
+            // Verify code — hidden textarea + "Open IDE" button
             const verifyCode = ent.verify || `(test) => {\n  return test({A:0, B:0}).C === 0\n      && test({A:1, B:1}).C === 1;\n}`;
-            html += `<div class="prop-row" style="align-items:flex-start;"><label>Verify (JS)</label><textarea id="verify-textarea" data-prop="verify" style="font-family:monospace;font-size:11px;min-height:80px;white-space:pre;">${esc(verifyCode)}</textarea><button class="btn-expand-code" id="btn-expand-verify" title="Open fullscreen editor (Ctrl+E)">⛶</button></div>`;
+            html += `<textarea id="verify-textarea" data-prop="verify" style="display:none;">${esc(verifyCode)}</textarea>`;
+            html += `<div class="prop-row"><label>Verify (JS)</label><button class="btn-expand-code" id="btn-expand-verify" style="flex:1;padding:6px 12px;font-size:12px;">⚡ Open IDE</button></div>`;
         }
     }