Fix overflow in tree node content on small screens

This commit addresses a UI issue observed on small screens, particularly
during text searches involving nested nodes.

Implementing word-breaking for the improved display of script/category
titles and their documentation prevents content overflow. This change
ensures that both the header (including the node title and documentation
icon) and the documentation text stay fully visible without overflowing.

Additionally, this fix replaces ID-based styling (`#node`) with
class-based styling, using clear, descriptive names. This enhances CSS
and JavaScript reusability and maintainability.

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 {
+.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;
+
+  .node-content {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
 
-  .item:not(:first-child) {
+    .node-content-item:not(:first-child) {
       margin-left: 5px;
     }
   }
+}
 </style>