The header is broken on mobile in Claro and Gin

Created on 18 January 2023, over 1 year ago
Updated 24 January 2023, over 1 year ago

Problem/Motivation

I've accessed a model page in Claro on an iPhone SE. i am well aware that it is highly unlikely that someone will ever use or edit or create models on a mobile phone with the limited screen real estate. but there are still the odds that someone is on the road and quickly needs to adjust something - that MIGHT happen. so the problem i've noticed when accessing a model in ddev via ngrok on my iphone. the header is simply broken:

at first i thought it might be due to the adoption of the save and cancel pattern from gin. but it is the same in gin:

Steps to reproduce

would be interesting if the header is broken in a similar way on any android based smartphone?

Proposed resolution

in regards of claro i am still reluctant and not a fan of breaking an interface pattern by adopting the position of the save and cancel button pattern used in gin. consistency is important. for claro moving the buttons back to their initial position might fix the problem already.

in regards of gin i am not sure if that problem happens on other admin pages as well? but possibly best in that regard would be to open an issue upstream in the gin issue queue? and in case the gin pattern should be kept for claro fixing the issue upstream it would also solve the issue in claro as well. then only the changes made for gin would have to be backported to claro.

Remaining tasks

User interface changes

API changes

Data model changes

📌 Task
Status

Active

Version

1.1

Component

User interface

Created by

🇩🇪Germany rkoller Nürnberg, Germany

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇩🇪Germany jurgenhaas Gottmadingen

    Changing this to task. Also suggesting that we focus on mobile display here and remove the topic of button positions in Claro as this is something not mobile related.

    As for mobile, it really seems an edge case and most likely not usable there at all. But we need to take some action to at least not provide a broken interface if somebody were to open it still on a mobile phone.

    There should be one of these options being followed:

    • Either replace the canvas on mobile with a message, that this is not supported.
    • Or spend much more effort in making it mobile usable'ish. That would require to make the canvas full screen, removing ALL other components (header, menu, breadcrumbs, etc) and move all required components (item panel, property panel, buttons) into a collapsible container.

    I can imagine that the mobile support in option 2 may actually look and feel pretty nice. Just wondering if it's really required.

Production build 0.71.5 2024