element-call
element-call copied to clipboard
element-hq
Settings tabs are awkward
Steps to reproduce
On either your mobile or desktop join a call on https://call.element.dev/
Open the settings dialog box
Outcome
What did you expect?
Visually compelling and easily accessible menu options in the setting dialog
What happened instead?
On Desktop
There is a vertical scroll bar which hides the remaining options.
- Adds some amount of inconvenience to navigate to the remaining options that are out of view.
- Not easy to see which options are hidden out of view
- The horizontal scroll bar isn't very visually appealing / in-line with the gorgeous design everywhere else in the app
On Mobile through the EX app or on Safari
There is no indication that is a scroll bar and therefore options are hidden from users, in the menu of the settings.
It is also quite difficult to accurately swipe left and right to move the menu items, even if you do know that more options are there.
Operating system
Mac/Safari. iOS/Safari. iOS/ElementX
Browser information
No response
URL for webapp
call.element.dev
Will you send logs?
No
@fkwp @robintown resources depending - I think this is worth actioning in the coming weeks. If you agree, we could schedule some time to figure out the right solution together. Initial thoughts:
- Should we iterate on the tab implementation to strengthen it - we're using similar tabs in MAS and so on, so this could be fruitful
- Should we collapse into less tabs when viewing responsively
Thanks for opening this @wrjlewis!
Agree with all of it, just to add: if you enable dev tools, it gets worse, as it adds another option.
This is what it looks like on Firefox 117.01 of Fedora 38:
@nadonomy Agreed, this part of the UI is definitely one of the top candidates for updating next. For what it's worth, this style of tabbing isn't anything new: this is how settings have always looked on mobile prior to the Compound redesign, which is why I felt OK leaving it untouched for the first implementation pass.
Depending on my availability, I'll either jump straight to implementing the new settings designs as a whole, or start with the smaller step of swapping out the tabs component for the Compound one pictured here. From my understanding, this component is the same one you're referring to, and already has better affordances for when the list overflows and becomes scrollable?
Depending on my availability, I'll either jump straight to implementing the new settings designs as a whole, or start with the smaller step of swapping out the tabs component for the Compound one pictured here. From my understanding, this component is the same one you're referring to, and already has better affordances for when the list overflows and becomes scrollable?
I don't think we've got as far as implementing any mobile friendly overflows anywhere yet. We have designed some here, but we could do with pairing (design/engineering) on them as we implement.
I don't think we've got as far as implementing any mobile friendly overflows anywhere yet.
On this - @germain-gg @sandhose if you could correct me if I'm wrong that'd be great!
Relatedly, @dav-is I remember you were experimenting with some MUI components for ESS - which I think for licensing we wouldn't want to include in Compound Web/all projects. But, have you done any R&D here we could build on?
This is how we handle the mobile navigation in the Admin Console:
Desktop
Mobile
Animations
(In case it isn't obvious, when I am not pressing the > button, I am scrolling using my horizontal scroll wheel)
Screencast from 2023-09-20 11-27-17.webm
which I think for licensing we wouldn't want to include in Compound Web/all projects
It's MIT-licensed, so I'm not sure what you mean. I would say we probably shouldn't use MUI in compound due to added complexity.
It's MIT-licensed, so I'm not sure what you mean. I would say we probably shouldn't use MUI in compound due to added complexity.
Ah great. I remembered there was some gotcha. Thanks for clarifying.
2 glitches I saw on Firefox/macOS:
- The scrollbar is showing off like a star and takes all the place
- The focus on the list dropdown is clipped
