Merge pull request #5531 from nith2001/develop

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

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

@@ -532,10 +532,10 @@ watch(view, (nextView) => {
             <!-- Header -->
             <div v-if="isEditable" class="px-4 lg:px-12">
               <a-form-item v-if="isEditable">
-                <a-input
+                <a-textarea
                   v-model:value="formViewData.heading"
                   class="w-full !font-bold !text-4xl !border-0 !border-b-1 !border-dashed !rounded-none !border-gray-400"
-                  :style="{ borderRightWidth: '0px !important' }"
+                  :style="{ borderRightWidth: '0px !important', 'height': '54px', 'min-height': '54px', resize: 'vertical' }"
                   size="large"
                   hide-details
                   placeholder="Form Title"
@@ -551,10 +551,10 @@ watch(view, (nextView) => {
             <!-- Sub Header -->
             <div v-if="isEditable" class="px-4 lg:px-12">
               <a-form-item>
-                <a-input
+                <a-textarea
                   v-model:value="formViewData.subheading"
                   class="w-full !border-0 !border-b-1 !border-dashed !rounded-none !border-gray-400"
-                  :style="{ borderRightWidth: '0px !important' }"
+                  :style="{ borderRightWidth: '0px !important', height: '40px', 'min-height': '40px', resize: 'vertical' }"
                   size="large"
                   hide-details
                   :placeholder="$t('msg.info.formDesc')"
@@ -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') && !hideMenu }"
-      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>

packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue

@@ -75,9 +75,18 @@ const onDecode = async (scannedCodeValue: string) => {
       class="color-transition relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(bg-white dark:bg-slate-700 rounded-lg border-1 border-gray-200 shadow-xl)"
     >
       <template v-if="sharedFormView">
-        <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
+        <h1
+          class="prose-2xl font-bold self-center my-4"
+          style="word-break: break-all"
+        >
+          {{ sharedFormView.heading }}
+        </h1>
 
-        <h2 v-if="sharedFormView.subheading" class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4 leading-6">
+        <h2
+          v-if="sharedFormView.subheading"
+          class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4 leading-6"
+          style="word-break: break-all"
+        >
           {{ sharedFormView.subheading }}
         </h2>
 
@@ -180,7 +189,7 @@ const onDecode = async (scannedCodeValue: string) => {
                       </a-button>
                     </LazySmartsheetDivDataCell>
 
-                    <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
+                    <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1" style="word-break: break-all">
                       <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
                         {{ error.$message }}
                       </div>

packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue

@@ -244,13 +244,17 @@ onMounted(() => {
       class="max-w-[max(33%,600px)] mx-auto flex flex-col justify-end"
     >
       <div class="px-4 md:px-0 flex flex-col justify-end">
-        <h1 class="prose-2xl font-bold self-center my-4" data-testid="nc-survey-form__heading">
+        <h1
+          class="prose-2xl font-bold self-center my-4"
+          data-testid="nc-survey-form__heading"
+          style="word-break: break-all">
           {{ sharedFormView.heading }}
         </h1>
 
         <h2
           v-if="sharedFormView.subheading && sharedFormView.subheading !== ''"
           class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4 leading-6"
+          style="word-break: break-all"
           data-testid="nc-survey-form__sub-heading"
         >
           {{ sharedFormView?.subheading }}
@@ -287,7 +291,7 @@ onMounted(() => {
               <LazySmartsheetVirtualCell
                 v-if="isVirtualCol(field)"
                 v-model="formState[field.title]"
-                class="mt-0 nc-input"
+                class="mt-0 nc-input h-auto"
                 :row="{ row: {}, oldRow: {}, rowMeta: {} }"
                 :data-testid="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
                 :column="field"
@@ -296,7 +300,7 @@ onMounted(() => {
               <LazySmartsheetCell
                 v-else
                 v-model="formState[field.title]"
-                class="nc-input"
+                class="nc-input h-auto"
                 :data-testid="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
                 :column="field"
                 :edit-enabled="editEnabled[index]"
@@ -305,11 +309,10 @@ onMounted(() => {
                 @update:edit-enabled="editEnabled[index] = $event"
               />
 
-              <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
+              <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1" style="word-break: break-all">
                 <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
                   {{ error.$message }}
                 </div>
-
                 <div
                   class="block text-[14px]"
                   :class="field.uidt === UITypes.Checkbox ? 'text-center' : ''"
@@ -350,6 +353,7 @@ onMounted(() => {
                   :mouse-enter-delay="0.25"
                   :mouse-leave-delay="0"
                 >
+                <!-- Ok button for question -->
                   <button
                     class="bg-opacity-100 scaling-btn flex items-center gap-1"
                     data-testid="nc-survey-form__btn-next"

tests/playwright/pages/Dashboard/Form/index.ts

@@ -124,8 +124,11 @@ export class FormPage extends BasePage {
 
   async addField({ field, mode }: { mode: string; field: string }) {
     if (mode === 'dragDrop') {
-      const src = await this.get().locator(`[data-testid="nc-form-hidden-column-${field}"]`);
-      const dst = await this.get().locator(`.nc-form-drag-Country`);
+      const src = await this.get().locator(`[data-testid="nc-form-hidden-column-${field}"] > div.ant-card-body`);
+      const dst = await this.get().locator(`[data-testid="nc-form-input-Country"]`);
+      await src.waitFor({ state: 'visible' });
+      await dst.waitFor({ state: 'visible' });
+      await src.dragTo(dst, { trial: true });
       await src.dragTo(dst);
     } else if (mode === 'clickField') {
       const src = await this.get().locator(`[data-testid="nc-form-hidden-column-${field}"]`);

tests/playwright/tests/db/viewForm.spec.ts

@@ -55,7 +55,7 @@ test.describe('Form view', () => {
     // add & verify (drag-drop)
     await form.addField({ field: 'City List', mode: 'dragDrop' });
     await form.verifyFormViewFieldsOrder({
-      fields: ['LastUpdate', 'City List', 'Country'],
+      fields: ['LastUpdate', 'Country', 'City List'],
     });
 
     // remove & verify (hide field button)