Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: improve app-wide scroll behavior #96

Merged
merged 9 commits into from
Nov 13, 2023
Merged

fix: improve app-wide scroll behavior #96

merged 9 commits into from
Nov 13, 2023

Conversation

elcharitas
Copy link
Member

@elcharitas elcharitas commented Nov 10, 2023 •
edited
Loading

This PR improves the scrollbar we use generally and substitute perfect scrollbar with a custom tailwind scrollbar.

This PR ensures there's partial compatibility with react perfect scrollbar API and the look and feel shouldn't differ much either.

To test, check the scroll behaviour of any of the following:

  • News, Daos, Forum, Blog
  • Widget Library
  • Boards Library
  • TVL

@elcharitas elcharitas mentioned this pull request Nov 13, 2023
Merged
@elcharitas elcharitas marked this pull request as ready for review November 13, 2023 06:10
@elcharitas elcharitas changed the title fix: improve scroll behavior in widget library fix: improve app-wide scroll behavior Nov 13, 2023
Xavier-Charles
Xavier-Charles approved these changes Nov 13, 2023
View reviewed changes
Copy link
Contributor

@Xavier-Charles Xavier-Charles left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When you hover on scrollable containers you see that sometimes the children would shift because the scrollbar is now visible. This is because the scrollbar takes up space. This shouldn't be, scrollbars should not be positioned relatively.

Apart form these issues. It looks pretty good.

packages/ui-kit/src/components/moduleLoader/ModuleLoader.tsx Outdated Show resolved Hide resolved
v-almonacid
v-almonacid reviewed Nov 13, 2023
View reviewed changes
Copy link
Contributor

@v-almonacid v-almonacid left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great that we are using a tailwind component. But currently the scroll not working on multiple widgets: tvl, podcasts, video, etc.

packages/frontend/src/components/calendar/CalendarList.tsx Show resolved Hide resolved
@elcharitas
Copy link
Member Author

Great that we are using a tailwind component. But currently the scroll not working on multiple widgets: tvl, podcasts, video, etc.

Should be resolved now

@v-almonacid
Copy link
Contributor

Great that we are using a tailwind component. But currently the scroll not working on multiple widgets: tvl, podcasts, video, etc.

Should be resolved now

Getting there!

Another issue I noticed that doesn't happen in epsilon is that the last elements in the widget library are cut, and also the background color of the category container on the left should cover the whole height:

image

v-almonacid
v-almonacid approved these changes Nov 13, 2023
View reviewed changes
Copy link
Contributor

@v-almonacid v-almonacid left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great, thanks @elcharitas 🙏

@elcharitas elcharitas merged commit b0d0917 into dev Nov 13, 2023
@elcharitas elcharitas deleted the ALPHA-4076-widget-library-infinite-scroll branch November 13, 2023 18:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Xavier-Charles Xavier-Charles Xavier-Charles approved these changes

@v-almonacid v-almonacid v-almonacid approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@elcharitas @v-almonacid @Xavier-Charles