search

bluesky-social / social-app

The Bluesky Social application for Web, iOS, and Android
https://bsky.app
MIT License
12.98k stars 1.66k forks source link

Bluesky website has a left offset on the entire page on desktop browsers #6733

Open xPaw opened 2 days ago

xPaw commented 2 days ago

Steps to Reproduce

  1. Open the app
  2. Resize window so it uses mobile layout
  3. Observe an offset on the left

This offset also exists on the desktop view. I can reproduce this on both Firefox and Chrome.

If do html { overflow:hidden }, then this margin also exists on the right side. Seems like it's trying to apply some kind of centering for visible scrollbar, but this isn't good when trying to use small browser window.

Seems to be fixed when adding html { scrollbar-gutter: stable; }, but I don't really understand why.

Attachments

20241125-Uag5IH25

What platform(s) does this occur on?

Web (Desktop)

Device Info

Windows 11

What version of the app are you using?

Build version: 1.94.0; Bundle info: 3c30bb1 (prod); Bundle date: 24111623; Platform: web; Platform version: undefined

Additional Information

No response

CentaurWorks commented 2 days ago

Can confirm I am having the same issue https://github.com/user-attachments/assets/122e07d4-4005-4194-88f9-0ee2bcd97e91

Windows 10, Opera GX, using an ASUS ProArt Portable Monitor vertically

amhyder commented 1 day ago

I believe this is an effort to make centering of content more straightforward. Since we have a persistent scrollbar on the right side, the extra space on the left ends up putting the middle content in the center of the screen. This also causes some jumping around of elements when opening modals on web. For example, if you open the post composer to make a new post you can see the sidebars jump left and right slightly as a result of these scroll bars rendering in and out.