Fix floating ha-toast

[timmo001]

Breaking change

Proposed change

Replaced the wa-popup with standard div using the popover API directly. Replicated most of the functionality and fallbacks to CSS (see legacy browser testing below)

Adjusted the padding on the toast itself to fit the content a little better (space 2 -> 3 etc)

Screenshots

screenrecording-2026-03-26_16-21-14.mp4

screenrecording-2026-03-26_16-18-40.mp4

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Additional information

• This PR fixes or closes issue: fixes Starting banner moving while scrolling on Mobile App #30330
• This PR is related to issue or discussion:
• Link to documentation pull request:
• Link to developer documentation pull request:
• Link to backend pull request:

Checklist

• I understand the code I am submitting and can explain how it works.
• The code change is tested and works locally.
• There is no commented out code in this PR.
• I have followed the development checklist
• I have followed the perfect PR recommendations
• Any generated code has been carefully reviewed for correctness and compliance with project standards.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

To help with the load of incoming pull requests:

• I have reviewed two other open pull requests in this repository.

[timmo001]

90b753c (this PR)

Installed package locally, it is newer than webawesome's version though

https://github.com/home-assistant/webawesome/blob/next/packages/webawesome/package.json#L85

[bramkragten]

I feel like floating-ui is a bit of overkill for this, as we dont need to attach it to an element that is moving on screen, or keep the toast on screen, cant we just set the toast itself to a fixed position?

[timmo001]

Not without changing the library to force fixed strategy: https://github.com/home-assistant/webawesome/blob/next/packages/webawesome/src/components/popup/popup.ts?rgh-link-date=2026-03-26T10%3A45%3A02Z#L434

[bramkragten]

We are not using popup anymore now right?

[timmo001]

We are not using popup anymore now right?

In dev we are yeah. Unless you mean wa-popover?

[bramkragten]

I mean for the toast

[timmo001]

Ah yeah damn stops the toast working on top layer again

[timmo001]

Tried the strategy fixed change on the lib, that made things worse

screenrecording-2026-03-26_15-34-07.mp4

[timmo001]

Found a better solution using the popover api directly

[wendevlin]

That won't work in legacy browsers. Is WA using this API too?

[timmo001]

That won't work in legacy browsers. Is WA using this API too?

https://github.com/home-assistant/webawesome/blob/80c10c1ff3290ef2b11b2371555c0fa7818948c6/packages/webawesome/src/components/popup/popup.ts#L36

They use this and rely on CSS otherwise for legacy browsers. This is the same for wa-popover usage as they expand wa-popup.

I've added a fallback to css for legacy browsers

[wendevlin]

I've added a fallback to css for legacy browsers

nice, can you test it in a legacy browser and confirm that it works?

[timmo001]

Windows 10 Chrome 100 (build from 2022, popovers added in 2024):

screenRecording-27-3-2026-11-23.mp4

Functional, but top layer issue returns.

ES5 build uses standard dialog element not sure if this has a fix in old browsers

Second test in same build with mobile layout:

screenRecording-27-3-2026-11-25.mp4

There's a secondary issue here with pickers in the wrong position, but as most desktops are on the new build I would say this is fine. The bottom sheets in mobile are odd also, but these might be browserstack/bad build related, not an es5 issue.

Might also try an old mobile device on here

[timmo001]

iPad os 18 on safari (seems to class as a modern build):

screenRecording-27-3-2026-11-34.mp4

[timmo001]

iPad os 17

screenRecording-27-3-2026-11-44.mp4

[bramkragten]

Does it work on iOS 16? (popover was introduced in iOS 17)

[timmo001]

macos with 16.5 (versions lower than 16.4 has no support of the ha-input implementation which uses ElementInternals.setValidity()), no ios variant has this patched version

screenRecording-27-3-2026-12-3.mp4

There are other flaws with this legacy browser, it might be browserstack related though - Dialogs have no scrim, copy doesnt show at all but toast works in normal views. pickers also have issues with closing outside (scrim) unless using esc or picking an item

[timmo001]

Does it work on iOS 12? (popover was introduced in iOS 17)

Doesnt even load in the simulator