parabol
parabol copied to clipboard
fix: Poker scope phase: Styling issue in header
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
@igorlesnenko this PR is ready for review
@Dschoordsch I have fixed the header issues on mobile. I attached a demo loom video too.
Hi @Dschoordsch, your comments have been addressed and appended another loom video for reference.
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.
Kudos, SonarCloud Quality Gate passed!
0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells
No Coverage information
0.0% Duplication
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.