Bug fix for issue #5438, resolved text-overflow with text-wrapping

packages/nc-gui/components/smartsheet/Form.vue

@@ -697,7 +697,7 @@ watch(view, (nextView) => {
                   <a-form-item
                     v-if="isVirtualCol(element)"
                     :name="element.title"
-                    class="!mb-0"
+                    class="!mb-0 nc-input-required-error"
                     :rules="[
                       {
                         required: isRequired(element, element.required),
@@ -719,7 +719,7 @@ watch(view, (nextView) => {
                   <a-form-item
                     v-else
                     :name="element.title"
-                    class="!mb-0"
+                    class="!mb-0 nc-input-required-error"
                     :rules="[
                       {
                         required: isRequired(element, element.required),
@@ -743,7 +743,7 @@ watch(view, (nextView) => {
                     </LazySmartsheetDivDataCell>
                   </a-form-item>
 
-                  <div class="text-gray-500 text-xs" data-testid="nc-form-input-help-text-label">{{ element.description }}</div>
+                  <div class="nc-form-help-text text-gray-500 text-xs" data-testid="nc-form-input-help-text-label">{{ element.description }}</div>
                 </div>
               </template>
 
@@ -861,6 +861,12 @@ watch(view, (nextView) => {
   }
 }
 
+.nc-form-help-text, .nc-input-required-error {
+  max-width: 100%;
+  word-break: break-all;
+  white-space: pre-line;
+}
+
 :deep(.nc-cell-attachment) {
   @apply p-0;
 

packages/nc-gui/components/smartsheet/header/Cell.vue

@@ -53,7 +53,7 @@ const openHeaderMenu = () => {
       v-if="column"
       class="name"
       :class="{ 'cursor-pointer': !isForm && isUIAllowed('edit-column') }"
-      style="white-space: nowrap"
+      style="white-space: pre-line"
       :title="column.title"
       @dblclick="openHeaderMenu"
       >{{ column.title }}</span
@@ -95,7 +95,6 @@ const openHeaderMenu = () => {
 <style scoped>
 .name {
   max-width: calc(100% - 40px);
-  overflow: hidden;
-  text-overflow: ellipsis;
+  word-break: break-all;
 }
 </style>

packages/nc-gui/components/smartsheet/header/VirtualCell.vue

@@ -121,7 +121,7 @@ const closeAddColumnDropdown = () => {
       <template #title>
         {{ tooltipMsg }}
       </template>
-      <span class="name" style="white-space: nowrap" :title="column.title"> {{ column.title }}</span>
+      <span class="name" style="white-space: pre-line" :title="column.title"> {{ column.title }}</span>
     </a-tooltip>
 
     <span v-if="isVirtualColRequired(column, meta?.columns || []) || required" class="text-red-500">&nbsp;*</span>
@@ -164,7 +164,6 @@ const closeAddColumnDropdown = () => {
 <style scoped>
 .name {
   max-width: calc(100% - 40px);
-  overflow: hidden;
-  text-overflow: ellipsis;
+  word-break: break-all;
 }
 </style>