Add constraints on bot code editor window size

2026-06-11 08:54:51 +02:00 · 2026-01-27 19:21:38 -08:00
parent 6ef6ca4553
commit ccafd70388
8 changed files with 45 additions and 34 deletions
@@ -13,8 +13,8 @@
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />
-    <script type="module" crossorigin src="/assets/index-LNhn5rJq.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-9kq4Muxx.css">
+    <script type="module" crossorigin src="/assets/index-BtBXI4sW.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DiCOP9Mw.css">
  </head>
  <body>
    <div id="root"></div>
@@ -10,19 +10,21 @@ interface BotCodeEditorProps {

 export function BotCodeEditor({ value, onChange, id }: BotCodeEditorProps) {
  return (
-    <CodeMirror
-      value={value}
-      onChange={onChange}
-      extensions={[python()]}
-      theme={oneDark}
-      height="256px"
-      basicSetup={{
-        lineNumbers: true,
-        foldGutter: false,
-        highlightActiveLine: true,
-      }}
-      className="rounded-md border border-input overflow-hidden text-sm"
-      id={id}
-    />
+    <div className="w-full overflow-hidden rounded-md border border-input">
+      <CodeMirror
+        value={value}
+        onChange={onChange}
+        extensions={[python()]}
+        theme={oneDark}
+        height="256px"
+        basicSetup={{
+          lineNumbers: true,
+          foldGutter: false,
+          highlightActiveLine: true,
+        }}
+        className="text-sm"
+        id={id}
+      />
+    </div>
  );
 }
@@ -37,3 +37,12 @@
    font-size: 14px;
  }
 }
+
+/* Constrain CodeMirror editor width */
+.cm-editor {
+  max-width: 100% !important;
+  contain: inline-size;
+}
+.cm-editor .cm-scroller {
+  overflow-x: auto !important;
+}