Plan: Shift Calendar Cell Layout and Readability Enhancements

Overview

The user reported that the text in the Monthly Shift Calendar cells is too small to read, especially the shift times. The objective is to optimize the styling, spacing, and typography of the shift calendar cells inside the React frontend to make the layout clean, readable, and professional.

Project Type

WEB (React + Tailwind CSS frontend modification)

Success Criteria

Shift name and shift time font sizes are increased for clear readability.
Cell badge height and padding are adjusted so the larger text fits without overlapping or clipping.
The shift calendar grid maintains its alignment, horizontal scrollability, and aesthetics across screen sizes.
No purple or violet color schemes are introduced (adhering to styling guidelines).

Tech Stack

React & Inertia.js: Frontend framework.
Tailwind CSS: Styling utility classes.

File Structure

resources/js/pages/hr/shifts/calendar.tsx (Target component containing the calendar grid and cell rendering)

Task Breakdown

Task 1: Adjust Cell Badge Layout & Dimensions

Agent: frontend-specialist
Skill: frontend-design, react-best-practices
Priority: P1
Dependencies: None
INPUT: The badge container div styling inside the dates.map render block of calendar.tsx (around lines 268-278).
OUTPUT:
- Update cell badge height from h-10 (40px) to h-12 (48px) or h-13 (52px) to provide more vertical space.
- Increase font size from text-[9px] to text-[11px] (or text-xs).
- Align text elements vertically with appropriate line-height (leading-normal or leading-tight).
VERIFY: Check that the shift labels (OPS, RD, etc.) render in the new larger font size and are vertically centered.

Task 2: Enhance Time Label Readability & Formatting

Agent: frontend-specialist
Skill: frontend-design
Priority: P1
Dependencies: Task 1
INPUT: The shift time span rendering within the badge (around lines 274-276).
OUTPUT:
- Increase the time font size from text-[7px] to text-[9.5px] or text-[10px].
- Format the time string dynamically (e.g., trim leading zeroes from 03:30PM to 3:30 PM) for a cleaner look.
VERIFY: Check that times are legible, properly aligned, and styled with high-contrast text colors relative to the badge background.

Phase X: Verification Checklist

Lint: Run npm run lint or npx eslint to ensure no syntax/type errors.
Build: Run npm run build on local machine to check compilation success.
Visual Audit: Verify the table cells display correctly in light and dark modes.
Accessibility Audit: Ensure text meets color contrast standards.

2.7 KiB Raw Blame History