search

open-sauced / app

🍕 Insights into your entire open source ecosystem.
https://pizza.new
Apache License 2.0
413 stars 219 forks source link

Bug: Workspace sidebar on small screen doesn't cover the height of the screen #2834

Closed adiati98 closed 6 months ago

adiati98 commented 6 months ago

Describe the bug

On mobile phone, when the sidebar is open:

Additional Info

I'm using Samsung Galaxy S22, Android 14

Screen Recording

https://github.com/open-sauced/app/assets/45172775/09ac25c5-5981-442d-bcab-8a764c09491a

Screenshots

Screenshot_20240229_234141_DuckDuckGo

Steps to reproduce

On a browser on mobile phone, sign in to OpenSauced. Then:

  1. Go to "Your Workspace".
  2. Open the sidebar.
  3. You will see that the last three tabs are outside the background, the "+" icon slightly outside the background, and the arrow open/close button is on the edge of sidebar.

Browsers

Chrome

Additional context (Is this in dev or production?)

production

Code of Conduct

Contributing Docs

github-actions[bot] commented 6 months ago

Thanks for the issue, our team will look into it as soon as possible! If you would like to work on this issue, please wait for us to decide if it's ready. The issue will be ready to work on once we remove the "needs triage" label.

To claim an issue that does not have the "needs triage" label, please leave a comment that says ".take". If you have any questions, please reach out to us on Discord or follow up on the issue itself.

For full info on how to contribute, please check out our contributors guide.

nickytonline commented 6 months ago

Thanks for reporting @adiati98! I will take a peek at this tomorrow. Are you on Android by chance? Only asking as I tested it on my iPhone and it seemed fine for the height. I may need to use dvh units instead of vh though because of the browser dynamic viewport height. I think the other issues are due to content spilling out. I noticed this during the livestream with @BekahHW today.

adiati98 commented 6 months ago

@nickytonline yes, I'm on Android 14. I mentioned it also in my issues on additional info after the description 😊

nickytonline commented 6 months ago

2847 fixes the height issue, but I imagine the other issues you mentioned remain @adiati98? My guess is we need to truncate the text of insights.

adiati98 commented 6 months ago

I'm not on my computer anymore. As I don't have long names of pages, everything looks great.

But let me create a page with a longer name tomorrow, and I'll let you know, @nickytonline! 😊

adiati98 commented 6 months ago

@nickytonline I'm not sure what's going on here. The height worked perfectly on the deploy preview.

But on production, I still see the same problem. Please see the screenshot and screen recording below.

https://github.com/open-sauced/app/assets/45172775/42bbca0a-090b-4df6-9142-06b53694752d

Screenshot_20240302_151516_DuckDuckGo

nickytonline commented 6 months ago

It's not in production yet.😅 If you go to beta, you'll see it working as expected.

adiati98 commented 6 months ago

Ah, okay! Sorry, I keep forgetting that it'll be released every Tuesdays and Thursdays 😅

adiati98 commented 6 months ago

@nickytonline I created a new contributor insight with a long name, right on the deploy preview. Below are the screenshots:

  1. In the state of closed sidebar, you can see the close arrow, "+" sign, and part of long name in the blue boxes. The name of the insight page is cut off (in the green box). I see this behaviour on desktop size, too. I think truncating the name or making the font size smaller for smaller screen would be nicer.

    Screenshot_20240302_200648_DuckDuckGo

  2. In the state of sidebar open, the name of the page is out of the background, as well as the arrow icon and the "+" sign (shown in the red boxes). I think this is the same behaviour as on desktop.

    Screenshot_20240302_200700_DuckDuckGo

  3. This is out of the scope of what I reported. When I created a new contributor insight page on my mobile phone, I can scroll the page horizontally because the of the long name. And there are double footers in this page, which I think I saw an issue for it.

https://github.com/open-sauced/app/assets/45172775/d51b28c6-f5e1-42e9-902b-cb53c61ab8bb

nickytonline commented 6 months ago

I'm not sure which issue @zeucapua fixed the truncation issue, but the heigh issue was already sorted out in #2847

adiati98 commented 5 months ago

@nickytonline, as you've mentioned, this should've been fixed in #2847.

But I opened the app on mobile just now, and it's somehow not sorted out yet.

I'm on mobile, so I don't know if this is fixed on beta already. I haven't checked there. If so, please ignore this comment. 😅

https://github.com/open-sauced/app/assets/45172775/49a9a6be-0075-4a88-a052-25711f57266f

nickytonline commented 5 months ago

@nickytonline, as you've mentioned, this should've been fixed in #2847.

But I opened the app on mobile just now, and it's somehow not sorted out yet.

I'm on mobile, so I don't know if this is fixed on beta already. I haven't checked there. If so, please ignore this comment. 😅

Screen_Recording_20240326_043559_DuckDuckGo.mp4

Hmmm, maybe that's only on Android because it definitely works on iOS. I'll need to look into this.