Points page layout is fixed on smaller screens

[ashi006]

Fixes #1314

Description

What?

Module information on points page was overflowing and going out of screen window making the UI looks weird.

How?

By wrapping the <table> tag inside <div> resolved the issue, now the module information does not overflow from the parent container and content is visible by scrolling. Also, placement of labels e.g., "Deadline extensions" or "module opens on" has been set for mobile screens.

Fixes #1314

Testing

Remember to add or update unit tests for new features and changes.

• How to test your changes in A-plus
• How to test accessibility

What type of test did you run?

• [ ] Accessibility test using the WAVE extension.
• [ ] Django unit tests.
• [ ] Selenium tests.
• [ ] Other test. (Add a description below)
• [x] Manual testing.

Manually tested that position of labels on smaller screens is fine and made sure that module information is visible by scrolling and looks nice.

Did you test the changes in

• [x] Chrome
• [ ] Firefox
• [ ] This pull request cannot be tested in the browser.

Think of what is affected by these changes and could become broken

Translation

• [ ] Did you modify or add new strings in the user interface? (Read about how to create translation)

Programming style

• [x] Did you follow our style guides?
• [x] Did you use Python type hinting in all functions that you added or edited? (type hints for function parameters and return values)

Have you updated the README or other relevant documentation?

• [ ] documents inside the doc directory.
• [ ] README.md.
• [ ] Aplus Manual.
• [ ] Other documentation (mention below which documentation).

Is it Done?

• [ ] Reviewer has finished the code review
• [ ] After the review, the developer has made changes accordingly
• [ ] Customer/Teacher has accepted the implementation of the feature

Clean up your git commit history before submitting the pull request!