FR: Mobile Support

[tomerbs]

Are you planning to add different layouts for phone, tablet, big screen?
Currently the phone layout is problemtic.
Desktop view:

phone view:

HA core: 2023.12.4
Supervisor: 2023.12.0
Operating System: 11.2
Frontend: 20231208.2
Fusion Ver: 2023.12.7

[denveronly]

Safari on ios 15 just shows background

[Gerrett84]

Unfortunately, it is currently not possible to save changes made in the mobile browser.

[janiskelemen]

Hi @matt8707,
thanks for your work! I think I can take care of mobile compatibility. I have also just created a first PR to fix the modal vertical overflow issue.

[janiskelemen]

Hi @matt8707, would you consider adding a CSS framework like tailwindcss? This would make the styling way more maintainable eventually. Especially when it comes to viewports etc the styling sections will become a nightmare over time. Is there any reason you opted for vanilla css?

[matt8707]

initial mobile support
https://github.com/matt8707/ha-fusion/releases/tag/2023.12.7

[Gerrett84]

Thanks. But unfortunately saving is still not possible. :-)
Would it be possible for the sidebar to be displayed as a header in mobile mode?

[janiskelemen]

I had a PR to improve the responsiveness but I used tailwindcss which was not merged. I need to redo it with plain css to get it approved. I hope to find time within the next days.

[luixal]

Hi @matt8707, would you consider adding a CSS framework like tailwindcss? This would make the styling way more maintainable eventually. Especially when it comes to viewports etc the styling sections will become a nightmare over time. Is there any reason you opted for vanilla css?

I was supposing this was using tailwindcss already. That would make it much more easy to collaborate in the project.

[Gerrett84]

Fixed in 2024.1.4 👍🏻

[Tra1n84]

Hej,

first of all thank you very much for this great project and the great status it already has in a Pre-Beta phase.

I've noticed another problem when you're in mobile view and adding an Object in Edit mode. Whether via Browser or within the Home Assistant companian app. As it concerns the mobile view, i didn't want to create a new issue and post it here. I hope that is the correct approach.

In "normal" view you have the normal behavior of seeing the new Object with a dashed border:

In mobile view you do not see a new Object, but only a new gap (see red marking on the following screenshot). Means that the object next to it moves slightly to the right, but the new Object left of that is not visible:

Perhaps others also have this behavior?

Thanks for checking & Best regards
Thomas