Fix Class Block Alignment and Text Legibility on Plans Page

[garrett-plumlee]

Description
The class blocks displayed on the My Plans and Schedule View pages are currently misaligned and difficult to read. Address the following issues:

Tasks
Vertical Alignment:

• Ensure each class block’s top aligns precisely with the corresponding start time line (e.g., a class starting at 8:00 AM should align with the 8 AM line).

• Adjust height scaling so each class’s visual block length corresponds proportionally to its scheduled time duration.

Text Overflow and Legibility

• Prevent class details (like class name and time) from overflowing or becoming illegible.

Consider either:

-- Increasing the gap between the class name and time, or

-- Allowing the box to stretch left toward the timestamp column for better spacing.

Acceptance Criteria

• Class blocks vertically align with their correct time slots.

• Class blocks scale correctly based on duration.

• All text within class blocks is fully visible and legible.

• Long course names or times do not cause overflow or cutoff issues.

• The updated UI is visually consistent with the Figma design and clear across all screen sizes.