From 79b1263c4bc1b5bf5ae0fd8d1d6abf9cd70418e2 Mon Sep 17 00:00:00 2001
From: Soufiane Fariss <rev.fariss@gmail.com>
Date: Sun, 6 Oct 2024 22:15:40 +0200
Subject: [PATCH] explorer web: wrap long function calls

---
 web/explorer/src/components/RuleMatchesTable.vue  |  2 +-
 .../src/components/columns/RuleColumn.vue         | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/web/explorer/src/components/RuleMatchesTable.vue b/web/explorer/src/components/RuleMatchesTable.vue
index fe891901f..3340ef875 100644
--- a/web/explorer/src/components/RuleMatchesTable.vue
+++ b/web/explorer/src/components/RuleMatchesTable.vue
@@ -160,7 +160,7 @@
 
     <!-- Source code dialog -->
     <Dialog v-model:visible="sourceDialogVisible" style="width: 50vw">
-        <highlightjs autodetect :code="currentSource" />
+        <highlightjs :autodetect="false" language="yaml" :code="currentSource" />
     </Dialog>
 </template>
 
diff --git a/web/explorer/src/components/columns/RuleColumn.vue b/web/explorer/src/components/columns/RuleColumn.vue
index 2a23a2749..7afc18e3b 100644
--- a/web/explorer/src/components/columns/RuleColumn.vue
+++ b/web/explorer/src/components/columns/RuleColumn.vue
@@ -55,7 +55,12 @@
 
         <!-- example node: "exit(0) -> 0" (if the node type is call-info, we highlight node.data.name.callInfo) -->
         <template v-else-if="node.data.type === 'call-info'">
-            <highlightjs lang="c" :code="node.data.name.callInfo" class="text-xs" />
+            <highlightjs
+                :autodetect="false"
+                language="c"
+                :code="node.data.name.callInfo"
+                class="text-xs highlightjs-wrapper"
+            />
         </template>
 
         <!-- example node: " = IMAGE_NT_SIGNATURE (PE)" -->
@@ -83,3 +88,11 @@ const getTooltipContent = (data) => {
     return null;
 };
 </script>
+
+<style scoped>
+.highlightjs-wrapper {
+    width: 120ch;
+    word-wrap: break-word;
+    white-space: normal;
+}
+</style>