fix: review

src/components/dialog/dialog.e2e.ts

@@ -419,7 +419,7 @@ describe('sbb-dialog', () => {
 });
 
 describe('sbb-dialog with long content', () => {
-  let element: SbbDialog;
+  let element: SbbDialogElement;
 
   beforeEach(async () => {
     await setViewport({ width: 900, height: 300 });
@@ -444,7 +444,7 @@ describe('sbb-dialog with long content', () => {
   });
 
   it('renders', () => {
-    assert.instanceOf(element, SbbDialog);
+    assert.instanceOf(element, SbbDialogElement);
   });
 
   it('sets the data-overflows attribute', async () => {

src/components/dialog/dialog.scss

@@ -265,9 +265,9 @@
   }
 
   // In order to improve the header transition on mobile (especially iOS) we use
-  // a combination of the transform and margin properties on the smaller breakpoints,
+  // a combination of the transform and margin properties on touch devices,
   // while on desktop we use just the margin-block for a better transition of the visible scrollbar.
-  @include sbb.mq($from: medium) {
+  @include sbb.hover-mq($hover: true) {
     transform: unset;
     margin-block: var(--sbb-dialog-header-margin-block-start) 0;
     transition: margin var(--sbb-dialog-animation-duration) var(--sbb-dialog-animation-easing);

src/components/dialog/dialog.stories.ts

@@ -188,7 +188,6 @@ const textBlockStyle: Args = {
   backgroundColor: 'var(--sbb-color-milk-default)',
   border: 'var(--sbb-border-width-1x) solid var(--sbb-color-cloud-default)',
   borderRadius: 'var(--sbb-border-radius-4x)',
-  zIndex: '100',
 };
 
 const textBlock = (): TemplateResult => html`