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>