From 557cea3f4866dc33236874f5fe4d2d69ee963dae Mon Sep 17 00:00:00 2001
From: undergroundwires <git@undergroundwires.dev>
Date: Mon, 1 Apr 2024 12:34:21 +0200
Subject: [PATCH] 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.
---
 .../View/Tree/NodeContent/NodeContent.vue     | 32 +++++++++++++------
 1 file changed, 22 insertions(+), 10 deletions(-)

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>