fix(action-sheet): adjust height for safe area with scrollable options (#28504)

Issue number: fixes #27777

---------

## What is the current behavior?
When safe area (top/bottom) is applied to an action sheet with
scrollable options and a cancel button, the cancel button is pushed off
the screen and cannot be reached.

## What is the new behavior?
Properly adjust the height of the action sheet container to account for
the top and bottom safe area.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

The below screenshots use the following CSS when safe area is added so
it is expected that the action sheet will adjust the top and bottom:

```css
:root {
  --ion-safe-area-top: 60px;
  --ion-safe-area-bottom: 40px;
}
```

### iOS

|                    | Before (`main`) | After (`FW-4715`) |
| -------------------| ----------------| ------------------|
| **No** Safe Area |
![ios-main-no-safe-area](https://github.com/ionic-team/ionic-framework/assets/6577830/2bbb8c09-6e35-4f88-983c-019cef1b9f44)
|
![ios-branch-no-safe-area](https://github.com/ionic-team/ionic-framework/assets/6577830/55d899d3-945e-4d1e-983f-5d9b0a3ad6cc)
|
| **Safe Area** |
![ios-main-safe-area](https://github.com/ionic-team/ionic-framework/assets/6577830/7b7ea64c-4432-4160-aadb-8be333549bc6)
|
![ios-branch-safe-area](https://github.com/ionic-team/ionic-framework/assets/6577830/02143b3a-ca40-4294-b77c-3bb7867da0b9)
|

### Material Design

|                    | Before (`main`) | After (`FW-4715`) |
| -------------------| ----------------| ------------------|
| **No** Safe Area |
![md-main-no-safe-area](https://github.com/ionic-team/ionic-framework/assets/6577830/a448bd22-6d79-4f2c-a0ec-654c6679732f)
|
![md-branch-no-safe-area](https://github.com/ionic-team/ionic-framework/assets/6577830/ef8244c4-b8e8-434b-bd06-1d6981396574)
|
| **Safe Area** |
![md-main-safe-area](https://github.com/ionic-team/ionic-framework/assets/6577830/80e00ce6-eb34-4d87-9546-a49da373fb6b)
|
![md-branch-safe-area](https://github.com/ionic-team/ionic-framework/assets/6577830/d8b86141-a65c-4026-b895-8d167ebc6258)
|

---------

Co-authored-by: ionitron <[email protected]>

Author: brandyscarney

core/src/components/action-sheet/action-sheet.scss

@@ -128,8 +128,8 @@
   height: 100%;
 
   /* Fallback for browsers that do not support dvh */
-  max-height: 100vh;
-  max-height: 100dvh;
+  max-height: calc(100vh - (var(--ion-safe-area-top, 0) + var(--ion-safe-area-bottom, 0)));
+  max-height: calc(100dvh - (var(--ion-safe-area-top, 0) + var(--ion-safe-area-bottom, 0)));
 }
 
 .action-sheet-group {

core/src/components/action-sheet/test/basic/action-sheet.e2e.ts

@@ -100,3 +100,69 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) =>
     });
   });
 });
+
+/**
+ * This behavior needs to be tested in both modes but does not vary
+ * across directions due to the component only applying safe area
+ * to the top and bottom
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('action-sheet: basic'), () => {
+    test.describe('safe area', () => {
+      test('should have padding added by the safe area', async ({ page }, testInfo) => {
+        testInfo.annotations.push({
+          type: 'issue',
+          description: 'https://github.com/ionic-team/ionic-framework/issues/27777',
+        });
+        await page.setContent(
+          `
+          <style>
+            :root {
+              --ion-safe-area-top: 60px;
+              --ion-safe-area-bottom: 40px;
+            }
+          </style>
+
+          <ion-action-sheet></ion-action-sheet>
+
+          <script>
+            const actionSheet = document.querySelector('ion-action-sheet');
+            actionSheet.header = 'Header';
+            actionSheet.subHeader = 'Sub Header';
+            actionSheet.buttons = [
+              'Add Reaction',
+              'Copy Text',
+              'Share Text',
+              'Copy Link to Message',
+              'Remind Me',
+              'Pin File',
+              'Star File',
+              'Mark Unread',
+              'Mark Read',
+              'Edit Title',
+              'Erase Title',
+              'Save Image',
+              'Copy Image',
+              'Erase Image',
+              'Delete File',
+              {
+                text: 'Cancel',
+                role: 'cancel'
+              },
+            ];
+          </script>
+        `,
+          config
+        );
+
+        const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+        const actionSheet = page.locator('ion-action-sheet');
+
+        await actionSheet.evaluate((el: HTMLIonActionSheetElement) => el.present());
+        await ionActionSheetDidPresent.next();
+
+        await expect(actionSheet).toHaveScreenshot(screenshot(`action-sheet-safe-area`));
+      });
+    });
+  });
+});