feat: monaco editor toegevoegd

webui/html/style.css

@@ -587,6 +587,19 @@ button:disabled {
   margin: 4px 0 8px 0;
 }
 
+#editor-file-name {
+  color: var(--color-text-primary);
+  font-size: 13px;
+  font-weight: 600;
+  margin-top: 8px;
+  margin-bottom: 2px;
+}
+
+#editor-file-path {
+  margin-top: 0;
+  margin-bottom: 8px;
+}
+
 .popup-label {
   font-size: 12px;
   color: var(--color-text-muted);
@@ -625,6 +638,11 @@ button:disabled {
   flex-direction: column;
 }
 
+.editor-card {
+  width: min(1180px, calc(100vw - 28px));
+  max-height: calc(100vh - 24px);
+}
+
 .video-player {
   width: 100%;
   max-height: calc(100vh - 180px);
@@ -802,7 +820,7 @@ button:disabled {
 }
 
 .viewer-content,
-.editor-content {
+.editor-host {
   margin: 6px 0 0 0;
   padding: 11px;
   overflow: auto;
@@ -821,13 +839,17 @@ button:disabled {
   user-select: text;
 }
 
-.editor-content {
+.editor-host {
   margin-bottom: 8px;
-  min-height: 280px;
-  max-height: calc(100vh - 220px);
+  min-height: 520px;
+  height: calc(100vh - 220px);
   width: 100%;
-  resize: vertical;
-  white-space: pre;
+  overflow: hidden;
+  padding: 0;
+}
+
+.editor-host .monaco-editor {
+  border-radius: calc(var(--radius-sm) - 1px);
 }
 
 @media (max-width: 1200px) {