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.

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

Restore page bottom margin #7388

Merged
merged 1 commit into from
Jan 5, 2022
Merged

Restore page bottom margin #7388

merged 1 commit into from
Jan 5, 2022

Conversation

gtsiolis
Copy link
Contributor

@gtsiolis gtsiolis commented Dec 29, 2021

Description

Following the changes in #7065, this will 🅰️ revert the change from #4417 and 🅱️ add some extra margin at the bottom of each page provides better UX when navigating long lists or large sections that reach the bottom of the viewport when scrolling to the end of the lists or sections.

Related Issue(s)

Fixes #4634

Screenshots

BEFORE AFTER
Screenshot 2021-12-30 at 12 00 02 AM (2) Screenshot 2021-12-30 at 12 01 15 AM (2)
Screenshot 2021-12-29 at 11 59 52 PM (2) Screenshot 2021-12-30 at 12 34 29 AM (2)

How to test

Try opening a few workspaces so that that list of worksspaces reaches the bottom of the viewport or going to user preferences on a viewport with a small height. Then, scroll down to the bottom of the page. Notice how this PR introduces some extra white space at the bottom of the page and lists or sections do not seem attached to the bottom of the viewport.

Release Notes

Restore page bottom margin

@roboquat roboquat added release-note team: webapp Issue belongs to the WebApp team size/XS labels Dec 29, 2021
Copy link
Contributor Author

@gtsiolis gtsiolis left a comment

Choose a reason for hiding this comment

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

@jankeromnes could you take a look at this small change when you are back?

@@ -167,7 +167,7 @@ export default function () {
</div>
<button onClick={showStartWSModal} className="ml-2">New Workspace</button>
</div>
<ItemsList className="app-container">
<ItemsList className="app-container pb-40">
Copy link
Contributor Author

Choose a reason for hiding this comment

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

thought: Not sure why this didn't work with margin but using padding here does the trick.

Copy link
Contributor

@jankeromnes jankeromnes left a comment

Choose a reason for hiding this comment

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

Looks good, and works as advertised! Much better this way 😌 ✨

/approve

@roboquat
Copy link
Contributor

roboquat commented Jan 5, 2022

LGTM label has been added.

Git tree hash: a0af3d01bd2975b942ae28676a67c4be53d04d10

@roboquat
Copy link
Contributor

roboquat commented Jan 5, 2022

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: jankeromnes

Associated issue: #4634

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@roboquat roboquat merged commit ab20d1b into main Jan 5, 2022
@roboquat roboquat deleted the gt/restore-page/bottom-margin branch January 5, 2022 09:56
@gtsiolis
Copy link
Contributor Author

gtsiolis commented Jan 5, 2022

Thanks, @jankeromnes! 🐈

@roboquat roboquat added deployed: webapp Meta team change is running in production deployed Change is completely running in production labels Jan 6, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
approved component: dashboard deployed: webapp Meta team change is running in production deployed Change is completely running in production release-note size/XS team: webapp Issue belongs to the WebApp team user experience
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Restore some of the bottom margin on dashboard pages
3 participants