fix(sheet): z-index and scroll dividers in desktop (#1381)

Author: Marcosld

src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-info-sheet-after-scrolling-in-desktop-1-snap.png

@@ -104,6 +104,25 @@ test.each(TESTABLE_DEVICES)('InfoSheet with dismiss button in %s', async (device
     expect(image).toMatchImageSnapshot();
 });
 
+test.each(TESTABLE_DEVICES)('InfoSheet after scrolling in %s', async (device) => {
+    const page = await openStoryPage({
+        id: 'private-sheet-presets--info',
+        device,
+        args: {buttonText: 'Dismiss', numItems: 10},
+    });
+
+    const button = await screen.findByRole('button', {name: 'Open'});
+    await button.click();
+
+    await screen.findByRole('dialog');
+    const listItems = await screen.findAllByRole('listitem');
+    await listItems[2].evaluate((el) => el.scrollIntoView());
+
+    const image = await page.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+});
+
 test.each(TESTABLE_DEVICES_WITH_LARGE_DESKTOP)('ActionsSheet in %s', async (device) => {
     const page = await openStoryPage({
         id: 'private-sheet-presets--actions',

src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-info-sheet-after-scrolling-in-mobile-ios-1-snap.png

@@ -196,6 +196,7 @@ export const modalCloseButton = style([
         padding: 24,
     }),
     {
+        zIndex: 1,
         '@media': {
             [mq.tabletOrSmaller]: {
                 display: 'none',
@@ -268,11 +269,7 @@ export const stickyTitle = style([
         background: skinVars.colors.background,
     }),
     {
-        '@media': {
-            [mq.tabletOrSmaller]: {
-                zIndex: 1,
-            },
-        },
+        zIndex: 1,
     },
 ]);
 
@@ -283,11 +280,7 @@ export const stickyButtons = style([
         background: skinVars.colors.background,
     }),
     {
-        '@media': {
-            [mq.tabletOrSmaller]: {
-                zIndex: 1,
-            },
-        },
+        zIndex: 1,
     },
 ]);
 
@@ -296,7 +289,6 @@ export const bodyContent = style({
     zIndex: 0,
     '@media': {
         [mq.desktopOrBigger]: {
-            overflowY: 'auto',
             flex: 1,
         },
     },