chg: [tracker] collapse long rule

var/www/static/css/ail-project.css

@@ -18,3 +18,11 @@
     font-size: 16px;
     pointer-events: none;
 }
+
+.text-collapse {
+  overflow: hidden;
+  display: block;
+  max-height: 3em;
+  line-height: 1.5em;
+  transition: max-height 0.3s ease-in-out;
+}

var/www/templates/hunter/tracker_show.html

@@ -8,6 +8,7 @@
     <link rel="icon" href="{{ url_for('static', filename='image/ail-icon.png') }}">
 
     <!-- Core CSS -->
+    <link href="{{ url_for('static', filename='css/ail-project.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', filename='css/bootstrap4.min.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', filename='css/daterangepicker.min.css') }}" rel="stylesheet">
@@ -219,7 +220,7 @@
                     {% if rule_content %}
                         <h5 class="mb-0">Yara Rule:</h5>
                         <p class="my-0">
-                            <pre class="border bg-light">{{ rule_content }}</pre>
+                            <pre class="text-collapse border bg-light">{{ rule_content }}</pre>
                         </p>
                     {% endif %}
 
@@ -379,6 +380,7 @@
         $('#div_edit_tags').hide();
         $('#div_edit_description').hide();
         $("#page-Tracker").addClass("active");
+        text_collapse();
 
         $('#date-range-from').dateRangePicker({
             separator: ' to ',
@@ -437,6 +439,29 @@
         }
     }
 
+    function text_collapse() {
+        const textElements = document.querySelectorAll(".text-collapse");
+
+        textElements.forEach((textElement) => {
+            console.log(textElements)
+            const lineHeight = parseFloat(window.getComputedStyle(textElement).lineHeight);
+            const maxLines = 30;
+            const maxHeight = lineHeight * maxLines;
+
+            // Apply initial truncation
+            textElement.style.maxHeight = maxHeight + 'px';
+
+            // Hover effect
+            textElement.addEventListener("mouseenter", () => {
+                textElement.style.maxHeight = 'none';
+            });
+
+            textElement.addEventListener("mouseleave", () => {
+                textElement.style.maxHeight = maxHeight + 'px';
+            });
+        });
+    }
+
     function edit_tags() {
         $('#div_edit_mails').hide();
         $('#div_edit_description').hide();