zubhub icon indicating copy to clipboard operation
zubhub copied to clipboard
verified publisher icon unstructuredstudio

Unwanted horizontal scrollbar on the landing page

Open khallow7 opened this issue 2 years ago • 14 comments

Issue Whenever I land on the homepage there's this horizontal scrollbar that has no real function. Checked on Edge, Chrome, Brave, Vivaldi

To Reproduce Go to https://zubhub.unstructured.studio/

  1. Go to (https://zubhub.unstructured.studio/)
  2. See error horizontal scrollbar down below.

Expected behaviour There shouldn't be any horizontal scrollbar.

Screenshots

https://github.com/unstructuredstudio/zubhub/assets/107268558/e4f6c242-3c32-40e3-bf9b-b3c5c573a771

khallow7 avatar Oct 03 '23 08:10 khallow7

Hello @khallow7, let me fix this.

Dagmawi-22 avatar Oct 03 '23 08:10 Dagmawi-22

@Dagmawi-22 You should tag the mentors and ask them to assign this to you.

khallow7 avatar Oct 03 '23 08:10 khallow7

Hello @srish, Can I work on this?

Dagmawi-22 avatar Oct 03 '23 08:10 Dagmawi-22

Hi @srish Can this be assigned to me? Thanks

Temidayo32 avatar Oct 03 '23 10:10 Temidayo32

Hi @srish @khallow7 good day, please can this be assigned to me. Thank you.

Shulamite54 avatar Oct 03 '23 10:10 Shulamite54

Kindly avoid submitting small UX issues like this, as they are currently part of our larger UX improvement plans. Addressing these minor concerns separately may result in further inconsistencies.

srish avatar Oct 03 '23 22:10 srish

My bad! I just realized after talking with @tuxology today that this is an important and valid issue and it is causing a lot of other UX issues.

srish avatar Oct 17 '23 01:10 srish

Hey @khallow7, I visited the link both in my laptop and monitor but could not reproduce the issue. Can you check if the scrollbar is also seen in other pages, like login, profile, or projects. The issue may be about something's width set to 100vw, maybe you can try to comment out some of them to see if the scrollbar remains.

In my machine, zooming the screen by 175% makes the image to be wider than the rest: Screenshot 2023-10-17 at 13 55 59

I also noticed that in your recording, the header section looks wider than what's below: Screenshot 2023-10-17 at 14 00 46

Perhaps we can check header styles.

brrkrmn avatar Oct 17 '23 11:10 brrkrmn

@brrkrmn I can reproduce it on two machines. I think issue is with hero element we've used (in hero as well as carousel). It shows 100% width. But looks like its overflowing horizontally. Unable to really pinpoint where the issue is 😅

tuxology avatar Oct 18 '23 02:10 tuxology

@tuxology Okay now I can reproduce it as well, turns out it's about the settings of my pc. Going to look into it now 🚀

brrkrmn avatar Oct 18 '23 03:10 brrkrmn

@tuxology, #921 fixes this bug. The reason was indeed 100vw. Now the scrollbar is not visible 😃

brrkrmn avatar Oct 18 '23 14:10 brrkrmn

The recent merge didn't fix so reverted this. 100% width also introduced another issue on mobile width where it was shorter than 100% (possibly because its container was shorter). Need to fix other underlying issues. The other hero element (carousel) also has extra width.

tuxology avatar Oct 20 '23 23:10 tuxology

@tuxology looking into it now 👍🏻

brrkrmn avatar Oct 22 '23 08:10 brrkrmn

@tuxology changing the width: '100vw' of heroMainSectionStyle and heroSectionStyle into percentages works well until the screen width is below 960, that's when the padding set to root comes in. As far as I could see, that padding does not change anything on the screen both on mobile and large screens. So, removing that in addition to two 100vw solves the problem

you can see the before and after shots for mobile version here

Here is the recording of the final version without the scrollbar:

https://github.com/unstructuredstudio/zubhub/assets/92817363/dee73b65-10b8-4dda-830d-b6f851e9f6f5

brrkrmn avatar Oct 24 '23 07:10 brrkrmn