fix: update view create modal design

packages/nc-gui/components/dlg/ViewCreate.vue

@@ -991,12 +991,16 @@ const getPluralName = (name: string) => {
               <div class="text-gray-800">
                 {{ $t('labels.organiseBy') }}
               </div>
-                <NcSelect
+
+              <a-select
                 v-model:value="range.fk_from_column_id"
-                  :disabled="isMetaLoading"
-                  :loading="isMetaLoading"
-                  class="nc-select-shadow w-full nc-from-select"
+                class="nc-select-shadow w-full nc-from-select !rounded-lg"
+                dropdown-class-name="!rounded-lg"
+                :placeholder="$t('placeholder.notSelected')"
+                data-testid="nc-calendar-range-from-field-select"
+                @click.stop
               >
+                <template #suffixIcon><GeneralIcon icon="arrowDown" class="text-gray-700" /></template>
                 <a-select-option
                   v-for="(option, id) in [...viewSelectFieldOptions!].filter((f) => {
                   // If the fk_from_column_id of first range is Date, then all the other ranges should be Date
@@ -1006,27 +1010,28 @@ const getPluralName = (name: string) => {
                   return firstRange?.uidt === f.uidt
                 })"
                   :key="id"
-                    class="w-40"
                   :value="option.value"
                 >
-                    <div class="flex w-full gap-2 justify-between items-center">
-                      <div class="flex gap-2 items-center">
-                        <SmartsheetHeaderIcon :column="option" class="!ml-0" />
-                        <NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only>
-                          <template #title>{{ option.label }}</template>
+                  <div class="w-full flex gap-2 items-center justify-between" :title="option.label">
+                    <div class="flex items-center gap-1 max-w-[calc(100%_-_20px)]">
+                      <SmartsheetHeaderIcon :column="option" />
+
+                      <NcTooltip class="flex-1 max-w-[calc(100%_-_20px)] truncate" show-on-truncate-only>
+                        <template #title>
                           {{ option.label }}
+                        </template>
+                        <template #default>{{ option.label }}</template>
                       </NcTooltip>
                     </div>
-                      <div class="flex-1" />
-                      <component
-                        :is="iconMap.check"
+                    <GeneralIcon
                       v-if="option.value === range.fk_from_column_id"
                       id="nc-selected-item-icon"
-                        class="text-primary min-w-4 h-4"
+                      icon="check"
+                      class="flex-none text-primary w-4 h-4"
                     />
                   </div>
                 </a-select-option>
-                </NcSelect>
+              </a-select>
             </div>
             <div class="w-full space-y-2">
               <NcButton
@@ -1047,13 +1052,18 @@ const getPluralName = (name: string) => {
                   </span>
 
                 <div class="flex">
-                    <NcSelect
+                  <a-select
                     v-model:value="range.fk_to_column_id"
+                    class="!rounded-r-none nc-select-shadow w-full flex-1 nc-to-select"
                     :disabled="isMetaLoading"
                     :loading="isMetaLoading"
                     :placeholder="$t('placeholder.notSelected')"
-                      class="nc-to-select flex-1"
+                    data-testid="nc-calendar-range-to-field-select"
+                    dropdown-class-name="!rounded-lg"
+                    @click.stop
                   >
+                    <template #suffixIcon><GeneralIcon icon="arrowDown" class="text-gray-700" /></template>
+
                     <a-select-option
                       v-for="(option, id) in [...viewSelectFieldOptions].filter((f) => {
                         // If the fk_from_column_id of first range is Date, then all the other ranges should be Date
@@ -1067,15 +1077,26 @@ const getPluralName = (name: string) => {
                       :key="id"
                       :value="option.value"
                     >
-                        <div class="flex items-center">
+                      <div class="w-full flex gap-2 items-center justify-between" :title="option.label">
+                        <div class="flex items-center gap-1 max-w-[calc(100%_-_20px)]">
                           <SmartsheetHeaderIcon :column="option" />
-                          <NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only>
-                            <template #title>{{ option.label }}</template>
+
+                          <NcTooltip class="flex-1 max-w-[calc(100%_-_20px)] truncate" show-on-truncate-only>
+                            <template #title>
                               {{ option.label }}
+                            </template>
+                            <template #default>{{ option.label }}</template>
                           </NcTooltip>
                         </div>
+                        <GeneralIcon
+                          v-if="option.value === range.fk_from_column_id"
+                          id="nc-selected-item-icon"
+                          icon="check"
+                          class="flex-none text-primary w-4 h-4"
+                        />
+                      </div>
                     </a-select-option>
-                    </NcSelect>
+                  </a-select>
                   <NcButton
                     class="!rounded-l-none !border-l-0"
                     size="small"