From 84e0b1a92fc0e430c610aac4bf3e99df32609e88 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 2 Mar 2024 07:32:42 +0000
Subject: [PATCH] fix(nc-gui): form after submit text alignment issue

---
 .../nc-gui/components/smartsheet/Form.vue     | 96 ++++++++++---------
 .../[typeOrId]/form/[viewId]/index/index.vue  |  4 +-
 .../[typeOrId]/form/[viewId]/index/survey.vue |  8 +-
 3 files changed, 55 insertions(+), 53 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 466e72e15f..1349ca717d 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -688,56 +688,58 @@ useEventListener(
         :style="{ background: parseProp(formViewData?.meta)?.background_color || '#F9F9FA' }"
         data-testid="nc-form-wrapper-submit"
       >
-        <GeneralFormBanner :banner-image-url="formViewData?.banner_image_url" />
-
-        <div
-          class="transition-all duration-300 ease-in relative max-w-[max(33%,688px)] mx-auto my-6 bg-white rounded-3xl border-1 border-gray-200 px-4 py-8 lg:p-12 md:(p-8 dark:bg-slate-700)"
-        >
-          <div v-if="formViewData" class="items-center justify-center text-center mt-2">
-            <div>
-              <h1 class="text-2xl font-bold text-gray-900 mb-4">
-                {{ formViewData.heading }}
-              </h1>
-
-              <div v-if="formViewData.subheading?.trim()">
-                <LazyCellRichText
-                  :value="formViewData.subheading"
-                  class="font-medium text-base text-gray-500 !h-auto mb-4 -ml-1"
-                  is-form-field
-                  read-only
-                  sync-value-change
-                />
-              </div>
-            </div>
+        <div class="max-w-[max(33%,688px)] mx-auto">
+          <GeneralFormBanner :banner-image-url="formViewData?.banner_image_url" />
 
-            <div class="flex justify-center">
-              <div class="w-full lg:w-[95%]">
-                <a-alert class="!my-4 !py-4 text-left !rounded-lg" type="success" outlined>
-                  <template #message>
-                    <LazyCellRichText
-                      v-if="formViewData?.success_msg?.trim()"
-                      :value="formViewData?.success_msg"
-                      class="!h-auto -ml-1"
-                      is-form-field
-                      read-only
-                      sync-value-change
-                    />
-                    <span v-else> {{ $t('msg.successfullySubmittedFormData') }} </span>
-                  </template>
-                </a-alert>
-
-                <div v-if="formViewData.show_blank_form" class="text-gray-400 mt-4">
-                  {{
-                    $t('msg.newFormWillBeLoaded', {
-                      seconds: secondsRemain,
-                    })
-                  }}
+          <div
+            class="transition-all duration-300 ease-in relative my-6 bg-white rounded-3xl border-1 border-gray-200 px-4 py-8 lg:p-12 md:(p-8 dark:bg-slate-700)"
+          >
+            <div v-if="formViewData" class="items-center justify-center text-left mt-2">
+              <div>
+                <h1 class="text-2xl font-bold text-gray-900 mb-4">
+                  {{ formViewData.heading }}
+                </h1>
+
+                <div v-if="formViewData.subheading?.trim()">
+                  <LazyCellRichText
+                    :value="formViewData.subheading"
+                    class="font-medium text-base text-gray-500 !h-auto mb-4 -ml-1"
+                    is-form-field
+                    read-only
+                    sync-value-change
+                  />
                 </div>
+              </div>
 
-                <div v-if="formViewData.submit_another_form || !isPublic" class="text-center mt-4">
-                  <NcButton type="primary" size="medium" @click="submitted = false">
-                    {{ $t('activity.submitAnotherForm') }}
-                  </NcButton>
+              <div class="flex justify-center">
+                <div class="w-full">
+                  <a-alert class="!my-4 !py-4 text-left !rounded-lg" type="success" outlined>
+                    <template #message>
+                      <LazyCellRichText
+                        v-if="formViewData?.success_msg?.trim()"
+                        :value="formViewData?.success_msg"
+                        class="!h-auto -ml-1"
+                        is-form-field
+                        read-only
+                        sync-value-change
+                      />
+                      <span v-else> {{ $t('msg.successfullySubmittedFormData') }} </span>
+                    </template>
+                  </a-alert>
+
+                  <div v-if="formViewData.show_blank_form" class="text-gray-400 mt-4">
+                    {{
+                      $t('msg.newFormWillBeLoaded', {
+                        seconds: secondsRemain,
+                      })
+                    }}
+                  </div>
+
+                  <div v-if="formViewData.submit_another_form || !isPublic" class="text-right mt-4">
+                    <NcButton type="primary" size="medium" @click="submitted = false">
+                      {{ $t('activity.submitAnotherForm') }}
+                    </NcButton>
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
index df37386d8c..7d8b029718 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
@@ -110,7 +110,7 @@ const onDecode = async (scannedCodeValue: string) => {
 
         <template v-else-if="submitted">
           <div class="flex justify-center">
-            <div v-if="sharedFormView" class="w-full lg:w-[95%]">
+            <div v-if="sharedFormView" class="w-full">
               <a-alert class="!my-4 !py-4 text-left !rounded-lg" type="success" outlined>
                 <template #message>
                   <LazyCellRichText
@@ -129,7 +129,7 @@ const onDecode = async (scannedCodeValue: string) => {
                 {{ $t('msg.newFormWillBeLoaded', { seconds: secondsRemain }) }}
               </p>
 
-              <div v-if="sharedFormView.submit_another_form" class="text-center">
+              <div v-if="sharedFormView.submit_another_form" class="text-right">
                 <NcButton type="primary" size="medium" @click="submitted = false">
                   {{ $t('activity.submitAnotherForm') }}
                 </NcButton>
diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue
index d2cc11f5a5..0f104e3e9b 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue
@@ -376,7 +376,7 @@ onMounted(() => {
           <Transition name="slide-left">
             <div v-if="submitted" class="flex flex-col justify-center items-center text-center">
               <a-alert
-                class="!my-4 !py-4 !rounded-lg text-left"
+                class="!my-4 !py-4 !rounded-lg text-left w-full"
                 type="success"
                 data-testid="nc-survey-form__success-msg"
                 outlined
@@ -399,12 +399,12 @@ onMounted(() => {
                 </template>
               </a-alert>
 
-              <div v-if="sharedFormView" class="mt-3">
-                <p v-if="sharedFormView?.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4">
+              <div v-if="sharedFormView" class="mt-3 w-full">
+                <p v-if="sharedFormView?.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-left my-4">
                   {{ $t('labels.newFormLoaded') }} {{ secondsRemain }} {{ $t('general.seconds') }}
                 </p>
 
-                <div v-if="sharedFormView?.submit_another_form" class="text-center">
+                <div v-if="sharedFormView?.submit_another_form" class="text-right">
                   <NcButton type="primary" size="medium" data-testid="nc-survey-form__btn-submit-another-form" @click="resetForm">
                     {{ $t('activity.submitAnotherForm') }}
                   </NcButton>