explorer web: wrap long function calls (#2447)

Co-authored-by: Moritz <mr-tz@users.noreply.github.com>

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>
 

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>