From 226ae2172e0d195b91799d13f30db2552d5fb3bc Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete.matsy@gmail.com>
Date: Fri, 5 Apr 2024 19:08:59 +0300
Subject: [PATCH] word break underscore

---
 app/javascript/template_builder/builder.vue         | 4 ++--
 app/javascript/template_builder/contenteditable.vue | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index e83ccc3d..88f7551d 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -26,7 +26,7 @@
           @update:model-value="updateName"
         />
       </div>
-      <div class="space-x-3 flex items-center">
+      <div class="space-x-3 flex items-center flex-shrink-0">
         <slot
           v-if="$slots.buttons"
           name="buttons"
@@ -40,7 +40,7 @@
             @click="maybeShowEmptyTemplateAlert"
           >
             <IconWritingSign
-              width="20"
+              width="22"
               class="inline"
             />
             <span class="hidden md:inline">
diff --git a/app/javascript/template_builder/contenteditable.vue b/app/javascript/template_builder/contenteditable.vue
index 28ada65f..80af882e 100644
--- a/app/javascript/template_builder/contenteditable.vue
+++ b/app/javascript/template_builder/contenteditable.vue
@@ -14,7 +14,10 @@
       @focus="$emit('focus', $event)"
       @blur="onBlur"
     >
-      {{ value }}
+      <template
+        v-for="(item, index) in (value || '').split(/(_)/)"
+        :key="index"
+      >{{ item }}<wbr></template>
     </span>
     <span
       v-if="withRequired"