Mobile Layout Issues

[brianjz]

Just checking if anyone else is having issues with the layout in mobile using the default themes. It's been happening since the big update even though I couldn't find anything specific change to this area of the css, but maybe I missed it.

My image and tools area is too wide, so buttons and generation details are cut-off. The bad thing is, I can't scroll horizontally, so I can't even get to them without flipping the phone every time.

I've tried resetting everything (config, ui-config, browser cache) but nothing. It happens with all of the supported themes.

You can see it here: https://imgur.com/a/ILDiE8w

[eadnams22]

Maybe related: Even on small viewports (~1024x768 viewport like an iPad Pro), I noticed in img2img, it can’t fit the generated image beside the interface, have to scroll to the bottom.

That said, this should probably be in the issues area, not discussion.

[vladmandic]

I would welcome PRs that optimize CSS style for mobile.

[brianjz]

So, just removing the !important modifier on line 28 of javascript/sdnext.css fixes the mobile issues. I'm also not seeing anything weird on desktop view. Can anyone else make this change and look around to see if it affects anything else since it's such a generic gradio selector?

.gradio-column { min-width: unset }

[vladmandic]

i've made that change in dev branch if you want to take a look.