break long names in template and folder titles

app/views/submissions/show.html.erb

@@ -13,7 +13,7 @@
   <div class="flex justify-between py-1.5 items-center pr-4 sticky top-0 md:relative z-10 bg-base-100">
     <a href="<%= signed_in? && @submission.account_id == current_account&.id && @submission.template ? template_path(@submission.template) : '/' %>" class="flex items-center space-x-3 py-1">
       <span><%= render 'submissions/logo' %></span>
-      <h1 class="text-xl md:text-3xl font-semibold focus:text-clip" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;"><% (@submission.name || @submission.template&.name).to_s.split(/(_)/).each do |item| %><%= item %><wbr><% end %></h1>
+      <h1 class="text-xl md:text-3xl font-semibold break-all focus:text-clip" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;"><% (@submission.name || @submission.template&.name).to_s.split(/(_)/).each do |item| %><%= item %><wbr><% end %></h1>
     </a>
     <div class="space-x-3 flex items-center">
       <% if signed_in? && can?(:destroy, @submission) && @submission.archived_at? && !@submission.completed_at? %>

app/views/template_folders/_folder.html.erb

@@ -4,7 +4,7 @@
   <% if !is_long %>
     <%= svg_icon(icon, class: 'w-6 h-6') %>
   <% end %>
-  <div class="text-lg font-semibold mt-1" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: <%= is_long ? 2 : 1 %>;">
+  <div class="text-lg font-semibold mt-1 break-all" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: <%= is_long ? 2 : 1 %>;">
     <% if is_long %>
       <%= svg_icon(icon, class: 'w-6 h-6 inline') %>
     <% end %>

app/views/templates/_template.html.erb

@@ -1,6 +1,6 @@
 <div class="h-36 relative group">
   <a href="<%= template_path(template) %>" class="flex h-full flex-col justify-between rounded-2xl pt-6 px-7 w-full bg-base-200 before:border-2 before:border-base-300 before:border-dashed before:absolute before:left-0 before:right-0 before:top-0 before:bottom-0 before:hidden before:rounded-2xl" data-targets="dashboard-dropzone.templateCards">
-    <div class="text-xl font-semibold" style="line-height: 1.6rem; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
+    <div class="text-xl font-semibold break-all" style="line-height: 1.6rem; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
       <% if template.template_accesses.present? %>
         <%= svg_icon('lock', class: 'w-6 h-6 inline -translate-y-[4px]') %>
       <% end %>

app/views/templates/_title.html.erb

@@ -2,7 +2,7 @@
   <div class="relative flex items-start justify-between w-full space-x-0">
     <div>
       <div id="template_title" class="flex">
-        <h1 class="text-3xl md:text-[2em] font-semibold" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
+        <h1 class="text-3xl md:text-[2em] font-semibold break-all" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
           <% template.name.split(/(_)/).each do |item| %><%= item %><wbr><% end %>
           <% if template.archived_at? %>
             <span class="ml-1 badge badge-outline badge-lg align-middle"><%= t('archived') %></span>