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

Fix undo toast rendering #582

Merged
merged 1 commit into from
May 12, 2022
Merged

Fix undo toast rendering #582

merged 1 commit into from
May 12, 2022

Conversation

artonge
Copy link
Contributor

@artonge artonge commented May 12, 2022

When a long text is provided for the undo toast, the text gets mixed with the button. It was fine for the close button, as padding-right: 34px; was just right for it.

This PR moves to flex layout to make the toast more responsive.

  • Add display: flex to the toast and to the undo button container.
  • Remove the position: absolute for the close and undo buttons, so they get placed by the flex algo.
  • Add some margin-left to the undo button because it was too close to the text.
  • Change the padding to 6px 12px as 12px top and bottom is too much when the close and undo button are not placed absolutely.

⚠️ The toast.scss is loaded multiple time, so we will have to wait until all @nextcloud/ packages and apps update to the latest version to see some improvements without !important.

Before After
Screenshot from 2022-05-12 14-33-25 Screenshot from 2022-05-12 14-39-08

Fixes nextcloud/mail#6364

@artonge artonge added the bug Something isn't working label May 12, 2022
@artonge artonge self-assigned this May 12, 2022
@artonge artonge requested review from skjnldsv, juliushaertl and GretaD and removed request for skjnldsv May 12, 2022 12:42
When a long text is provided for the undo toast, the text gets mixed with the button. It was fiine for the close button as 'padding-right: 34px;' was just right for it.

This PR moves to flex layout to make the toast more responsive.

+ Add 'display: flex' to the toast and to the undo button container
+ Remove the 'position: absolute' for the close and undo buttons so they get placed by the flex algo
+ add some margin-right to the undo button because it was to close of the text
+ Change the padding to '0px 12px' as 12px top and bottom is too much when the close and undo button are not placed absolutely

Signed-off-by: Louis Chemineau <louis@chmn.me>
@GretaD GretaD merged commit 2ad2e82 into master May 12, 2022
@delete-merged-branch delete-merged-branch bot deleted the fix/toast_rendering branch May 12, 2022 12:59
@GretaD
Copy link
Contributor

GretaD commented May 12, 2022

this fixes the undo when you delete a comment on files too

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

"Undo" message doesn't resize if text is longer
2 participants