diff --git a/core/src/components/alert/alert.md.scss b/core/src/components/alert/alert.md.scss
index bf92a45980..3ab3833e6c 100644
--- a/core/src/components/alert/alert.md.scss
+++ b/core/src/components/alert/alert.md.scss
@@ -52,11 +52,20 @@
 }
 
 .alert-message {
-  max-height: $alert-md-content-max-height;
-
   font-size: $alert-md-message-font-size;
 }
 
+/**
+ * MD Alerts on tablets can expand vertically up to
+ * a total maximum height. We only want to set a max-height
+ * on mobile phones.
+ */
+@include mobile-viewport() {
+  .alert-message {
+    max-height: $alert-md-content-max-height;
+  }
+}
+
 .alert-message:empty {
   @include padding($alert-md-message-empty-padding-top, $alert-md-message-empty-padding-end, $alert-md-message-empty-padding-bottom, $alert-md-message-empty-padding-start);
 }
@@ -102,14 +111,24 @@
 .alert-checkbox-group {
   position: relative;
 
-  max-height: $alert-md-content-max-height;
-
   border-top: $alert-md-list-border-top;
   border-bottom: $alert-md-list-border-bottom;
 
   overflow: auto;
 }
 
+/**
+ * MD Alerts on tablets can expand vertically up to
+ * a total maximum height. We only want to set a max-height
+ * on mobile phones.
+ */
+@include mobile-viewport() {
+  .alert-radio-group,
+  .alert-checkbox-group {
+    max-height: $alert-md-content-max-height;
+  }
+}
+
 .alert-tappable {
   position: relative;
 
@@ -282,3 +301,14 @@
 .alert-button-inner {
   justify-content: $alert-md-button-group-justify-content;
 }
+
+/**
+ * MD alerts should scale up to 560px x 560px
+ * on tablet dimensions.
+ */
+@include tablet-viewport() {
+  :host {
+    --max-width: #{$alert-md-max-width-tablet};
+    --max-height: #{$alert-md-max-height-tablet};
+  }
+}
diff --git a/core/src/components/alert/alert.md.vars.scss b/core/src/components/alert/alert.md.vars.scss
index 55bdea811e..725f708f7b 100644
--- a/core/src/components/alert/alert.md.vars.scss
+++ b/core/src/components/alert/alert.md.vars.scss
@@ -10,6 +10,20 @@ $alert-md-font-size:                          dynamic-font(14px) !default;
 /// @prop - Max width of the alert
 $alert-md-max-width:                          280px !default;
 
+/// @prop - Max width of the alert on a tablet
+/**
+ * Large display requirements for MD Alert:
+ * 1. Maintain a minimum of 48px distance from the leading and
+ * trailing edges of the screen. (48px * 2 = 96px)
+ * 2. The width can increase up to 560px.
+ * 3. The height can increase up to 560px.
+ * Source: https://m2.material.io/components/dialogs#behavior
+ */
+$alert-md-max-width-tablet:                          min(calc(100vw - 96px), 560px) !default;
+
+/// @prop - Max width of the alert on a tablet
+$alert-md-max-height-tablet:                          min(calc(100vh - 96px), 560px) !default;
+
 /// @prop - Border radius of the alert
 $alert-md-border-radius:                      4px !default;
 
diff --git a/core/src/components/alert/alert.scss b/core/src/components/alert/alert.scss
index 6fcdd72694..12cdac9040 100644
--- a/core/src/components/alert/alert.scss
+++ b/core/src/components/alert/alert.scss
@@ -84,7 +84,15 @@
   font-weight: normal;
 }
 
