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

Notification snackbar is below modals #52609

Closed
matiasbenedetto opened this issue Jul 13, 2023 · 6 comments
Closed

Notification snackbar is below modals #52609

matiasbenedetto opened this issue Jul 13, 2023 · 6 comments
Assignees
@vcanales @mikachan
Labels
[Type] Bug An existing feature does not function as intended

Comments

@matiasbenedetto
Copy link
Contributor

Description

If there is a modal open in the editor, the notification snack bar is below instead of on top of it.

Step-by-step reproduction instructions

  1. Open a full-page modal
  2. Do an action that raise a notification and see that it is below the modal

Screenshots, screen recording, code snippet

In the screencast we can see the problem in action:

2023-07-13.17-43-40.mp4

Environment info

  • WordPress 6.2.2
  • Gutenberg trunk

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes
@mikachan mikachan added the [Package] Components /packages/components label Jul 13, 2023
@priethor priethor added the [Type] Bug An existing feature does not function as intended label Jul 13, 2023
@priethor priethor added this to Polish Jul 13, 2023
@mikachan mikachan mentioned this issue Jul 17, 2023
Closed
16 tasks
@vcanales vcanales self-assigned this Jul 17, 2023
@vcanales
Copy link
Member

Snackbars do not currently support this behavior (ie. being on top of Modals and/or their overlays) because they are nested within the body of the site editor, while Modals live closer to the root of the element, as a direct child of <body>.

Changes to position and z-index won't put the Snackbar above the Modal due to CSS stacking context rules. Nested elements can't out-stack their ancestors, regardless of z-index. We need to adjust the DOM structure or stacking context, not just tweak position or z-index.

The first fix that comes to mind would be moving Snackbar notifications closer to <body>, but it doesn't look trivial, since their current implementation makes them rely on the component to be rendered.

@mikachan
Copy link
Member

mikachan commented Jul 18, 2023 •
edited
Loading

Could the modal be made smaller, so the Snackbar is visible (at least the furthest-to-the-bottom one)? Although this isn't ideal as it's still underneath the overlay. Maybe we could make the modal a similar size to the Preferences modal:

image

Another alternative could be to replicate the notifications in another component within the modal and disable the current Snackbar notifications, as it would probably be confusing to have multiple sets of notifications.

@mirka mirka removed the [Package] Components /packages/components label Jul 18, 2023
@annezazu annezazu moved this to Needs design in Polish Jul 25, 2023
@annezazu annezazu added the Needs Design Feedback Needs general design feedback. label Jul 25, 2023
@hanneslsm
Copy link

Maybe we could make the modal a similar size to the Preferences modal:

The Preference modal also overlays the notifications on smaller viewports.
Image

@mikachan
Copy link
Member

Ah good spot! I think this definitely needs a fix then, maybe something within the modal itself.

@mikachan mikachan self-assigned this Aug 17, 2023
@madhusudhand
Copy link
Member

madhusudhand commented Aug 23, 2023 •
edited
Loading

Currently I see that snackbar and modal are under different DOM hierarchy. (snackbar is within the editor, where as modal is attached to the body). This is causing snack-bar to always be behind the modal.

I think the right way for the snackbar is to attach it to body and give a higher z-index than modal.

I did a small test around this and it seems to be working. (I haven't tested full use cases of snackbar, but it should't break things)

Wraped the snackbar component inside createPortal function

return createPortal(<></>, document.body)

This moved the snack-bar to body in the DOM, and now that it is in the same level as modal, setting a higher z-index brings it on top of modal.

Note: I have set few additional styles inline to adjust the position.

image

@matiasbenedetto matiasbenedetto mentioned this issue Aug 31, 2023
Merged
3 tasks
@mikachan mikachan mentioned this issue Sep 4, 2023
Closed
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Sep 4, 2023
@mikachan mikachan moved this from Needs design to Needs review in Polish Sep 4, 2023
@mikachan
Copy link
Member

I'm going to close this, as I don't think it's a good idea to move the snackbars above the modals. This was also raised as part of the Font Library work, which should not be using the snackbar notifications anyway.

@github-project-automation github-project-automation bot moved this from Needs review to Done in Polish Sep 11, 2023
@mikachan mikachan removed [Status] In Progress Tracking issues with work in progress Needs Design Feedback Needs general design feedback. labels Sep 11, 2023
@matiasbenedetto matiasbenedetto mentioned this issue May 23, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@vcanales vcanales

@mikachan mikachan

Labels
[Type] Bug An existing feature does not function as intended
Projects
Polish
Status: Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Snackbar: re-position snackbar above modals WordPress/gutenberg
8 participants
@mirka @vcanales @matiasbenedetto @mikachan @madhusudhand @hanneslsm @annezazu @priethor