[ENG-4091] Linked Projects Modal Close Button

[chth0n1x]

• Ticket: https://openscience.atlassian.net/browse/ENG-4091
• GitHub branch: linked-projects-modal-close

Purpose

The purpose of these changes is to make the header 'x' close button and the footer 'Close' button both display on the OsfDialog modal when turning mobile view horizontally.

Summary of Changes

• Max height on the modal 'Main' local class was updated
• Max height on the modal 'Dialog' local class was updated

Screenshot(s)

Side Effects

There should be no side effects from these changes.

QA Notes

-Does the modal properly display in mobile view when rotated horizontally?
-Does the modal still display properly in desktop and tablet view?
-Are you able to click both the 'x' close and the 'Close' button within the modal when rotated?
-Are there any views that have been otherwise affected by these changes?

[coveralls]

Pull Request Test Coverage Report for Build 6482853446

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 71.232%

---

Totals
Change from base Build 6475148433:	0.0%
Covered Lines:	5943
Relevant Lines:	8129

---

💛 - Coveralls

[adlius]

Were you able to replicate the problem in the ticket? I can't seem to replicate the same issue as described in the ticket. However it seems that the dialog header is not visible in horizontal mode. If this is the problem that you're trying to fix, I think special-casing for smaller screen sizes is perhaps not the way to go, especially when the problem persists for wider screens of similar heights.

[chth0n1x]

Were you able to replicate the problem in the ticket? I can't seem to replicate the same issue as described in the ticket. However it seems that the dialog header is not visible in horizontal mode. If this is the problem that you're trying to fix, I think special-casing for smaller screen sizes is perhaps not the way to go, especially when the problem persists for wider screens of similar heights.

Hi @adlius, the max-height has been adjusted to accommodate the screen size. I am not sure what code you looked at, but it had not been placed in review. Please take a look now that the PR is ready and let me know if you have any questions.

[chth0n1x]

Were you able to replicate the problem in the ticket? I can't seem to replicate the same issue as described in the ticket. However it seems that the dialog header is not visible in horizontal mode. If this is the problem that you're trying to fix, I think special-casing for smaller screen sizes is perhaps not the way to go, especially when the problem persists for wider screens of similar heights.

Yes, the changes were originally for mobile devices. Following our conversation, consideration for the navbar and the fact that it overlaps the modal upon open as well as does not provide functionality when displayed now have resulted in changes to account for all screen sizes including mobile where the z-index has been raised from 900 to 1100.