improve control text format

Author: Crazytieguy

index.html

@@ -264,6 +264,10 @@
             color: #374151;
             text-align: left;
         }
+        .control-text div {
+            line-height: 1.6;
+            margin-bottom: 0.25em;
+        }
         .control-discussion {
             background: #f9fafb;
             padding: 1rem;
@@ -571,6 +575,10 @@
             color: #4b5563;
             margin-bottom: 1rem;
         }
+        .modal-control-text div {
+            line-height: 1.6;
+            margin-bottom: 0.25em;
+        }
         .modal-overlays {
             margin-bottom: 1rem;
         }
@@ -869,6 +877,35 @@ <h2 class="toggles-title">Additional Security Assumptions</h2>
             attachSearchListeners();
         }
 
+        // --------------------
+        // Helper Functions
+        // --------------------
+        function formatControlText(text) {
+            if (!text) return '';
+            
+            // Split by newlines and process each line
+            const lines = text.split('\n');
+            const formattedLines = lines.map(line => {
+                // Check for different indentation patterns
+                if (line.match(/^\([a-z]\)/)) {
+                    // Lines starting with (a), (b), etc. - deepest level
+                    return `<div style="margin-left: 3em;">${line}</div>`;
+                } else if (line.match(/^\d+\./)) {
+                    // Lines starting with 1., 2., etc. - middle level
+                    return `<div style="margin-left: 1.5em;">${line}</div>`;
+                } else if (line.match(/^[a-z]\./)) {
+                    // Lines starting with a., b., etc. - top level
+                    return `<div style="margin-top: 0.5em;">${line}</div>`;
+                } else if (line.trim() !== '') {
+                    // Other non-empty lines (continuation of previous line)
+                    return `<div style="margin-left: 1.5em;">${line}</div>`;
+                }
+                return '';
+            });
+            
+            return formattedLines.join('');
+        }
+
         // --------------------
         // Main Render Function
         // --------------------
@@ -957,7 +994,7 @@ <h2 class="toggles-title">Additional Security Assumptions</h2>
                         </div>
                     </div>
                     <div class="control-details" id="details-${control.id}">
-                        <div class="control-text"><strong>Control Text:</strong><br>${control.text}</div>
+                        <div class="control-text"><strong>Control Text:</strong><br>${formatControlText(control.text)}</div>
                         ${control.discussion ? `
                             <div class="control-discussion">
                                 <div class="discussion-title">Discussion:</div>
@@ -1120,7 +1157,7 @@ <h3 class="overlays-title">Overlays</h3>
                         <div class="modal-control-name">${targetControl.name}</div>
                         <div class="modal-control-text">
                             <strong>Control Text:</strong><br>
-                            ${targetControl.text}
+                            ${formatControlText(targetControl.text)}
                         </div>
                         ${overlays.length > 0 ? `
                             <div class="modal-overlays">
@@ -1593,7 +1630,7 @@ <h3 class="overlays-title">Overlays</h3>
                         </div>
                     </div>
                     <div class="control-details" id="details-${enhancementId}">
-                        <div class="control-text"><strong>Enhancement Text:</strong><br>${enhancement.text}</div>
+                        <div class="control-text"><strong>Enhancement Text:</strong><br>${formatControlText(enhancement.text)}</div>
                         ${enhancement.discussion ? `
                             <div class="control-discussion">
                                 <div class="discussion-title">Discussion:</div>