HACS improperly handling IOS safe area on IOS Companion app.

[Big-Xan]

Web browser

IOS Companion App

Web browser version

See Report

System Health details

N/A see report below.

Checklist

• I'm running the newest version of HACS https://github.com/hacs/integration/releases/latest
• I have filled out the issue template to the best of my ability.
• I have read https://hacs.xyz/docs/help/issues/
• This issue is related to the frontend of HACS.
• This issue only contains 1 issue (if you have multiple issues, open one issue for each issue).
• This is a bug and not a feature request.
• This issue is not a duplicate issue of currently open or issues pending release.

Describe the issue

Edge-to-edge view in IOS app breaks HACS search. I thought it was a home assistant ios bug so I reported it there and they pointed me here. See the IOS dev's response in quotes below my report.

iOS device model, version and app version
Model Name: iPhone 15 Pro
Software Version: iOS 17.2
App version: 2026.4.0 (2026.1862)

Home Assistant Core Version
Core: 2026.4.4
Supervisor: 2026.04.0
Operating System: 17.2
Frontend: 20260325.8

Describe the bug
When the experimental “edge-to-edge display” feature is enabled in the iOS Companion App, the search field in HACS search becomes unusable as it's cut off/at the very top of the screen (see image)

To Reproduce

1. Enable “edge-to-edge display” in the iOS Companion App experimental settings
2. Open Home Assistant
3. Navigate to HACS
4. Attempt to tap into the search field

"I quickly checked this with a frontend dev and this appears to be an issue that HACS itself needs to fix, you can report the issue to HACS, what they need to do is to properly handle the iOS safe areas when displaying their UI, as you can see the rest of Home Assistant UI is already doing that but since HACS is not built-in neither official in Home Assistant, we don't have control on it."

Reproduction steps

To Reproduce

1. Enable “edge-to-edge display” in the iOS Companion App experimental settings
2. Open Home Assistant
3. Navigate to HACS
4. Attempt to tap into the search field

Screenshots

Attached above https://github.com/user-attachments/assets/bef84cbd-0206-4dfa-940d-6db18d3ef881

Javascript logs from your browser console

N/A

Debug logs

N/A

Diagnostics dump

N/A

[hacs-bot]

Thank you for opening an issue in the HACS.

Before proceeding, please verify the following:

Select the correct issue template:
HACS provides different templates for different types of bugs. Choosing the right template ensures you're asked the right questions and helps route your bug appropriately.

Complete the ENTIRE issue template:
Make sure you've read the issue guidelines and filled out every single field in the issue template, even if some fields seem unrelated to your specific situation.

Fill out everything, even if it seems unnecessary:
Don't skip fields because they "don't seem relevant" to your bug. The template asks for specific information because:

• Problems often have unexpected causes that surface through "unrelated" details
• What seems unrelated to you might be the key to solving your bug
• Incomplete information requires follow-up questions, delaying resolution
• The template is designed based on years of troubleshooting experience
• Missing information forces those helping to make assumptions, which can lead to wrong solutions

Issues with incomplete templates take significantly longer to resolve or may be closed without resolution.

If you're experiencing a similar bug:
If your bug is identical to an existing one, please:

• Add a 👍 reaction to the original issue description
• Subscribe to notifications on that issue to stay updated
• Do not add comments like "same here", "I have this too", or "+1"

Adding duplicate comments creates noise and makes it harder to track and resolve issues. Reactions help prioritize issues based on how many users are affected.

Getting help:
If you need assistance filling out the template or understanding your issue:

• Issue Guidelines - Detailed instructions for reporting issues
• HACS Discord - Community support and real-time help

What happens next:
Maintainers and community members will review your issue and may:

• Ask for additional information if the template is incomplete
• Provide a solution or workaround
• Label the issue appropriately for tracking
• Link it to related issues or pull requests

[ludeeus]

As Home Assistant manages the iframe it is loaded in, I would have expected the solution would be to adjust it there.
To confirm:

1. Does it look correct when you load the UIs of add-ons?
2. Does it look correct when you load a website with https://www.home-assistant.io/integrations/panel_custom/ with iframe: true

They should behave the same way as HACS.

[Big-Xan]

As Home Assistant manages the iframe it is loaded in, I would have expected the solution would be to adjust it there.
To confirm:

1. Does it look correct when you load the UIs of add-ons?
2. Does it look correct when you load a website with https://www.home-assistant.io/integrations/panel_custom/ with iframe: true

They should behave the same way as HACS.

I won't have an opportunity to test #2 until I'm home from work.

As far as #1, when I open the file editor, terminal & ssh (pic not included due to sensitive info), and esp home add-ons they display properly with edge-to-edge turned on.

Here's the initial bug report I opened on the IOS Companion app repo: home-assistant/iOS#4566

[bgoncal]

A bit of context from the iOS (and similar happening in Android) companion apps, we will soon display by default the web views from edge to edge, this means that any safe area consideration needed has to be handled by the content inside the webview. Most of the content is handled by Home Assistant frontend, but after checking @wendevlin it was determined that for HACS this is not in frontend control, so it needs to be handled by HACS itself.