-.alert-message {
+/**
+ * Alert has a maximum height in scenarios
+ * such as the MD alert on tablet devices.
+ * As a result, we need to make sure the inner
+ * containers can scroll otherwise content
+ * may be cut off.
+ */
+.alert-message,
+.alert-input-group {
   box-sizing: border-box;
   -webkit-overflow-scrolling: touch;
   overflow-y: auto;
diff --git a/core/src/components/alert/test/basic/alert-tablet.e2e.ts b/core/src/components/alert/test/basic/alert-tablet.e2e.ts
new file mode 100644
index 0000000000..b4dc77e4f3
--- /dev/null
+++ b/core/src/components/alert/test/basic/alert-tablet.e2e.ts
@@ -0,0 +1,47 @@
+import { expect } from '@playwright/test';
+import { configs, test, Viewports } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('alert: rendering - tablet'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.setViewportSize(Viewports.tablet.portrait);
+      await page.goto('/src/components/alert/test/basic', config);
+    });
+
+    test('should expand width and height on larger displays with text', async ({ page }) => {
+      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+      const button = page.locator('#longMessage');
+      const alert = page.locator('ion-alert');
+
+      await button.click();
+      await ionAlertDidPresent.next();
+
+      await expect(alert).toHaveScreenshot(screenshot('alert-tablet-text'));
+    });
+
+    test('should expand width and height on larger displays with checkboxes', async ({ page }) => {
+      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+      const button = page.locator('#checkbox');
+      const alert = page.locator('ion-alert');
+
+      await button.click();
+      await ionAlertDidPresent.next();
+
+      await expect(alert).toHaveScreenshot(screenshot('alert-tablet-checkboxes'));
+    });
+
+    test('should expand width and height on larger displays with radios', async ({ page }) => {
+      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+      const button = page.locator('#radio');
+      const alert = page.locator('ion-alert');
+
+      await button.click();
+      await ionAlertDidPresent.next();
+
+      await expect(alert).toHaveScreenshot(screenshot('alert-tablet-radios'));
+    });
+  });
+});
diff --git a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..7cf2577e4b
Binary files /dev/null and b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..39ed2f0edf
Binary files /dev/null and b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..18f94a5b09
Binary files /dev/null and b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..efffe33a8b
Binary files /dev/null and b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..13112f9915
Binary files /dev/null and b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..5e9bad0df0
Binary files /dev/null and b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c3f47857cb
Binary files /dev/null and b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..42439073d1
Binary files /dev/null and b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..ca719857cf
Binary files /dev/null and b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-ltr-Mobile-Safari-linux.png
index e4eba29b7e..4f423135a0 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-rtl-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-rtl-Mobile-Safari-linux.png
index fc687caf46..64c39fbfe8 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-rtl-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/modal.ios.scss b/core/src/components/modal/modal.ios.scss
index 627cb5a34a..fc5e25e3d1 100644
--- a/core/src/components/modal/modal.ios.scss
+++ b/core/src/components/modal/modal.ios.scss
@@ -27,7 +27,7 @@
 // iOS Card Modal
 // --------------------------------------------------
 
-@media screen and (max-width: 767px) {
+@include mobile-viewport() {
   @supports (width: max(0px, 1px)) {
     :host(.modal-card) {
       --height: calc(100% - max(30px, var(--ion-safe-area-top)) - 10px);
@@ -60,7 +60,7 @@
   }
 }
 
-@media screen and (min-width: 768px) {
+@include tablet-viewport() {
   :host(.modal-card) {
     --width: calc(100% - 120px);
     --height: calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));
diff --git a/core/src/themes/ionic.mixins.scss b/core/src/themes/ionic.mixins.scss
index 0c8cdad9b7..76fe102293 100644
--- a/core/src/themes/ionic.mixins.scss
+++ b/core/src/themes/ionic.mixins.scss
@@ -1,3 +1,38 @@
+
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+@mixin tablet-viewport() {
+  @media screen and (min-width: 768px) {
+    @content;
+  }
+}
+
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+@mixin mobile-viewport() {
+  @media screen and (max-width: 767px) {
+    @content;
+  }
+}
+
 @mixin input-cover() {
   @include position(0, null, null, 0);
   @include margin(0);
@@ -217,7 +252,7 @@
       $restSelectors: append($restSelectors, $selector, comma);
     }
   }
-  
+
   // Supported by Chrome.
   @if length($hostContextSelectors) > 0 {
     @at-root #{$hostContextSelectors} {