[Bug]: Overlay is raised too high on the screen when keyboard is open for tablet device

### Code of conduct

- [X] I agree to follow this project's code of conduct.

### Impacted component(s)

sp-overlay, sp-popover

### Expected behavior

The panel should remain visible to the user and reposition itself based on trigger element position.

### Actual behavior

When keyboard is open, overlay is raised too high and user is unable to use the panel

### Screenshots

https://github.com/user-attachments/assets/b57609ca-240e-44ef-a24f-eb2e323913c9

### What browsers are you seeing the problem in?

Firefox, Chrome, Safari, Microsoft Edge

### How can we reproduce this issue?

1. Go to https://studio.webcomponents.dev/edit/eBpFzyndu07XRztVOozf/src/index.ts?p=stories in iPad. I used iPad Air.
2. Click on Click on Button Popover
3. Click on Example Textfield
5. Popover is closed on open of soft keyboard of iPad.

### Sample code or abstract reproduction which illustrates the problem
https://studio.webcomponents.dev/edit/eBpFzyndu07XRztVOozf/src/index.ts?p=stories
Created a story of the sample code.

_No response_

### Severity

SEV 1

### Logs taken while reproducing problem

_No response_