[#10885] Numerical scale question table is not responsive to different browser size

[yzia2000]

Fixes #10885

PR Checklist

Ensure that you have:

• Read and understood our PR guideline: https://github.com/TEAMMATES/teammates/blob/master/docs/process.md#step-4-submit-a-pr
  • Added the issue number to the "Fixes" keyword above
  • Titled the PR as specified in the abovementioned document
• Made your changes on a branch other than master and release
• Gone through all the changes in this PR and ensured that:
  • They addressed one (and only one) issue
  • No unintended changes were made
• Run and passed static analysis: ./gradlew lint and npm run lint
• Added/updated tests, if changes in functionality were involved
• Added/updated documentation to public APIs (classes, methods, variables), if applicable

Outline of Solution

Updated media query in css file and changed main container width to 100% on browser width reduction.

[teammates-bot]

Hi @yzia2000, these parts of your pull request do not appear to follow our contributing guidelines:

1. PR Description
   • Issue Reference (#<issue-number>) missing.

[ccyccyccy]

LGTM!

[ChooJeremy]

LGTM

[Derek-Hardy]

Another way could be adding overflow: scroll attribute under .main-body selector. But this solution seems to work well.

Suggest to adjust down max-width a bit to keep the sidebar when room permits.

[Derek-Hardy]

Probably we can reduce some max-width here so that sidebar does not disappear too early. Maybe try out somewhere 600-800px.

[yzia2000]

Sure. Lemme try. I chose this number because having a lower number makes the sidebar appear over the tables.

[Derek-Hardy]

@yzia2000 Right, there is still a glitch persists.

With your current solution at @media max-width 800px:

This is not an intended behaviour.

So putting limits on .main-body is probably the right direction to think about. I tried out adding overflow: scroll that gives a good result.

[yzia2000]

@yzia2000 Right, there is still a glitch persists.

With your current solution at @media max-width 800px:

This is not an intended behaviour.

So putting limits on .main-body is probably the right direction to think about. I tried out adding overflow: scroll that gives a good result.

Sorry I was busy yesterday and today. Let me submit a commit that can potentially solve this issue.

[Derek-Hardy]

Closed due to inactivity.