Camera tab is hidden on mobile layout

[kabukki]

Summary

On mobile devices, tabs are collapsed and only a few are displayed, along with a "..." button, as seen in this screenshot:

Users struggle finding the "camera" tab, which is actually hidden in the dropdown accessed by the aforementioned "..." button:

I was wondering whether this behaviour was normal and if not, what could be done to improve the accessibility of the camera tab, possibly displaying it along with the other providers.

Relevant information

Removing providers does not make the camera tab appear outside of the "..." menu, it is always hidden and needs 1 click to be accessible, making users think the option does not exist at first glance.

Environment (if relevant)

• uploadcare-widget: 3.8.3

Thank you!

[optlsnd]

Hi @kabukki, sorry for the radio silence! Unfortunately, there's no way to change the order of source icons in mobile view, but as a workaround, you can change the default order of tabs so that the camera tab comes first, and in this case, it will appear once a user has clicked the widget button. The order can be changed via the data-tabs option:

<input type="hidden" role="uploadcare-uploader" name="my_file" id="uploadcare-file" data-tabs="camera file facebook gdrive instagram box vk"/>

[kabukki]

Thanks, I've managed to use the camera source first, but I feel like the "back" or "menu" button is hidden behind the camera logo (the same behaviour happens with other sources), at first I thought I could not use another source 🤔 could it be fixed ?

[kabukki]

Any update on this menu issue ? Our users cannot find other ways to upload their files now... 😅

[optlsnd]

@kabukki I apologize for the delayed response! Normally, the icon should be displayed in the top-left corner of the dialog Did you add any custom CSS to style the uploader? If so, make sure there are no CSS rules that may affect the layout of the dialog window. If it's not the case, will you be able to share a link to the page with your uploader installation so that I can check it live?

[kabukki]

Hi ! There is no custom CSS that should impact the uploadcare component, and we are using the panel instead of the dialog, so maybe the behaviour is different ? Otherwise I'm thinking our widget is not up-to-date, but the changelog does not reveal anything major related to this issue.

Here is a link so you can see it live: https://debug.teester.com/casting/upload (you need to log in first, if you get a 404 on desktop, simply reload with mobile mode because the routes are different). The problem only happens in mobile view and when the viewport width is <= 759px.

[optlsnd]

Thank you! It looks like this CSS affects the layout. If it's removed, the hamburger menu icon is displayed properly at the top-left corner.

[kabukki]

Woah, this was quite hard to spot ! Thank you a lot for the quick and efficient response 😄