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: Calendar card "..." action menu overlapping behind adjacent cards #3486

Merged
merged 2 commits into from
Aug 3, 2022

Conversation

Pinjasaur
Copy link
Contributor

Summary

This PR unsets some z-index values that Full Calendar sets to prevent the "..." action menu from being overlapped by adjacent events in Calendar view.

I went through a couple iterations to get to this solution, but it ended up being the last "hacky" (subjectively) even though it is overriding CSS from a vendored dependency. For some context, other "solutions" I tried:

  1. Reverse the event render order in Full Calendar and then use flexbox to reverse it. This didn't work with multi-day events along with the "show more" calendar widget.
  2. Use a SCSS @for loop to set descending :nth-child z-index values e.g. https://stackoverflow.com/a/36609688

Before:

image

After:

image

Ticket Link

closes #3425

@Pinjasaur Pinjasaur added 1: UX Review Requires review by ux 2: Dev Review Requires review by a core committer CherryPick/Approved Meant for the quality or patch release tracked in the milestone labels Jul 29, 2022
@Pinjasaur Pinjasaur added this to the v7.2 milestone Jul 29, 2022
@Pinjasaur Pinjasaur changed the title fix: reverse calendar event CSS stacking contexts fix: Calendar card "..." action menu overlapping behind adjacent cards Jul 29, 2022
@asaadmahmood
Copy link
Contributor

@Pinjasaur Wouldn't a better solution be just to add a class to the card who's menu is open, and then just increase the z-index on it?

I think we can then also use that functionality to make sure that the menu remains even if you hover outside of that card, and only remove that class on a blur event or on a click outside.

@Pinjasaur
Copy link
Contributor Author

Pinjasaur commented Aug 3, 2022

@Pinjasaur Wouldn't a better solution be just to add a class to the card who's menu is open, and then just increase the z-index on it?

I think we can then also use that functionality to make sure that the menu remains even if you hover outside of that card, and only remove that class on a blur event or on a click outside.

@asaadmahmood We don't have a lot of control over how the Calendar view is rendered since it's mostly done by the Full Calendar library component. I went the unset route for the existing z-index values because—from how I understand it—when they were set a CSS stacking context was being created so the adjacent elements would naturally stack over the preceding siblings.

I think your idea is worth exploring, but perhaps as part of #1007 since it might also solve that same issue that bug is tracking. Let me know your thoughts—we're looking to get this for 7.2 or otherwise revert the functionality of the "..." menu (on Calendar view cards) for the release since it's broken as-is. #3425 (comment)

Copy link
Contributor

@asaadmahmood asaadmahmood left a comment

Choose a reason for hiding this comment

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

LGTM for now.

@Pinjasaur Pinjasaur added 3: Reviews Complete All reviewers have approved the pull request and removed 1: UX Review Requires review by ux 2: Dev Review Requires review by a core committer labels Aug 3, 2022
@Pinjasaur Pinjasaur merged commit d653047 into main Aug 3, 2022
@Pinjasaur Pinjasaur deleted the gh-3425-cal-view-options-menu branch August 3, 2022 19:57
@mattermod
Copy link
Contributor

Cherry pick is scheduled.

mattermost-build pushed a commit to mattermost-build/focalboard that referenced this pull request Aug 3, 2022
@mattermod mattermod added CherryPick/Done Successfully cherry-picked to the quality or patch release tracked in the milestone and removed CherryPick/Approved Meant for the quality or patch release tracked in the milestone labels Aug 3, 2022
sbishel pushed a commit that referenced this pull request Aug 3, 2022
#3486) (#3533)

(cherry picked from commit d653047)

Co-authored-by: Paul Esch-Laurent <paul.esch-laurent@mattermost.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
3: Reviews Complete All reviewers have approved the pull request CherryPick/Done Successfully cherry-picked to the quality or patch release tracked in the milestone
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Bug: Calendar View - "More Options" modal displays behind tasks
5 participants