[5.x] Optimize display of long titles in edit forms (#10988)

* Adjust display of multi-line publish form titles * Add utility for cross-browser word wrap * Apply overflow word wrap to edit form title * Apply adjustments to term edit form * Ensure word wrap in search results
statamic · Oct 22, 2024 · e43bad2 · e43bad2
1 parent b711c9c
commit e43bad2
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 11 deletions.
diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css
@@ -56,6 +56,11 @@
     width: fit-content;
 }
 
+.break-overflowing-words {
+    word-break: break-word;
+    overflow-wrap: break-word;
+}
+
 .saving-overlay {
     @apply absolute inset-0 z-200 flex items-center rounded;
     background: rgba(255, 255, 255, .9);

diff --git a/resources/js/components/GlobalSearch.vue b/resources/js/components/GlobalSearch.vue
@@ -25,7 +25,7 @@
 
         <div v-show="focused && (hasResults || hasFavorites)" class="global-search-results">
 
-            <div v-if="hasResults" v-for="(result, index) in results" class="global-search-result-item p-2 flex items-center" :class="{ 'active': current == index }" @click="hit" @mousemove="setActive(index)">
+            <div v-if="hasResults" v-for="(result, index) in results" class="global-search-result-item break-overflowing-words p-2 flex items-start" :class="{ 'active': current == index }" @click="hit" @mousemove="setActive(index)">
                 <svg-icon :name="`light/${getResultIcon(result)}`" class="icon"></svg-icon>
                 <div class="flex-1 rtl:mr-2 ltr:ml-2 title" v-html="result.title"></div>
                 <span class="global-search-result-badge" v-text="result.badge" />

diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
@@ -3,11 +3,11 @@
     <div>
         <breadcrumb v-if="breadcrumbs" :url="breadcrumbs[1].url" :title="breadcrumbs[1].text" />
 
-        <div class="flex items-center mb-6">
-            <h1 class="flex-1">
-                <div class="flex items-center">
-                    <span v-if="! isCreating" class="little-dot rtl:ml-2 ltr:mr-2" :class="activeLocalization.status" v-tooltip="__(activeLocalization.status)" />
-                    <span v-html="$options.filters.striptags(__(title))" />
+        <div class="flex items-baseline mb-6">
+            <h1 class="flex-1 self-start rtl:ml-4 ltr:mr-4">
+                <div class="flex items-baseline">
+                    <span v-if="! isCreating" class="little-dot rtl:ml-2 ltr:mr-2 -top-1" :class="activeLocalization.status" v-tooltip="__(activeLocalization.status)" />
+                    <span class="break-overflowing-words" v-html="$options.filters.striptags(__(title))" />
                 </div>
             </h1>
 

diff --git a/resources/js/components/terms/PublishForm.vue b/resources/js/components/terms/PublishForm.vue
@@ -3,13 +3,13 @@
     <div>
         <breadcrumb v-if="breadcrumbs" :url="breadcrumbs[1].url" :title="breadcrumbs[1].text" />
 
-        <div class="flex items-center mb-6">
-            <h1 class="flex-1">
-                <div class="flex items-center">
+        <div class="flex items-baseline mb-6">
+            <h1 class="flex-1 self-start rtl:ml-4 ltr:mr-4">
+                <div class="flex items-baseline">
                     <span v-if="! isCreating"
-                        class="little-dot rtl:ml-2 ltr:mr-2"
+                        class="little-dot rtl:ml-2 ltr:mr-2 -top-1"
                         :class="{ 'bg-green-600': published, 'bg-gray-600': !published }" />
-                    <span v-html="$options.filters.striptags(title)" />
+                    <span class="break-overflowing-words" v-html="$options.filters.striptags(title)" />
                 </div>
             </h1>