fix(alert): switch to vertical layout when two buttons wrap (#31130)

Issue number: internal

---------

## What is the current behavior?

When an `ion-alert` has two buttons whose combined text is too long to
fit on one row, flex-wrap pushes the second button onto a new row. The
horizontal layout's right border (drawn between buttons via
`alert.ios.scss`) stays on the first button, leaving a stray vertical
separator at the wrap edge. The `alert-button-group-vertical` class only
triggers on `buttons.length > 2`, so two-button alerts can't opt into
the clean vertical layout even when they visually need it.

## What is the new behavior?

The alert now watches its button group with a `ResizeObserver` and
toggles `alert-button-group-vertical` whenever the buttons render at
different `offsetTop` values, so wrapping two-button alerts get the same
vertical treatment as three-or-more-button alerts. The wrap state resets
when the `buttons` prop changes so a new button set is re-evaluated from
scratch, and the observer is re-attached in `connectedCallback` so
reconnected alerts keep working. The layout read is deferred via `raf`
to avoid forcing synchronous layout and to sidestep `ResizeObserver`
loop warnings.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

The right-border styling between buttons only exists in iOS mode, so the
new e2e test is iOS only

Preview:
- iOS:
https://ionic-framework-git-fw-7244-ionic1.vercel.app/src/components/alert/test/basic?ionic:mode=ios

A lot of the updated screenshots are because of the new alert button. We
should probably make note of these to go back and update the tests so
they focus on the modal and don't include the background to prevent this
sort of update spam in the future.

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>