From f7cac8c0a7ad1429c0da997feca11bf9eae4c0c6 Mon Sep 17 00:00:00 2001
From: OlgunR <OlgunR@DD-PC-ENT05N>
Date: Tue, 2 Jun 2026 15:32:42 +0200
Subject: [PATCH] Improve popup layout and CodeMirror integration

Updated the `ContentTemplate` to enhance the layout of the
`#attachment-content` container by using `display: flex` and
ensuring full height utilization. Added CSS rules for consistent
styling of the `.CodeMirror` editor, including font size and
height adjustments.

Simplified CodeMirror initialization for XML files by removing
redundant `<textarea>` creation and directly embedding the
editor. Added `viewportMargin: Infinity` for better rendering
and used `setTimeout` to ensure proper sizing and refresh.

Refined plain text rendering for non-XML files to maintain a
clean and consistent display.
---
 .../Pages/Invoices/Details.cshtml             | 29 +++++++++++++++----
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/DXApp.TemplateKitProject/Pages/Invoices/Details.cshtml b/DXApp.TemplateKitProject/Pages/Invoices/Details.cshtml
index 912064c..6a3d82d 100644
--- a/DXApp.TemplateKitProject/Pages/Invoices/Details.cshtml
+++ b/DXApp.TemplateKitProject/Pages/Invoices/Details.cshtml
@@ -126,7 +126,7 @@ else
     .Shading(true)
     .ShadingColor("rgba(0, 0, 0, 0.5)")
     .ContentTemplate(new JS(@"function() {
-        return '<div id=""attachment-content"" style=""width:100%;height:100%;overflow:auto;""></div>';
+        return '<div id=""attachment-content"" style=""width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column;""></div>';
     }"))
 )
 }
@@ -145,6 +145,16 @@ else
     #pdf-viewer-popup .dx-overlay-content {
         z-index: 10500 !important;
     }
+
+    /* CodeMirror soll volle Höhe des Popups nutzen */
+    #attachment-content {
+        height: 100% !important;
+    }
+
+    #attachment-content .CodeMirror {
+        height: 100% !important;
+        font-size: 14px;
+    }
 </style>
 
 <script>
@@ -205,9 +215,8 @@ else
                 // Text/XML laden und mit Syntax-Highlighting anzeigen
                 $.get('/Invoices/ViewAttachment?filePath=' + encodedFilePath, function(data) {
                     if (extension === '.xml') {
-                        // CodeMirror für XML
-                        var textarea = $('<textarea id="code-viewer"></textarea>');
-                        $content.html('').append(textarea);
+                        // CodeMirror für XML - Container leeren
+                        $content.html('');
                         
                         // CodeMirror laden (falls noch nicht geladen)
                         if (typeof CodeMirror === 'undefined') {
@@ -230,14 +239,22 @@ else
                         }
 
                         function initCodeMirror(content) {
-                            CodeMirror(document.getElementById('attachment-content'), {
+                            // CodeMirror direkt in den Container einfügen
+                            var editor = CodeMirror($content[0], {
                                 value: content,
                                 mode: 'xml',
                                 lineNumbers: true,
                                 readOnly: true,
                                 theme: 'monokai',
-                                lineWrapping: true
+                                lineWrapping: true,
+                                viewportMargin: Infinity
                             });
+
+                            // Höhe explizit setzen nach kurzer Verzögerung
+                            setTimeout(function() {
+                                editor.setSize('100%', '100%');
+                                editor.refresh();
+                            }, 100);
                         }
                     } else {
                         // Plain Text