fix(alert): radio and checkbox labels wrap to next line (#27898)

Issue number: resolves #17269

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Long radio and checkbox labels truncate with ellipsis instead of
wrapping to the next line. This makes the label hard to understand
because users cannot read the entire label.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Labels now wrap to the next line instead of truncating.

Note: Some of the screenshots may show wider alerts than before. This is
the correct behavior. When rendering text, the browser will try to
render as much text on a single line as it can. Since our alerts can
expand in width, the alert wrapper will expand in width (up to the max
width) to accommodate this text. Once the the wrapper is at the max
width, text will then wrap to the next line.

For example, you may notice the MD alert increasing to 280px in width:
b8553d89f8/core/src/components/alert/alert.md.vars.scss (L11).

There should be no visual diff for alerts with text that would not
normally wrap to the next line.

This was not happening before because we did not allow text to wrap to
the next line.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: ionitron <hi@ionicframework.com>

core/src/components/alert/alert.ios.scss

@@ -123,7 +123,7 @@
 }
 
 .alert-tappable {
-  height: $alert-ios-tappable-height;
+  min-height: $alert-ios-tappable-height;
 }
 
 
@@ -137,12 +137,6 @@
   order: 0;
 
   color: $alert-ios-radio-label-text-color;
-
-  text-overflow: ellipsis;
-
-  white-space: nowrap;
-
-  overflow: hidden;
 }
 
 
@@ -196,12 +190,6 @@
   flex: 1;
 
   color: $alert-ios-checkbox-label-text-color;
-
-  text-overflow: ellipsis;
-
-  white-space: nowrap;
-
-  overflow: hidden;
 }
 
 // iOS Alert Checkbox Outer Circle: Unchecked

core/src/components/alert/alert.md.scss

@@ -113,9 +113,7 @@
 .alert-tappable {
   position: relative;
 
-  height: $alert-md-tappable-height;
-
-  overflow: hidden;
+  min-height: $alert-md-tappable-height;
 }
 
 
@@ -130,12 +128,6 @@
   color: $alert-md-radio-label-text-color;
 
   font-size: $alert-md-radio-label-font-size;
-
-  text-overflow: ellipsis;
-
-  white-space: nowrap;
-
-  overflow: hidden;
 }
 
 // Material Design Alert Radio Unchecked Circle
@@ -203,12 +195,6 @@
   color: $alert-md-checkbox-label-text-color;
 
   font-size: $alert-md-checkbox-label-font-size;
-
-  text-overflow: ellipsis;
-
-  white-space: nowrap;
-
-  overflow: hidden;
 }
 
 

core/src/components/alert/alert.scss

@@ -152,6 +152,8 @@
 
   width: 100%;
   height: 100%;
+
+  min-height: inherit;
 }
 
 
@@ -184,7 +186,7 @@
   text-align: start;
   appearance: none;
 
-  contain: strict;
+  contain: content;
 }
 
 .alert-button,

core/src/components/alert/test/basic/index.html

@@ -246,17 +246,12 @@
               type: 'radio',
               label: 'Radio 4',
               value: 'value4',
-            },
-            {
-              type: 'radio',
-              label: 'Radio 5',
-              value: 'value5',
               disabled: true,
             },
             {
               type: 'radio',
-              label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
-              value: 'value6',
+              label: 'Radio 5 Radio 5 Radio 5 Radio 5 Radio 5 Radio 5 Radio 5 Radio 5 Radio 5 Radio 5 ',
+              value: 'value5',
             },
           ],
           buttons: [
@@ -305,20 +300,13 @@
               type: 'checkbox',
               label: 'Checkbox 4',
               value: 'value4',
-            },
-
-            {
-              type: 'checkbox',
-              label: 'Checkbox 5',
-              value: 'value5',
               disabled: true,
             },
-
             {
               type: 'checkbox',
               label:
-                'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
-              value: 'value6',
+                'Checkbox 5 Checkbox 5 Checkbox 5 Checkbox 5 Checkbox 5 Checkbox 5 Checkbox 5 Checkbox 5 Checkbox 5 Checkbox 5',
+              value: 'value5',
             },
           ],
           buttons: [