fix: Poker scope phase: Styling issue in header

[gitstart]

Description

Fixes/Partially Fixes #6828 [Please include a summary of the changes and the related issue]

Demo

Loom video 1 Loom video 2 Loom video 3

Testing scenarios

[Please list all the testing scenarios a reviewer has to check before approving the PR]

• [x] Scenario A

  • Step 1
  • Step 2...

• [x] Scenario B

  • Step 1
  • Step 2....

Final checklist

• [x] I checked the code review guidelines
• [x] I have added Metrics Representative as reviewer(s) if my PR invovles metrics/data/analytics related changes
• [x] I have performed a self-review of my code, the same way I'd do it for any other team member
• [x] I have tested all cases I listed in the testing scenarios and I haven't found any issues or regressions
• [x] Whenever I took a non-obvious choice I added a comment explaining why I did it this way
• [x] I added the label One Review Required if the PR introduces only minor changes, does not contain any architectural changes or does not introduce any new patterns and I think one review is sufficient'
• [x] PR title is human readable and could be used in changelog

[gitstart]

@igorlesnenko this PR is ready for review

[gitstart]

@Dschoordsch I have fixed the header issues on mobile. I attached a demo loom video too.

[gitstart]

Hi @Dschoordsch, your comments have been addressed and appended another loom video for reference.

[gitstart]

Thanks for your update and the videos. It looks better now. I still see a usability problem on mobile (e.g. iphone 11 resolution): It looks like there are only 3 tabs and there is no indication that the tab bar could be scrolled Best way to ensure the user sees that there is more content available would be to ensure that the next element is partially visible. For the new meeting dialog we use a separate component which has a setting for this case

https://github.com/ParabolInc/parabol/blob/3fb122180dfe5d49ff16f67f22fba410d1bc5134/packages/client/components/NewMeetingCarousel.tsx#L138-L159

I'm not sure how well it would work with a variable number of visible elements though, but it gives you some place to start. If you can solve this issue without changing the component, that would also be fine.

The suggested implementation wasn't possible, since this component does use swiper-react but enforced the scroll-bar visibility on small sized screens.

[sonarcloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[gitstart]

Looks good when testing with Chrome. On Firefox the scrollbar is not visible.

Hi @Dschoordsch, spent some time investigating this issue though to no success yet, only made some clean ups to the code but the functionality still as previous, issue is scrollbar only shows up during the scroll effect on Mozilla. you can further advice if this can stand or closed thanks.