From eb6972ee641c0fb479b745fc2a9b23eadbe55e8e Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 16 Feb 2023 12:51:23 +0530
Subject: [PATCH 1/8] refactor(gui): change dropdown icon with arrow

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components.d.ts                                | 1 +
 packages/nc-gui/components/smartsheet/expanded-form/Header.vue | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 99bc5645f2..c790b16d76 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -204,6 +204,7 @@ declare module '@vue/runtime-core' {
     MdiLogout: typeof import('~icons/mdi/logout')['default']
     MdiMagnify: typeof import('~icons/mdi/magnify')['default']
     MdiMenu: typeof import('~icons/mdi/menu')['default']
+    MdiMenuArrowDown: typeof import('~icons/mdi/menu-arrow-down')['default']
     MdiMenuDown: typeof import('~icons/mdi/menu-down')['default']
     MdiMicrosoftTeams: typeof import('~icons/mdi/microsoft-teams')['default']
     MdiMinusCircleOutline: typeof import('~icons/mdi/minus-circle-outline')['default']
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index c22057348a..3f235af669 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
@@ -185,6 +185,8 @@ const onConfirmDeleteRowClick = async () => {
     </a-dropdown>
 
     <a-dropdown-button class="nc-expand-form-save-btn" type="primary" :disabled="!isUIAllowed('tableRowUpdate')" @click="save">
+      <template #icon><MdiMenuDown /></template>
+
       <template #overlay>
         <a-menu class="nc-expand-form-save-dropdown-menu">
           <a-menu-item key="0" class="!py-2 flex gap-2" @click="saveRowAndStay = 0">

From 84317638334749cb0592b3023d2be24e1ec0d7db Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 16 Feb 2023 14:08:19 +0530
Subject: [PATCH 2/8] refactor(gui): rearrange header buttons and menu

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet/expanded-form/Header.vue       | 84 +++++++++----------
 1 file changed, 38 insertions(+), 46 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index 3f235af669..ef7144b3f3 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
@@ -135,54 +135,31 @@ const onConfirmDeleteRowClick = async () => {
       />
     </a-tooltip>
 
-    <a-button class="!text mx-1 nc-expand-form-close-btn" @click="emit('cancel')">
-      <div class="flex items-center">
-        <MdiCloseCircleOutline class="mr-1" />
-        <!-- Close -->
-        {{ $t('general.close') }}
-      </div>
-    </a-button>
-
-    <a-dropdown>
-      <a-button v-e="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
-        <div class="flex gap-1 items-center">
-          <!-- More -->
-          <span class="!text-sm font-weight-medium">{{ $t('general.more') }}</span>
-
-          <MdiMenuDown class="text-grey" />
-        </div>
-      </a-button>
-
-      <template #overlay>
-        <div class="bg-gray-50 py-2 shadow-lg !border">
-          <div>
-            <div
-              v-e="['a:actions:duplicate-row']"
-              class="nc-menu-item"
-              :class="{ disabled: isNew }"
-              @click="!isNew && emit('duplicateRow')"
-            >
-              <MdiContentCopy class="text-gray-500" />
-              {{ $t('activity.duplicateRow') }}
-            </div>
+    <a-tooltip v-if="!isSqlView" placement="bottom">
+      <!-- Duplicate row -->
+      <template #title>
+        <div class="text-center w-full">{{ $t('activity.duplicateRow') }}</div>
+      </template>
+      <MdiContentCopy
+        v-if="isUIAllowed('xcDatatableEditable') && !isNew"
+        v-e="['c:row-expand:duplicate']"
+        class="cursor-pointer select-none nc-duplicate-row text-gray-500 mx-1 min-w-4"
+        @click="!isNew && emit('duplicateRow')"
+      />
+    </a-tooltip>
 
-            <a-modal v-model:visible="showDeleteRowModal" title="Delete row?" @ok="onConfirmDeleteRowClick">
-              <p>Are you sure you want to delete this row?</p>
-            </a-modal>
-
-            <div
-              v-e="['a:actions:delete-row']"
-              class="nc-menu-item"
-              :class="{ disabled: isNew }"
-              @click="!isNew && onDeleteRowClick()"
-            >
-              <MdiDelete class="text-gray-500" />
-              {{ $t('activity.deleteRow') }}
-            </div>
-          </div>
-        </div>
+    <a-tooltip v-if="!isSqlView" placement="bottom">
+      <!-- Delete row -->
+      <template #title>
+        <div class="text-center w-full">{{ $t('activity.deleteRow') }}</div>
       </template>
-    </a-dropdown>
+      <MdiDeleteOutline
+        v-if="isUIAllowed('xcDatatableEditable') && !isNew"
+        v-e="['c:row-expand:delete']"
+        class="cursor-pointer select-none nc-delete-row text-gray-500 mx-1 min-w-4"
+        @click="!isNew && onDeleteRowClick()"
+      />
+    </a-tooltip>
 
     <a-dropdown-button class="nc-expand-form-save-btn" type="primary" :disabled="!isUIAllowed('tableRowUpdate')" @click="save">
       <template #icon><MdiMenuDown /></template>
@@ -212,5 +189,20 @@ const onConfirmDeleteRowClick = async () => {
         {{ $t('activity.saveAndStay') }}
       </div>
     </a-dropdown-button>
+
+    <a-tooltip placement="bottom">
+      <!-- Close -->
+      <template #title>
+        <div class="text-center w-full">{{ $t('general.close') }}</div>
+      </template>
+      <MdiCloseCircleOutline
+        class="cursor-pointer select-none nc-toggle-comments text-gray-500 mx-1 min-w-4"
+        @click="emit('cancel')"
+      />
+    </a-tooltip>
+
+    <a-modal v-model:visible="showDeleteRowModal" title="Delete row?" @ok="onConfirmDeleteRowClick">
+      <p>Are you sure you want to delete this row?</p>
+    </a-modal>
   </div>
 </template>

From fd739a159abe05bfd33adc2d3f1044b39a8ca33a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 16 Feb 2023 14:12:33 +0530
Subject: [PATCH 3/8] refactor(gui): skip waiting for toast message to close

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/composables/useExpandedFormStore.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/composables/useExpandedFormStore.ts b/packages/nc-gui/composables/useExpandedFormStore.ts
index 90a9dff500..4e91dee683 100644
--- a/packages/nc-gui/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui/composables/useExpandedFormStore.ts
@@ -190,7 +190,8 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
           }
         } else {
           // No columns to update
-          return message.info(t('msg.info.noColumnsToUpdate'))
+          message.info(t('msg.info.noColumnsToUpdate'))
+          return
         }
       }
 

From 645bc79eea0bb6b0ade54f9c3d69db49f8c60177 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Thu, 16 Feb 2023 14:28:22 +0530
Subject: [PATCH 4/8] test: updates as per new UI

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../pages/Dashboard/ExpandedForm/index.ts     | 22 +++++++------------
 .../playwright/tests/expandedFormUrl.spec.ts  |  4 ++--
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/ExpandedForm/index.ts b/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
index 608fd5fb4a..538c2e4ff7 100644
--- a/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
+++ b/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
@@ -7,7 +7,8 @@ export class ExpandedFormPage extends BasePage {
   readonly addNewTableButton: Locator;
   readonly copyUrlButton: Locator;
   readonly toggleCommentsButton: Locator;
-  readonly moreOptionsButton: Locator;
+  readonly duplicateRowButton: Locator;
+  readonly deleteRowButton: Locator;
 
   constructor(dashboard: DashboardPage) {
     super(dashboard.rootPage);
@@ -15,7 +16,8 @@ export class ExpandedFormPage extends BasePage {
     this.addNewTableButton = this.dashboard.get().locator('.nc-add-new-table');
     this.copyUrlButton = this.dashboard.get().locator('.nc-copy-row-url:visible');
     this.toggleCommentsButton = this.dashboard.get().locator('.nc-toggle-comments:visible');
-    this.moreOptionsButton = this.dashboard.get().locator('.nc-actions-menu-btn:visible').last();
+    this.duplicateRowButton = this.dashboard.get().locator('.nc-duplicate-row:visible');
+    this.deleteRowButton = this.dashboard.get().locator('.nc-delete-row:visible');
   }
 
   get() {
@@ -23,10 +25,7 @@ export class ExpandedFormPage extends BasePage {
   }
 
   async clickDuplicateRow() {
-    await this.moreOptionsButton.click();
-    // wait for the menu to appear
-    await this.rootPage.waitForTimeout(1000);
-    await this.rootPage.locator('.nc-menu-item:has-text("Duplicate Row")').click();
+    await this.duplicateRowButton.click();
 
     // wait for loader to disappear
     // await this.dashboard.waitForLoaderToDisappear();
@@ -34,22 +33,17 @@ export class ExpandedFormPage extends BasePage {
   }
 
   async clickDeleteRow() {
-    await this.moreOptionsButton.click();
-    // wait for the menu to appear
-    await this.rootPage.waitForTimeout(1000);
-    await this.rootPage.locator('.nc-menu-item:has-text("Delete Row")').click();
+    await this.deleteRowButton.click();
     await this.rootPage.locator('.ant-btn-primary:has-text("OK")').click();
   }
 
   async isDisabledDuplicateRow() {
-    await this.moreOptionsButton.click();
-    const isDisabled = await this.rootPage.locator('.nc-menu-item.disabled:has-text("Duplicate Row")');
+    const isDisabled = await this.duplicateRowButton;
     return await isDisabled.count();
   }
 
   async isDisabledDeleteRow() {
-    await this.moreOptionsButton.click();
-    const isDisabled = await this.rootPage.locator('.nc-menu-item.disabled:has-text("Delete Row")');
+    const isDisabled = await this.deleteRowButton;
     return await isDisabled.count();
   }
 
diff --git a/tests/playwright/tests/expandedFormUrl.spec.ts b/tests/playwright/tests/expandedFormUrl.spec.ts
index d0863b85ac..685a125998 100644
--- a/tests/playwright/tests/expandedFormUrl.spec.ts
+++ b/tests/playwright/tests/expandedFormUrl.spec.ts
@@ -174,7 +174,7 @@ test.describe('Expanded record duplicate & delete options', () => {
     // expand row, duplicate & verify menu
     await dashboard.grid.openExpandedRow({ index: 0 });
     await dashboard.expandedForm.clickDuplicateRow();
-    expect(await dashboard.expandedForm.isDisabledDeleteRow()).toBe(1);
-    expect(await dashboard.expandedForm.isDisabledDuplicateRow()).toBe(1);
+    expect(await dashboard.expandedForm.isDisabledDeleteRow()).toBe(0);
+    expect(await dashboard.expandedForm.isDisabledDuplicateRow()).toBe(0);
   });
 });

From e336422f0918685194bf109e8813bef621917475 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 16 Feb 2023 14:39:58 +0530
Subject: [PATCH 5/8] refactor(gui): avoid next and prev intersection with
 expanded form content

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/assets/style.scss             |  6 ++++
 .../smartsheet/expanded-form/index.vue        | 35 +++++++++----------
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 50f089d65e..82c97d0136 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -318,3 +318,9 @@ a {
   white-space: pre;
   user-select: auto;
 }
+
+
+
+.nc-drawer-expanded-form .ant-drawer-content-wrapper {
+  transition: width 0.3s !important;
+}
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 1ae57d4858..959ef56445 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -163,7 +163,7 @@ export default {
   <a-drawer
     v-model:visible="isExpanded"
     :footer="null"
-    width="min(90vw,800px)"
+    :width="commentsDrawer ? 'min(90vw,900px)' : 'min(90vw,700px)'"
     :body-style="{ 'padding': 0, 'display': 'flex', 'flex-direction': 'column' }"
     :closable="false"
     class="nc-drawer-expanded-form"
@@ -171,24 +171,23 @@ export default {
   >
     <SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" @duplicate-row="onDuplicateRow" />
 
-    <div class="!bg-gray-100 rounded flex-1 relative">
-      <template v-if="props.showNextPrevIcons">
-        <a-tooltip placement="bottom">
-          <template #title>
-            {{ $t('labels.nextRow') }}
-          </template>
-          <MdiChevronRight class="cursor-pointer nc-next-arrow" @click="$emit('next')" />
-        </a-tooltip>
-        <a-tooltip placement="bottom">
-          <template #title>
-            {{ $t('labels.prevRow') }}
-          </template>
-          <MdiChevronLeft class="cursor-pointer nc-prev-arrow" @click="$emit('prev')" />
-        </a-tooltip>
-      </template>
-
+    <div class="!bg-gray-100 rounded flex-1">
       <div class="flex h-full nc-form-wrapper items-stretch min-h-[max(70vh,100%)]">
-        <div class="flex-1 overflow-auto scrollbar-thin-dull nc-form-fields-container">
+        <div class="flex-1 overflow-auto scrollbar-thin-dull nc-form-fields-container relative">
+          <template v-if="props.showNextPrevIcons">
+            <a-tooltip placement="bottom">
+              <template #title>
+                {{ $t('labels.nextRow') }}
+              </template>
+              <MdiChevronRight class="cursor-pointer nc-next-arrow" @click="$emit('next')" />
+            </a-tooltip>
+            <a-tooltip placement="bottom">
+              <template #title>
+                {{ $t('labels.prevRow') }}
+              </template>
+              <MdiChevronLeft class="cursor-pointer nc-prev-arrow" @click="$emit('prev')" />
+            </a-tooltip>
+          </template>
           <div class="w-[500px] mx-auto">
             <div v-if="duplicatingRowInProgress" class="flex items-center justify-center h-[100px]">
               <a-spin size="large" />

From 3e542e4158ceece9b2fae7280f94cccf073207b5 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 16 Feb 2023 16:23:10 +0530
Subject: [PATCH 6/8] refactor(gui): remove outline and provide a simple
 transition for icons

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/assets/style.scss              |  5 +++++
 .../smartsheet/expanded-form/Header.vue        | 18 ++++++++++++------
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 82c97d0136..3cd427b4b9 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -324,3 +324,8 @@ a {
 .nc-drawer-expanded-form .ant-drawer-content-wrapper {
   transition: width 0.3s !important;
 }
+
+
+.nc-icon-transition {
+  @apply transform transition-transform !hover:(scale-115) !active:(scale-100)
+}
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index ef7144b3f3..f9030ae66d 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
@@ -108,7 +108,7 @@ const onConfirmDeleteRowClick = async () => {
       <template #title>
         <div class="text-center w-full">{{ $t('general.reload') }}</div>
       </template>
-      <mdi-reload v-if="!isNew" class="cursor-pointer select-none text-gray-500 mx-1 min-w-4" @click="loadRow" />
+      <mdi-reload v-if="!isNew" class="nc-icon-transition cursor-pointer select-none text-gray-500 mx-1 min-w-4" @click="loadRow" />
     </a-tooltip>
     <a-tooltip placement="bottom">
       <template #title>
@@ -117,7 +117,7 @@ const onConfirmDeleteRowClick = async () => {
       </template>
       <mdi-link
         v-if="!isNew"
-        class="cursor-pointer select-none text-gray-500 mx-1 nc-copy-row-url min-w-4"
+        class="nc-icon-transition cursor-pointer select-none text-gray-500 mx-1 nc-copy-row-url min-w-4"
         @click="copyRecordUrl"
       />
     </a-tooltip>
@@ -130,7 +130,7 @@ const onConfirmDeleteRowClick = async () => {
       <MdiCommentTextOutline
         v-if="isUIAllowed('rowComments') && !isNew"
         v-e="['c:row-expand:comment-toggle']"
-        class="cursor-pointer select-none nc-toggle-comments text-gray-500 mx-1 min-w-4"
+        class="nc-icon-transition cursor-pointer select-none nc-toggle-comments text-gray-500 mx-1 min-w-4"
         @click="commentsDrawer = !commentsDrawer"
       />
     </a-tooltip>
@@ -143,7 +143,7 @@ const onConfirmDeleteRowClick = async () => {
       <MdiContentCopy
         v-if="isUIAllowed('xcDatatableEditable') && !isNew"
         v-e="['c:row-expand:duplicate']"
-        class="cursor-pointer select-none nc-duplicate-row text-gray-500 mx-1 min-w-4"
+        class="nc-icon-transition cursor-pointer select-none nc-duplicate-row text-gray-500 mx-1 min-w-4"
         @click="!isNew && emit('duplicateRow')"
       />
     </a-tooltip>
@@ -156,7 +156,7 @@ const onConfirmDeleteRowClick = async () => {
       <MdiDeleteOutline
         v-if="isUIAllowed('xcDatatableEditable') && !isNew"
         v-e="['c:row-expand:delete']"
-        class="cursor-pointer select-none nc-delete-row text-gray-500 mx-1 min-w-4"
+        class="nc-icon-transition cursor-pointer select-none nc-delete-row text-gray-500 mx-1 min-w-4"
         @click="!isNew && onDeleteRowClick()"
       />
     </a-tooltip>
@@ -196,7 +196,7 @@ const onConfirmDeleteRowClick = async () => {
         <div class="text-center w-full">{{ $t('general.close') }}</div>
       </template>
       <MdiCloseCircleOutline
-        class="cursor-pointer select-none nc-toggle-comments text-gray-500 mx-1 min-w-4"
+        class="nc-icon-transition cursor-pointer select-none nc-toggle-comments text-gray-500 mx-1 min-w-4"
         @click="emit('cancel')"
       />
     </a-tooltip>
@@ -206,3 +206,9 @@ const onConfirmDeleteRowClick = async () => {
     </a-modal>
   </div>
 </template>
+
+<style scoped>
+:deep(svg) {
+  @apply outline-none;
+}
+</style>

From 952413f54531014a42e4db608dca4c51bd4f2cc3 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 16 Feb 2023 16:23:57 +0530
Subject: [PATCH 7/8] chore: lint

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/smartsheet/expanded-form/Header.vue   | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index f9030ae66d..8e0a5d6faa 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
@@ -108,7 +108,11 @@ const onConfirmDeleteRowClick = async () => {
       <template #title>
         <div class="text-center w-full">{{ $t('general.reload') }}</div>
       </template>
-      <mdi-reload v-if="!isNew" class="nc-icon-transition cursor-pointer select-none text-gray-500 mx-1 min-w-4" @click="loadRow" />
+      <mdi-reload
+        v-if="!isNew"
+        class="nc-icon-transition cursor-pointer select-none text-gray-500 mx-1 min-w-4"
+        @click="loadRow"
+      />
     </a-tooltip>
     <a-tooltip placement="bottom">
       <template #title>

From f5b05f8bfa6b1876e7e414f595f2c9f1a6b0d09f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 16 Feb 2023 19:19:23 +0530
Subject: [PATCH 8/8] chore(test): update selector

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/smartsheet/expanded-form/Header.vue | 2 +-
 tests/playwright/pages/Dashboard/ExpandedForm/index.ts         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index 8e0a5d6faa..0f41903f53 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
@@ -200,7 +200,7 @@ const onConfirmDeleteRowClick = async () => {
         <div class="text-center w-full">{{ $t('general.close') }}</div>
       </template>
       <MdiCloseCircleOutline
-        class="nc-icon-transition cursor-pointer select-none nc-toggle-comments text-gray-500 mx-1 min-w-4"
+        class="nc-icon-transition cursor-pointer select-none nc-close-form text-gray-500 mx-1 min-w-4"
         @click="emit('cancel')"
       />
     </a-tooltip>
diff --git a/tests/playwright/pages/Dashboard/ExpandedForm/index.ts b/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
index 538c2e4ff7..fa66bebd0c 100644
--- a/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
+++ b/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
@@ -133,7 +133,7 @@ export class ExpandedFormPage extends BasePage {
   }
 
   async close() {
-    await this.get().locator('button:has-text("Close")').last().click();
+    await this.get().locator('.nc-close-form').last().click();
   }
 
   async openChildCard(param: { column: string; title: string }) {