[#12269] Instructor edit sessions page: Fix add question button overflow.

[singhabhyudita]

Fixes #12269

Outline of Solution

Used breakpoints and inbuilt padding classes of Bootstrap to reduce the padding at smaller screen width.

Here are the results:

• Instructor edit sessions page

• Instructor help page

[github-actions]

Hi @singhabhyudita, thank you for your interest in contributing to TEAMMATES!
However, your PR does not appear to follow our contribution guidelines:

• Title must start with the issue number the PR is fixing in square brackets, e.g. [#<issue-number>]

Please address the above before we proceed to review your PR.

[weiquu]

Hi @singhabhyudita, do take a look at the failing tests before we proceed to review your changes.

In addition, I believe the results in the screenshot don't address the issue raised, which is the overflowing of buttons into the next line. That is to say, the solution should be to have the buttons be on the same line regardless of screen width (either by reducing the padding between components at smaller screen widths or other means). (@zhaojj2209 do lmk if I misunderstood)

[singhabhyudita]

Hi @weiquu , could you please tell me how do I fix these failing checks?

Also after going through the issue the first time I thought by overflowing you meant that the buttons are overflowing into one another so I thought the padding of the buttons needs to be reduced at smaller screen width.

And before this I tried to use custom styling to increase the margins and @domlimm suggested that it was fine but I could use bootstrap classes to do the same, so I thought I understood the problem correctly.

Anyways now there is no confusion so I will try to fix it as soon as possible. Kindly help me with the checks because I am confused so as to how I fix the failing checks.

Thank you in advanced!

[singhabhyudita]

Hi @weiquu , is this what you are referring to?

This screenshot is of screen width 320px.

[weiquu]

Hi @singhabhyudita, you can read more about snapshot testing here. You can update the snapshots by running npm run test and pressing a to run all test cases. After that, check through the snapshots to make sure the changes are as expected, then press u to update them.

Please note that as per our mobile-friendliness best practices, the minimum screen width we support is 360px.

The idea for the solution is fine; do let me know when your PR is ready for review.

[singhabhyudita]

@weiquu kindly review the changes!

[weiquu]

Not sure if having the buttons be of different heights is desirable... a quick comparison of different solutions (current solution; reducing padding at the end; reducing padding of the info icon and at the ends):

Any thoughts? Also pinging @zhaojj2209 @domlimm and any other contributors :')

In any case, I think the changes shouldn't be made in .background-color-light-blue. It has a specific use and we should try to avoid any cases of unintended side effects

[singhabhyudita]

I thought the current solution was acceptable since I had confirmed it with @weiquu beforehand.
Nonetheless @domlimm @zhaojj2209 could you please help me out with the desired solution?

[zhaojj2209]

I would suggest the third solution (reduce padding both at the end and for the info button).

[weiquu]

Thanks @zhaojj2209!

@singhabhyudita, for your reference, I reduced the padding for both by setting padding-left and padding-right to 5px (if I remember correctly). You can play around with the number to see what works best (or think of a solution that doesn't need to set a fixed padding)

[singhabhyudita]

Have updated the changes. Kindly review.
(@zhaojj2209 @domlimm @weiquu)

[weiquu]

Couple of small comments, should be good to go after changes

[weiquu]

LGTM! Thanks for contributing

[singhabhyudita]

Pinging @domlimm for review!

[domlimm]

LGTM! Thank you for contributing! So sorry for the delay