fix: use correct selector for crud dialog overlay in Aura (#12261) (#12265)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>

Author: vaadin-bot

packages/aura/src/components/overlay.css

@@ -31,7 +31,7 @@
   vaadin-combo-box,
   vaadin-confirm-dialog,
   vaadin-context-menu,
-  vaadin-crud-dialog,
+  vaadin-crud,
   vaadin-date-picker,
   vaadin-dialog,
   vaadin-login-overlay,

packages/aura/src/surface.css

@@ -39,7 +39,7 @@ vaadin-upload-file,
   vaadin-combo-box,
   vaadin-confirm-dialog,
   vaadin-context-menu,
-  vaadin-crud-dialog,
+  vaadin-crud,
   vaadin-date-picker,
   vaadin-dialog,
   vaadin-login-overlay,

packages/crud/test/visual/aura/crud.test.js

@@ -1,6 +1,7 @@
 import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '@vaadin/aura/aura.css';
+import '../../not-animated-styles.css';
 import '../../../vaadin-crud.js';
 
 describe('crud', () => {
@@ -9,7 +10,7 @@ describe('crud', () => {
   beforeEach(async () => {
     div = document.createElement('div');
     div.style.height = '100%';
-    element = fixtureSync('<vaadin-crud></vaadin-crud>', div);
+    element = fixtureSync('<vaadin-crud style="height: 100%"></vaadin-crud>', div);
     element.items = [{ name: { first: 'John', last: 'Doe' } }, { name: { first: 'Jane', last: 'Doe' } }];
     await nextRender();
   });
@@ -27,4 +28,25 @@ describe('crud', () => {
     element.setAttribute('theme', 'no-row-borders');
     await visualDiff(element, 'no-row-borders');
   });
+
+  ['default', 'aside', 'bottom'].forEach((position) => {
+    describe(`editor-position-${position}`, () => {
+      beforeEach(async () => {
+        switch (position) {
+          case 'aside':
+          case 'bottom':
+            element.editorPosition = position;
+            await nextRender();
+            break;
+          default:
+          // Do nothing
+        }
+      });
+
+      it(`editor-position-${position}`, async () => {
+        element.editedItem = {};
+        await visualDiff(div, `editor-position-${position}`);
+      });
+    });
+  });
 });