Modal-triggered page layout bugs

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

2 (possibly unrelated) bugs caused by modals:

1. The module search box and filter list is laid out wrongly when a modal is open. This might be caused by the no-scroll class set on body.
2. The page content behind the modal is cut off when the viewport height > 50rem and the page is scrolled down. As the body height is set to the viewport height, this overflow: hidden line hides all content below a certain point.

If the current behavior is a bug, please provide the steps to reproduce. If possible, please upload a screenshot or link to a video recording (on macOS you can use QuickTime) demonstrating the problem.

1. Wrong layout bug

   1. Navigate to https://nusmods.com/modules?q=yakuza.
   2. Ensure that the viewport width >= 768px.
   3. Click the "Feedback Welcome!" button in the footer.
   4. Observe that the search box is in the wrong position, and the filter list has disappeared.
      

2. Page content cut off bug

   1. Navigate to https://nusmods.com/settings or https://nusmods.com/modules?q=yakuza.
   2. Ensure that the viewport height >= 50rem.
   3. Scroll down (you must scroll down, otherwise nothing will be cut off).
   4. Click the "Feedback Welcome!" button in the footer.
   5. Observe that the page content is cut off.
      

What is the expected behavior?

The content behind the modal should not change when the modal is displayed, apart from disabling page scrolling.

Further information

• Which version of NUSMods are you currently using? 20180129-9fd1116
• Which browser and version are you using? Chrome on Linux 64.0.3282.140, Safari on iOS 11.2.5

Start with www/src/styles/layout/site.scss at line 5 and www/src/js/views/components/Modal.scss at line 11, then reproduce both modal cases on the listed settings or modules URLs. Done means the underlying layout and content remain unchanged when the feedback modal opens, with only page scrolling disabled.