UI doesn't fit on narrow screens.

[sevonj]

Describe the bug My phone reports its screen width as 360 px. Photon does not like screens this narrow.

• [x] Post meta wraps #347
• [x] Post badges overflow
• [x] The dock overflows.
• [x] Thin embed thumbnails (or leave as is?) #360
• [x] Something in the UI is too wide for 360 px. #365

To Reproduce (if applicable) Steps to reproduce the behavior:

• Open responsive design view in firefox (ctrl+shift+m) and set width.

Expected behavior -

Screenshots

Versions

• Browser: Firefox
• Photon version: 1.30.3 (main)
  • check in the bottom of the main menu.

[Xyphyn]

View select box is supposed to not be visible on mobile, and the posts seem to be displaying correctly.

I'll fix the navbar though.

[sevonj]

View select box is supposed to not be visible on mobile

Oh.

Should've been more specic for the posts. Meta wraps around like this. I didn't catch it while browsing for examples now, but it looks real janky when it wraps more than the screenshots, in multiple places at the same time.

(And this place again)

A small thing, embed thumbnails can get even thinner than this.

[Xyphyn]

I'm not sure how I'd wrap this. Maybe I could just hide the instance url at small enough sizes.

[sevonj]

Overflow ellipsis for both user and community?

[sevonj]

I enabled some badges.

[Xyphyn]

Uh oh. I'll get on this soon

[sevonj]

So, I think this can be fixed with two changes that are probably annoying to build.

• Make meta not wrap and use overflow-ellipsis for user & community. https://github.com/sevonj/photon/tree/meta-ellipsis-draft

• Move badges div below if screen width is small. And maybe the badges smaller there, too.

[Xyphyn]

CSS flexbox's default overflow rules are stupid as fuck, why do the most random things shrink except the ones i explicitly tell to shrink???? mix that with css grid and my layout is a living hell now

[sevonj]

CSS flexbox's default overflow rules are stupid as fuck, why do the most random things shrink except the ones i explicitly tell to shrink???? mix that with css grid and my layout is a living hell now

I know, right

I see the dock overflow is fixed. Is the menu button supposed to shrink?

Meta is janky but at least it doesn't overflow.

I'll check these two boxes.

Edit: for embed thumbnails, how about a vertical layout?

[Xyphyn]

All tasks completed, reopen this issue if there's anything more needed to be done.

[sevonj]

All tasks completed, reopen this issue if there's anything more needed to be done.

Well it happened rather soon.