Conversation
There was a problem hiding this comment.
Pull request overview
This PR addresses two mobile usability issues in the booking calendar component: text overflow in calendar day headers and improved date cell clickability.
- Changed day header format from "EEEE" (full day name) to "EEE" (abbreviated) to prevent text overflow
- Added
selectable={true}property and styling changes to make entire date cells clickable instead of just the date numbers
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| frontend/src/utils/calendar-utils.ts | Updated date format constants to use abbreviated day names |
| frontend/src/components/booking-calendar/booking-calendar.tsx | Added selectable prop and weekday format configuration |
| frontend/src/components/booking-calendar/booking-calendar.module.scss | Added global styles to expand clickable area of date cells |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| export const CURRENT_LOCALE = "en-US"; | ||
| export const DAY_HEADER_FORMAT = "EEEE dd MMMM"; | ||
| export const DAY_HEADER_FORMAT = "EEE dd MMMM"; | ||
| export const WEEKDAY_FORMAT = "EEE"; |
There was a problem hiding this comment.
[nitpick] The constant name WEEKDAY_FORMAT is ambiguous because both DAY_HEADER_FORMAT and WEEKDAY_FORMAT use the same format value 'EEE'. Consider renaming to WEEKDAY_COLUMN_FORMAT or WEEK_VIEW_DAY_FORMAT to clarify that this is specifically for the weekday column headers in month view, distinct from the day header used elsewhere.
Suggested change
| export const WEEKDAY_FORMAT = "EEE"; | |
| export const WEEKDAY_COLUMN_FORMAT = "EEE"; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fix 1: Mobile: Fix the text overflow issue on calendar (days)

Before:
After:

Fix 2: As a mobile user, I want to select dates easily by tapping anywhere on the date cell, so that I don’t have to press exactly on the number for it to respond.