Fix bug where overlapping/conflicting courses are not correctly displayed on the calendar grid.

[IsaDavRod]

This bug happens when at least one course conflicts with courses that are consecutive.

• The goal is to first fix the bug using the simplest solution. If you want to try to do the complex way to maximize space, you are on your own since I have ZERO clue how that complex solution would work.

---

What is the bug?

The image below shows normal behavior for conflicting courses, and NONE are consecutive (none start at exactly the same time another one ends).

The image below also shows normal behavior for courses that do NOT conflict, and they ARE consecutive.

However, if we have consecutive courses, and a course that conflicts with both courses, a nasty bug appears. In the first image below, the blue course is suddenly PUSHED to the right since the red course was added. The second and third image below shows the correct behavior with different solutions.

IMAGE 1 (BUG)

IMAGE 2 (NO BUG): Complex solution to maximize space.

IMAGE 3 (NO BUG): Simple solution without maximizing space.

---

So what causes the bug?

In this image of 10 courses, the bug does not appear because—although many of them conflict with each other—they all share a common time (1:30pm-2:00pm), and that means none of them are consecutive.

However, if we add one course which conflicts with the others AND also happens to be consecutive with another course, the bug appears. In the image below, all but ONE course share the common time, 1:30pm-2:00pm. The purple course that starts at 11:30am and ends at 1:30pm is also consecutive with the blue course that starts at 1:30pm and ends at 3:30pm. Notice how the last blue course was pushed to the right. Behind the scenes, the blue course's margin-left is just 100% (WHICH IS BASICALLY THE BUG). It's not actually in the next cell. No block should ever have a margin-left of 100%.

In the image below, notice the following:

• margin-left of the blue course is 100%
• The first purple's margin-left is 12.5%.
• The margin-left of all the other courses are increasing by 10% (22.2, 33.3, 44.4. 55.5, 66.6, 77.7)
• All the widths except the first purple and blue (consecutive courses btw) have a width of 12.5% while the others have a width of 11.1.)

In this next image, the margin-left for the first purple is changed to 11.1% to match the pattern, and the margin-left of the blue course is changed to 88.8% to end the pattern. Both widths are also changed to 11.1% to match the widths of the other blocks. This is how it's supposed to look like.

---

However, things can get tricky, especially if we want to maximize space to ensure as much info in each block is shown.

Another example of the bug:

In the first image below, the bug is present. It might not look like anything is wrong, but the gap between the red and yellow/blue course is improper and not expected behavior. If we go into inspect, the red block has a width: calc(33.3333%) while the yellow and blue have a width: calc(50%). (see the second and third image below to see the correct behavior with different solutions).

IMAGE 1 (BUG)

IMAGE 2 (NO BUG): Complex solution to maximize space. (blue and yellow share a portion of the grid area)

IMAGE 3 (NO BUG): Simple solution without maximizing space. It divides the num of courses by 100 to get the % width per course.

---

EXPECTED BEHAVIOR:

NOTE: The likelihood of a student adding this many courses is very low, but this example is just to share an idea on maximizing space which is important if the student has two courses that share a conflicting course as in the earlier example.

SOLUTION ONE: (SIMPLEST)

When blocks conflict, the width of each block is supposed to be equally distributed.
For example, if five non-consecutive conflicting courses exist in a 100px grid cell, each course is supposed to take up 20% of that 100px space (which means they each have a 20% width of the entire cell).

SOLUTION TWO: (COMPLEX)

Any consecutive courses that share a conflicting course is supposed to take up the same % space (same width) and have the same left-margin.
For example, if there are three non-consecutive conflicting courses in a 100px grid cell AND two consecutive non-conflicting courses in the cell (assuming they share a conflicting course), the two consecutive non-conflicting courses take up the same 25% space, and the other three each take up their own 25% (this essentially maximizes space)
IMAGE 1: Maximizes space by having two consecutive courses share a portion of space, assuming they share a conflicting course.

IMAGE 2: Does not maximizes space, but also fixes the bug issue. Each course is given its own space, but less of the course detail is shown.

---

Originally posted by @IsaDavRod in #361