Responsive mobile design implementation

[Row-Bear]

What version are you using?

Live version at 2024-07-09 20:35UTC

What did you do?

Visit Laboratory using mobile browsers (Firefox and Opera)

What did you expect to see?

All parts of the webpage visible, either through panning or scaled/formatted to fit

What did you see instead?

Parts of the site that are off screen can not be seen/accessed.

The view won't pan further right than shown in the screenshot.
The horizontal menu on top does not pan at all.
Setting the browser to desktop view resolves this.

Edit: I just saw that it wasn't supposed to be published yet, sorry if I was premature in raising this!

[quietbits]

Thanks for submitting this issue, @Row-Bear ! We'll fix this before the official launch. 😉

[janewang]

@Row-Bear Please visit the new Stellar Lab (https://beta-laboratory.stellar.org/) and report any bugs at our GitHub Issues page (https://github.com/stellar/laboratory/issues). Happy testing! 💖 Thank you for your support! 🫶

[jeesunikim]

similar report from tyler to make it usable on mobile

Again we don’t need a special design. Just don’t force the window to not allow overscroll and place a min width and height

[janewang]

Mobile design from @charles-sdf is linked here: https://www.figma.com/design/yuikaFOPmJifyAfS90ER6T/Laboratory?node-id=3876-19860&m=dev

[sdfcharles]

updated design link: https://www.figma.com/design/yuikaFOPmJifyAfS90ER6T/Laboratory?node-id=4952-64229&t=KjF3TKPokUfDfG62-1