Skip to content

Fix Class Block Alignment and Text Legibility on Plans Page #751

@garrett-plumlee

Description

@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.

Image

Metadata

Metadata

Assignees

Labels

FrontendThis issue is for the Frontend teambugSomething isn't working

Type

No fields configured for Bug.

Projects

Status

No status

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions