diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/NodeContent.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/NodeContent.vue
index 45c25bc4..8043e022 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/NodeContent.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/NodeContent.vue
@@ -1,12 +1,15 @@
 <template>
-  <DocumentableNode :docs="nodeMetadata.docs">
-    <div id="node">
-      <div class="item">
+  <DocumentableNode
+    class="node-content-wrapper"
+    :docs="nodeMetadata.docs"
+  >
+    <div class="node-content">
+      <div class="node-content-item">
         <NodeTitle :title="nodeMetadata.text" />
       </div>
       <RevertToggle
         v-if="nodeMetadata.isReversible"
-        class="item"
+        class="node-content-item"
         :node="nodeMetadata"
       />
     </div>
@@ -38,13 +41,22 @@ export default defineComponent({
 <style scoped lang="scss">
 @use "@/presentation/assets/styles/main" as *;
 
-#node {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+.node-content-wrapper {
+  /*
+    Compensate word breaking when it causes overflows of the node content,
+    This issue happens on small devices when nodes are being rendered during search where the node header or
+    documentation grows to cause to overflow.
+  */
+  overflow-wrap: anywhere;
 
-  .item:not(:first-child) {
-    margin-left: 5px;
+  .node-content {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    .node-content-item:not(:first-child) {
+      margin-left: 5px;
+    }
   }
 }
 </style>