Teammates: Instructor: edit course: make panel responsive

[whipermr5]

Noticed from #7841. At certain sm resolutions, the detect time zone button protrudes out:

At xs resolutions, the button is stuck to the bottom of the select input (https://github.com/TEAMMATES/teammates/issues/7841#issuecomment-317754739):

[stanislous]

@whipermr5 So what should be the correct way?? :-)

[HirdayGupta]

@stanislous From the sm resolution screenshot you can see that the button is sticking out of the panel. That shouldn't happen and it should instead be resized to fit in the panel. In the xs resolution screenshot, you can see that the button sticks to the timezone dropdown. That shouldn't happen either and instead there should be the expected spacing between two form elements.

If you're not working on this, may I take it?

[stanislous]

@HirdayGupta it's OK. You can work on this. :-)

[HirdayGupta]

@damithc Sir, what's the lowest screen resolution that we support?

Also, @whipermr5, there are two approaches to solving this problem. The first, easy one, is to fix the behaviour at the individual levels of sm and xs without bothering to fix the underlying problem of why the elements (which are never more than 12 columsn) over flow in the first place. This is pretty straightforward and I have code for this approach ready for a PR.

The second, more complicated one, is to fix the underlying problem of why even 12 columns cause a horizontal overflow in the panel. I have been trying to figure this out over the past couple days, looking at the documentation for all the stock bootstrap classes we are using, but I cannot seem to figure it out. This approach is much harder, and in my opinion not worth the added effort even though it is, technically, 'the right thing to do.'

Which approach would you recommend?

[damithc]

@damithc Sir, what's the lowest screen resolution that we support?

Not sure myself. What's the latest norm out there? Any input from other devs?

[whipermr5]

@HirdayGupta The overflow happens because the button is only given col-sm-1 when its width requires more than one column. From trying, the button requires 4 columns at the width shown in the screenshot. Currently, the time zone label is given 3 columns and the dropdown is given 6 (so only 10 columns are utilised). We can redistribute it such that the dropdown is given 5 and the button is given 4. There is no underlying problem with bootstrap; it is our erroneous usage of it that results in such defects.

As for lowest resolution, I usually resize the browser window to the smallest possible width (it stops resizing beyond a certain width). As long as the UI still looks good at that width, it passes.

[HirdayGupta]

There is no underlying problem with bootstrap; it is our erroneous usage of it that results in such defects.

@whipermr5 I see! My bad 😅.

The overflow happens because the button is only given col-sm-1 when its width requires more than one column. From trying, the button requires 4 columns at the width shown in the screenshot. Currently, the time zone label is given 3 columns and the dropdown is given 6 (so only 10 columns are utilised). We can redistribute it such that the dropdown is given 5 and the button is given 4

I had figured out the col-sm-1 thing haha. Just thought that there might've been a root problem that needed solving. The 5-4 distribution was my first solution, which I thought was inadequate :p.

Submitting a PR with my original solution soon :)