admin-body-editor-fix

panel/styles/CodePreview.module.css

@@ -4,22 +4,34 @@
   background-color: #2d2d2d;
   color: #f8f8f2;
   tab-size: 2;
-  line-height: 1.5;
+  line-height: 1.4;
   border-radius: 4px;
   overflow: hidden;
+  font-size: 12px;
 }
 
 .lineNumber {
-  position: absolute;
-  left: 0;
-  width: 40px;
+  display: block;
+  padding: 0 8px;
   text-align: right;
-  color: #999;
+  color: #555;
+  background: #1e1e1e;
   user-select: none;
-  opacity: 0.5;
-  padding-right: 10px;
+  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+  font-size: 11px;
+  line-height: 1.4;
+  min-height: 16.8px; /* 12px * 1.4 line-height */
   border-right: 1px solid rgba(255, 255, 255, 0.1);
-  margin-right: 10px;
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+.lineNumbersContainer {
+  overflow: hidden;
+}
+
+.lineNumbersContainer .lineNumber {
+  border-right: none;
 }
 
 .code {
@@ -45,7 +57,9 @@
   background-color: #2d2d2d;
   border-radius: 6px;
   overflow: hidden;
-  min-height: 200px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .editorControls {
@@ -53,7 +67,9 @@
   justify-content: flex-end;
   padding: 8px 12px;
   background-color: #1e1e1e;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  border-bottom: none;
+  order: 2; /* Перемещаем вниз */
 }
 
 .editingControls {
@@ -111,21 +127,28 @@
   overflow: hidden;
   background-color: #2d2d2d;
   transition: border 0.2s;
+  flex: 1;
+  order: 1; /* Основной контент вверху */
 }
 
 .syntaxHighlight {
   width: 100%;
   height: 100%;
   tab-size: 2;
+  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+  font-size: 12px;
+  line-height: 1.4;
 }
 
 .editorArea {
-  min-height: 150px;
   resize: none;
   border: none;
   width: 100%;
   height: 100%;
   tab-size: 2;
+  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+  font-size: 12px;
+  line-height: 1.4;
 }
 
 .editorArea:focus {

panel/styles/Modal.module.css

@@ -18,7 +18,7 @@
   box-shadow: var(--shadow-lg);
   display: flex;
   flex-direction: column;
-  max-height: 90vh;
+  max-height: 95vh;
   width: 100%;
   animation: modal-appear 0.2s ease-out;
 }
@@ -35,12 +35,14 @@
 .modal-large {
   max-width: 1200px;
   width: 95vw;
-  min-height: 600px;
+  height: 85vh;
+  max-height: 85vh;
 }
 
 .modal-large .content {
-  max-height: 70vh;
-  overflow-y: auto;
+  flex: 1;
+  overflow: hidden; /* Убираем скролл модального окна, пусть EditableCodePreview управляет */
+  padding: 0; /* Убираем padding чтобы EditableCodePreview занял всю площадь */
 }
 
 .header {
@@ -139,7 +141,7 @@
   }
 
   .modal-large .content {
-    max-height: 60vh;
+    max-height: 80vh;
   }
 }