chore(CY): add class name for modal & menu

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>

packages/nc-gui/components/cell/attachment/Modal.vue

@@ -58,7 +58,13 @@ function onClick(item: Record<string, any>) {
 </script>
 
 <template>
-  <a-modal v-model:visible="modalVisible" class="nc-attachment-modal" width="80%" :footer="null">
+  <a-modal
+    v-model:visible="modalVisible"
+    class="nc-attachment-modal"
+    width="80%"
+    :footer="null"
+    wrap-class-name="nc-modal-attachment-expand-cell"
+  >
     <template #title>
       <div class="flex gap-4">
         <div

packages/nc-gui/components/dashboard/TreeView.vue

@@ -218,7 +218,7 @@ function openTableCreateDialog() {
 
 <template>
   <div class="nc-treeview-container flex flex-col">
-    <a-dropdown :trigger="['contextmenu']">
+    <a-dropdown :trigger="['contextmenu']" overlay-class-name="nc-dropdown-tree-view-context-menu">
       <div class="pt-2 pl-2 pb-2 flex-1 overflow-y-auto flex flex-col scrollbar-thin-dull" :class="{ 'mb-[20px]': isSharedBase }">
         <div class="py-1 px-3 flex w-full items-center gap-1 cursor-pointer" @contextmenu="setMenuContext('main')">
           <span class="flex-1 text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
@@ -238,7 +238,7 @@ function openTableCreateDialog() {
 
             <span class="text-gray-500 group-hover:(text-primary/100) flex-1 nc-add-new-table">{{ $t('tooltip.addTable') }}</span>
 
-            <a-dropdown v-if="!isSharedBase" :trigger="['click']" @click.stop>
+            <a-dropdown v-if="!isSharedBase" :trigger="['click']" overlay-class-name="nc-dropdown-import-menu" @click.stop>
               <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu" />
 
               <template #overlay>

packages/nc-gui/components/dashboard/settings/AppStore.vue

@@ -72,7 +72,14 @@ onMounted(async () => {
 </script>
 
 <template>
-  <a-modal v-model:visible="showPluginInstallModal" :closable="false" centered min-height="300" :footer="null">
+  <a-modal
+    v-model:visible="showPluginInstallModal"
+    :closable="false"
+    centered
+    min-height="300"
+    :footer="null"
+    wrap-class-name="nc-modal-plugin-install"
+  >
     <AppInstall
       v-if="pluginApp && showPluginInstallModal"
       :id="pluginApp.id"
@@ -81,7 +88,14 @@ onMounted(async () => {
     />
   </a-modal>
 
-  <a-modal v-model:visible="showPluginUninstallModal" :closable="false" width="24rem" centered :footer="null">
+  <a-modal
+    v-model:visible="showPluginUninstallModal"
+    :closable="false"
+    width="24rem"
+    centered
+    :footer="null"
+    wrap-class-name="nc-modal-plugin-uninstall"
+  >
     <div class="flex flex-col h-full">
       <div class="flex flex-row justify-center mt-2 text-center w-full text-base">
         {{ `Click on confirm to reset ${pluginApp && pluginApp.title}` }}

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

@@ -231,7 +231,13 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" class="p-2" @keydown.esc="dialogShow = false">
+  <a-modal
+    v-model:visible="dialogShow"
+    width="max(30vw, 600px)"
+    class="p-2"
+    wrap-class-name="nc-modal-airtable-import"
+    @keydown.esc="dialogShow = false"
+  >
     <div class="px-5">
       <!--      Quick Import -->
       <div class="mt-5 prose-xl font-weight-bold">{{ $t('title.quickImport') }} - AIRTABLE</div>

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

@@ -284,7 +284,12 @@ const customReqCbk = (customReqArgs: { file: any; onSuccess: () => void }) => {
 </script>
 
 <template>
-  <a-modal v-model:visible="dialogShow" :width="modalWidth" @keydown.esc="dialogShow = false">
+  <a-modal
+    v-model:visible="dialogShow"
+    :width="modalWidth"
+    wrap-class-name="nc-modal-quick-import"
+    @keydown.esc="dialogShow = false"
+  >
     <div class="px-5">
       <div class="prose-xl font-weight-bold my-5">{{ importMeta.header }}</div>
 

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

@@ -80,7 +80,13 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" centered @keydown.esc="dialogShow = false" wrap-class-name="nc-modal-table-create">
+  <a-modal
+    v-model:visible="dialogShow"
+    width="max(30vw, 600px)"
+    centered
+    wrap-class-name="nc-modal-table-create"
+    @keydown.esc="dialogShow = false"
+  >
     <template #footer>
       <a-button key="back" size="large" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
 

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

@@ -140,7 +140,7 @@ async function onSubmit() {
 </script>
 
 <template>
-  <a-modal v-model:visible="vModel" class="!top-[35%]" :confirm-loading="loading">
+  <a-modal v-model:visible="vModel" class="!top-[35%]" :confirm-loading="loading" wrap-class-name="nc-modal-view-create">
     <template #title>
       {{ $t('general.create') }} <span class="text-capitalize">{{ typeAlias }}</span> {{ $t('objects.view') }}
     </template>

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

@@ -48,7 +48,7 @@ async function onDelete() {
 </script>
 
 <template>
-  <a-modal v-model:visible="vModel" class="!top-[35%]" :confirm-loading="isLoading">
+  <a-modal v-model:visible="vModel" class="!top-[35%]" :confirm-loading="isLoading" wrap-class-name="nc-modal-view-delete">
     <template #title> {{ $t('general.delete') }} {{ $t('objects.view') }} </template>
 
     {{ $t('msg.info.deleteViewConfirmation') }}

packages/nc-gui/components/general/HelpAndSupport.vue

@@ -27,12 +27,11 @@ const openSwaggerLink = () => {
   <a-drawer
     v-bind="$attrs"
     v-model:visible="showDrawer"
-    class="h-full relative nc-help-and-support"
+    class="h-full relative nc-drawer-help-and-support"
     placement="right"
     size="small"
     :closable="false"
     :body-style="{ padding: '12px 24px 0 24px', background: '#fafafa' }"
-
   >
     <div class="flex flex-col w-full h-full p-4 pb-0">
       <!-- Help center -->

packages/nc-gui/components/general/MiniSidebar.vue

@@ -28,7 +28,7 @@ const logout = () => {
     collapsible
     theme="light"
   >
-    <a-dropdown placement="bottom" :trigger="['click']">
+    <a-dropdown placement="bottom" :trigger="['click']" overlay-class-name="nc-dropdown">
       <div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105 nc-noco-brand-icon">
         <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
       </div>
@@ -60,7 +60,7 @@ const logout = () => {
     </a-dropdown>
 
     <div id="sidebar" ref="sidebar" class="text-white flex-auto flex flex-col items-center w-full">
-      <a-dropdown :trigger="['contextmenu']" placement="right">
+      <a-dropdown :trigger="['contextmenu']" placement="right" overlay-class-name="nc-dropdown">
         <div :class="[route.name === 'index' ? 'active' : '']" class="nc-mini-sidebar-item" @click="navigateTo('/')">
           <MdiFolder class="cursor-pointer transform hover:scale-105 text-2xl" />
         </div>

packages/nc-gui/components/general/ReleaseInfo.vue

@@ -40,7 +40,7 @@ onMounted(async () => await fetchReleaseInfo())
 
 <template>
   <div v-if="releaseAlert" class="flex items-center">
-    <a-dropdown :trigger="['click']" placement="bottom">
+    <a-dropdown :trigger="['click']" placement="bottom" overlay-class-name="nc-dropdown-upgrade-menu">
       <a-button class="!bg-primary !border-none">
         <div class="flex gap-1 items-center text-white">
           <span class="text-sm font-weight-medium">{{ $t('activity.upgrade.available') }}</span>

packages/nc-gui/components/general/language/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-dropdown class="select-none color-transition cursor-pointer" :trigger="['click']">
+  <a-dropdown class="select-none color-transition cursor-pointer" :trigger="['click']" overlay-class-name="nc-dropdown-menu-translate">
     <div v-bind="$attrs" class="flex items-center justify-center">
       <MaterialSymbolsTranslate class="md:text-xl nc-menu-translate" />
     </div>

packages/nc-gui/components/smartsheet-column/SelectOptions.vue

@@ -97,7 +97,11 @@ watch(inputs, () => {
       <template #item="{ element, index }">
         <div class="flex py-1 items-center">
           <MdiDragIcon small class="nc-child-draggable-icon handle" />
-          <a-dropdown v-model:visible="colorMenus[index]" :trigger="['click']">
+          <a-dropdown
+            v-model:visible="colorMenus[index]"
+            :trigger="['click']"
+            overlay-class-name="nc-dropdown-select-color-options"
+          >
             <template #overlay>
               <GeneralColorPicker v-model="element.color" :pick-button="true" @update:model-value="colorMenus[index] = false" />
             </template>

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

@@ -28,7 +28,13 @@ const editColumnDropdown = ref(false)
       <SmartsheetHeaderMenu v-if="!isForm && isUIAllowed('edit-column')" @edit="editColumnDropdown = true" />
     </template>
 
-    <a-dropdown v-model:visible="editColumnDropdown" class="h-full" :trigger="['click']" placement="bottomRight">
+    <a-dropdown
+      v-model:visible="editColumnDropdown"
+      class="h-full"
+      :trigger="['click']"
+      placement="bottomRight"
+      overlay-class-name="nc-dropdown-edit-column"
+    >
       <div />
       <template #overlay>
         <SmartsheetColumnEditOrAddProvider

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

@@ -61,7 +61,7 @@ const setAsPrimaryValue = async () => {
 </script>
 
 <template>
-  <a-dropdown v-if="!isLocked" placement="bottomRight" :trigger="['click']">
+  <a-dropdown v-if="!isLocked" placement="bottomRight" :trigger="['click']" overlay-class-name="nc-dropdown-column-operations">
     <MdiMenuDown class="h-full text-grey nc-ui-dt-dropdown cursor-pointer outline-0" />
 
     <template #overlay>

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

@@ -115,7 +115,13 @@ const tooltipMsg = computed(() => {
       <SmartsheetHeaderMenu v-if="!isForm && isUIAllowed('edit-column')" :virtual="true" @edit="editColumnDropdown = true" />
     </template>
 
-    <a-dropdown v-model:visible="editColumnDropdown" class="h-full" :trigger="['click']" placement="bottomRight">
+    <a-dropdown
+      v-model:visible="editColumnDropdown"
+      class="h-full"
+      :trigger="['click']"
+      placement="bottomRight"
+      overlay-class-name="nc-dropdown"
+    >
       <div />
       <template #overlay>
         <SmartsheetColumnEditOrAddProvider

packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue

@@ -156,9 +156,9 @@ defineExpose({
                 :dropdown-match-select-width="false"
                 class="shrink grow-0"
                 placeholder="Group op"
+                dropdown-class-name="nc-dropdown-filter-logical-op-group"
                 @click.stop
                 @change="saveOrUpdate(filter, i)"
-                dropdown-class-name="nc-dropdown-filter-logical-op-group"
               >
                 <a-select-option v-for="op in logicalOps" :key="op.value" :value="op.value" class="">
                   {{ op.text }}
@@ -204,9 +204,9 @@ defineExpose({
               class="h-full"
               hide-details
               :disabled="filter.readOnly"
+              dropdown-class-name="nc-dropdown-filter-logical-op"
               @click.stop
               @change="filterUpdateCondition(filter, i)"
-              dropdown-class-name="nc-dropdown-filter-logical-op"
             >
               <a-select-option v-for="op in logicalOps" :key="op.value" :value="op.value">
                 {{ op.text }}
@@ -232,8 +232,8 @@ defineExpose({
               variant="solo"
               :disabled="filter.readOnly"
               hide-details
-              @change="filterUpdateCondition(filter, i)"
               dropdown-class-name="nc-dropdown-filter-comp-op"
+              @change="filterUpdateCondition(filter, i)"
             >
               <a-select-option v-for="compOp in comparisonOpList" :key="compOp.value" :value="compOp.value" class="">
                 {{ compOp.text }}

packages/nc-gui/components/smartsheet-toolbar/ColumnFilterMenu.vue

@@ -51,7 +51,7 @@ const filterAutoSaveLoc = computed({
 </script>
 
 <template>
-  <a-dropdown :trigger="['click']">
+  <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-filter-menu">
     <div :class="{ 'nc-badge nc-active-btn': filtersLength }">
       <a-button v-t="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn txt-sm" :disabled="isLocked">
         <div class="flex items-center gap-1">

packages/nc-gui/components/smartsheet-toolbar/Export.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-dropdown :trigger="['click']">
+  <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-download-menu">
     <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
       <div class="flex gap-2 items-center">
         <MdiDownload class="group-hover:text-accent text-gray-500" />

packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue

@@ -116,7 +116,7 @@ const getIcon = (c: ColumnType) =>
 </script>
 
 <template>
-  <a-dropdown :trigger="['click']">
+  <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-nc-fields-menu">
     <div :class="{ 'nc-badge nc-active-btn': isAnyFieldHidden }">
       <a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex items-center gap-1">

packages/nc-gui/components/smartsheet-toolbar/MoreActions.vue

@@ -166,7 +166,13 @@ const exportFile = async (exportType: ExportTypes) => {
 
     <WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
 
-    <a-modal v-model:visible="sharedViewListDlg" :title="$t('activity.listSharedView')" width="max(900px,60vw)" :footer="null">
+    <a-modal
+      v-model:visible="sharedViewListDlg"
+      :title="$t('activity.listSharedView')"
+      width="max(900px,60vw)"
+      :footer="null"
+      wrap-class-name="nc-modal-shared-view-list"
+    >
       <SmartsheetToolbarSharedViewList v-if="sharedViewListDlg" />
     </a-modal>
   </div>

packages/nc-gui/components/smartsheet-toolbar/SortListMenu.vue

@@ -41,7 +41,7 @@ watch(
 </script>
 
 <template>
-  <a-dropdown offset-y class="" :trigger="['click']" overlay-class-name="sort-menu-overlay">
+  <a-dropdown offset-y class="" :trigger="['click']" overlay-class-name="nc-dropdown-sort-menu">
     <div :class="{ 'nc-badge nc-active-btn': sorts?.length }">
       <a-button v-t="['c:sort']" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked"
         ><div class="flex items-center gap-1">

packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue

@@ -81,7 +81,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
 
 <template>
   <div>
-    <a-dropdown :trigger="['click']">
+    <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-actions-menu">
       <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
         <div class="flex gap-2 items-center">
           <component
@@ -221,7 +221,13 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
 
     <WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
 
-    <a-modal v-model:visible="sharedViewListDlg" :title="$t('activity.listSharedView')" width="max(900px,60vw)" :footer="null">
+    <a-modal
+      v-model:visible="sharedViewListDlg"
+      :title="$t('activity.listSharedView')"
+      width="max(900px,60vw)"
+      :footer="null"
+      wrap-class-name="nc-modal-shared-view-list"
+    >
       <SmartsheetToolbarSharedViewList v-if="sharedViewListDlg" />
     </a-modal>
     <SmartsheetApiSnippet v-model="showApiSnippetDrawer" />

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

@@ -136,7 +136,7 @@ watch($$(activeLang), (newLang) => {
 <template>
   <a-drawer
     v-model:visible="vModel"
-    class="h-full relative"
+    class="h-full relative nc-drawer-api-snippet"
     style="color: red"
     placement="right"
     size="large"

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

@@ -470,7 +470,7 @@ onMounted(async () => {
             <!-- Drag and drop fields here to hide -->
             {{ $t('msg.info.dragDropHide') }}
           </div>
-          <a-dropdown v-model:visible="showColumnDropdown" :trigger="['click']">
+          <a-dropdown v-model:visible="showColumnDropdown" :trigger="['click']" overlay-class-name="nc-dropdown-form-add-column">
             <a-button type="link" class="w-full caption mt-2" size="large" @click.stop="showColumnDropdown = true">
               <div class="flex items-center prose-sm justify-center text-gray-400">
                 <mdi-plus />

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

@@ -363,7 +363,11 @@ onBeforeUnmount(async () => {
       <a-spin size="large" />
     </div>
     <div v-else class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull">
-      <a-dropdown v-model:visible="contextMenu" :trigger="isSqlView ? [] : ['contextmenu']">
+      <a-dropdown
+        v-model:visible="contextMenu"
+        :trigger="isSqlView ? [] : ['contextmenu']"
+        overlay-class-name="nc-dropdown-grid-context-menu"
+      >
         <table
           ref="smartTable"
           class="xc-row-table nc-grid backgroundColorDefault !h-auto bg-white"
@@ -411,7 +415,11 @@ onBeforeUnmount(async () => {
                 class="cursor-pointer"
                 @click.stop="addColumnDropdown = true"
               >
-                <a-dropdown v-model:visible="addColumnDropdown" :trigger="['click']">
+                <a-dropdown
+                  v-model:visible="addColumnDropdown"
+                  :trigger="['click']"
+                  overlay-class-name="nc-dropdown-grid-add-column"
+                >
                   <div class="h-full w-[60px] flex items-center justify-center">
                     <MdiPlus class="text-sm nc-column-add" />
                   </div>

packages/nc-gui/components/smartsheet/sidebar/toolbar/DebugMeta.vue

@@ -18,7 +18,7 @@ const localTables = tables.value.filter((t) => metas[t.id as string])
     <mdi-bug-outline class="cursor-pointer" @click="editorOpen = true" />
   </a-tooltip>
 
-  <a-modal v-model:visible="editorOpen" :footer="null" width="80%">
+  <a-modal v-model:visible="editorOpen" :footer="null" width="80%" wrap-class-name="nc-modal-debug-meta">
     <a-tabs v-model:activeKey="tabKey" type="card" closeable="false" class="shadow-sm">
       <a-tab-pane v-for="table in localTables" :key="table.id" :tab="table.title">
         <MonacoEditor v-model="metas[table.id]" class="h-max-[70vh]" :read-only="true" />

packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue

@@ -98,7 +98,14 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-modal v-model:visible="showNewTokenModal" :closable="false" width="28rem" centered :footer="null">
+  <a-modal
+    v-model:visible="showNewTokenModal"
+    :closable="false"
+    width="28rem"
+    centered
+    :footer="null"
+    wrap-class-name="nc-modal-generate-token"
+  >
     <div class="relative flex flex-col h-full">
       <a-button type="text" class="!absolute top-0 right-0 rounded-md -mt-2 -mr-3" @click="showNewTokenModal = false">
         <template #icon>
@@ -131,7 +138,14 @@ onMounted(() => {
       </a-form>
     </div>
   </a-modal>
-  <a-modal v-model:visible="showDeleteTokenModal" :closable="false" width="28rem" centered :footer="null">
+  <a-modal
+    v-model:visible="showDeleteTokenModal"
+    :closable="false"
+    width="28rem"
+    centered
+    :footer="null"
+    wrap-class-name="nc-modal-delete-token"
+  >
     <div class="flex flex-col h-full">
       <div class="flex flex-row justify-center mt-2 text-center w-full text-base">This action will remove this API Token</div>
       <div class="flex mt-6 justify-center space-x-2">
@@ -195,7 +209,7 @@ onMounted(() => {
               </a-button>
             </a-tooltip>
 
-            <a-dropdown :trigger="['click']" class="flex" placement="bottomRight">
+            <a-dropdown :trigger="['click']" class="flex" placement="bottomRight" overlay-class-name="nc-dropdown-api-token-mgmt">
               <div class="flex flex-row items-center">
                 <a-button type="text" class="!px-0">
                   <div class="flex flex-row items-center h-[1.2rem]">

packages/nc-gui/components/tabs/auth/UserManagement.vue

@@ -173,7 +173,14 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
       @closed="showUserModal = false"
       @reload="loadUsers()"
     />
-    <a-modal v-model:visible="showUserDeleteModal" :closable="false" width="28rem" centered :footer="null">
+    <a-modal
+      v-model:visible="showUserDeleteModal"
+      :closable="false"
+      width="28rem"
+      centered
+      :footer="null"
+      wrap-class-name="nc-modal-delete-user"
+    >
       <div class="flex flex-col h-full">
         <div class="flex flex-row justify-center mt-2 text-center w-full text-base">
           This action will remove this user from this project
@@ -282,7 +289,7 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
             </a-button>
           </a-tooltip>
 
-          <a-dropdown :trigger="['click']" class="flex" placement="bottomRight">
+          <a-dropdown :trigger="['click']" class="flex" placement="bottomRight" overlay-class-name="nc-dropdown-user-mgmt">
             <div class="flex flex-row items-center">
               <a-button type="text" class="!px-0">
                 <div class="flex flex-row items-center h-[1.2rem]">

packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue

@@ -195,7 +195,7 @@ onMounted(() => {
     <!--    Generate publicly shareable readonly base -->
     <div class="flex text-xs text-gray-500 mt-2 justify-start ml-2">{{ $t('msg.info.generatePublicShareableReadonlyBase') }}</div>
     <div class="mt-4 flex flex-row justify-between mx-1">
-      <a-dropdown v-model="showEditBaseDropdown" class="flex">
+      <a-dropdown v-model="showEditBaseDropdown" class="flex" overlay-class-name="nc-dropdown-shared-base-toggle">
         <a-button>
           <div class="flex flex-row items-center space-x-2 nc-disable-shared-base">
             <div v-if="base?.uuid">{{ $t('activity.shareBase.enable') }}</div>

packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue

@@ -130,7 +130,15 @@ const clickInviteMore = () => {
 </script>
 
 <template>
-  <a-modal :footer="null" centered :visible="show" :closable="false" width="max(50vw, 44rem)" @cancel="emit('closed')">
+  <a-modal
+    :footer="null"
+    centered
+    :visible="show"
+    :closable="false"
+    width="max(50vw, 44rem)"
+    wrap-class-name="nc-modal-invite-user-and-share-base"
+    @cancel="emit('closed')"
+  >
     <div class="flex flex-col">
       <div class="flex flex-row justify-between items-center pb-1.5 mb-2 border-b-1 w-full">
         <a-typography-title class="select-none" :level="4"> {{ $t('activity.share') }}: {{ project.title }} </a-typography-title>

packages/nc-gui/components/virtual-cell/components/ListItems.vue

@@ -104,7 +104,13 @@ watch(expandedFormDlg, (nexVal) => {
 </script>
 
 <template>
-  <a-modal v-model:visible="vModel" :footer="null" :title="$t('activity.linkRecord')" :body-style="{ padding: 0 }">
+  <a-modal
+    v-model:visible="vModel"
+    :footer="null"
+    :title="$t('activity.linkRecord')"
+    :body-style="{ padding: 0 }"
+    wrap-class-name="nc-modal-link-record"
+  >
     <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col py-6">
       <div class="flex mb-4 items-center gap-2 px-12">
         <a-input

packages/nc-gui/components/webhook/Drawer.vue

@@ -29,6 +29,7 @@ async function editHook(hook: Record<string, any>) {
     placement="right"
     width="700px"
     :body-style="{ background: 'rgba(67, 81, 232, 0.05)', padding: '0px 0px', overflow: 'hidden' }"
+    class="nc-drawer-webhook"
     @keydown.esc="vModel = false"
   >
     <a-layout class="">

packages/nc-gui/layouts/base.vue

@@ -69,7 +69,7 @@ hooks.hook('page:finish', () => {
         </a-tooltip>
 
         <template v-if="signedIn && !isSharedBase">
-          <a-dropdown :trigger="['click']">
+          <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-user-accounts-menu">
             <MdiDotsVertical class="md:text-xl cursor-pointer hover:text-accent nc-menu-accounts text-white" @click.prevent />
 
             <template #overlay>

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

@@ -193,7 +193,12 @@ if (type && name) {
             <img alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
           </a>
 
-          <a-dropdown class="h-full min-w-0 flex-1" :trigger="['click']" placement="bottom">
+          <a-dropdown
+            class="h-full min-w-0 flex-1"
+            :trigger="['click']"
+            placement="bottom"
+            overlay-class-name="nc-dropdown-project-menu"
+          >
             <div
               :style="{ width: isOpen ? 'calc(100% - 40px) pr-2' : '100%' }"
               :class="[isOpen ? '' : 'justify-center']"

packages/nc-gui/pages/index/index/create-external.vue

@@ -539,7 +539,13 @@ onMounted(() => {
       </a-form-item>
     </a-form>
 
-    <a-modal v-model:visible="configEditDlg" :title="$t('activity.editConnJson')" width="600px" @ok="handleOk">
+    <a-modal
+      v-model:visible="configEditDlg"
+      :title="$t('activity.editConnJson')"
+      width="600px"
+      wrap-class-name="nc-modal-edit-connection-json"
+      @ok="handleOk"
+    >
       <MonacoEditor v-if="configEditDlg" v-model="customFormState" class="h-[400px] w-full" />
     </a-modal>
 

packages/nc-gui/pages/index/index/index.vue

@@ -136,7 +136,7 @@ const getProjectPrimary = (project: ProjectType) => {
 
       <div class="flex-1" />
 
-      <a-dropdown v-if="isUIAllowed('projectCreate', true)" :trigger="['click']">
+      <a-dropdown v-if="isUIAllowed('projectCreate', true)" :trigger="['click']" overlay-class-name="nc-dropdown-create-project">
         <button class="nc-new-project-menu">
           <span class="flex items-center w-full">
             {{ $t('title.newProj') }}

packages/nc-gui/pages/projects/index/index.vue

@@ -71,7 +71,7 @@ const formatTitle = (title: string) =>
     <div v-for="(project, i) of projects" :key="project.id" class="group flex flex-col items-center gap-2">
       <div class="thumbnail" :style="{ '--thumbnail-color': getColorByIndex(i) }" @click="openProject(project)">
         {{ formatTitle(project.title) }}
-        <a-dropdown @click.stop>
+        <a-dropdown overlay-class-name="nc-dropdown-project-operations" @click.stop>
           <MdiMenuDown class="menu-icon" />
           <template #overlay>
             <a-menu>

scripts/cypress/support/page_objects/mainPage.js

@@ -313,7 +313,7 @@ export class _mainPage {
     sortField = (field, criteria) => {
         cy.get(".nc-sort-menu-btn").click();
         cy.wait(500)
-        cy.getActiveMenu('.sort-menu-overlay').contains("Add Sort Option").click();
+        cy.getActiveMenu('.nc-dropdown-sort-menu').contains("Add Sort Option").click();
         cy.wait(500)
         // cy.get(".nc-sort-field-select div").first().click().type(field);
         cy.get(".nc-sort-field-select div").first().click();