Skip to content

Branch fix mobile frontend #147

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zachchong merged 8 commits into from
Dec 10, 2025
Merged

Branch fix mobile frontend #147

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
77490c6
Fix 404 nginx error
zachchong Nov 1, 2025
11b5217
Update nginx base
zachchong Dec 1, 2025
326f092
Merge branch 'master' into branch-fix-404-nginx
zachchong Dec 1, 2025
22146a9
Update nginx base
zachchong Dec 1, 2025
2f7a8be
Fix day overflow in calendar
zachchong Dec 8, 2025
f686ad1
Merge branch 'master' into branch-FixMobileFrontend
zachchong Dec 8, 2025
32d781d
Fix cell unresponsiveness when clicking
zachchong Dec 8, 2025
8b6350b
Fix slot click issue on mobile
zachchong Dec 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions frontend/src/components/booking-calendar/booking-calendar.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,15 @@
.cancelled {
background-color: base.$light-grey-color !important;
}

:global(.rbc-month-view .rbc-date-cell) {
padding: 0;
}

:global(.rbc-month-view .rbc-date-cell .rbc-button-link) {
display: block;
width: 100%;
height: 100%;
padding: 0.25rem 0.5rem;
text-align: left;
}
3 changes: 3 additions & 0 deletions frontend/src/components/booking-calendar/booking-calendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
CURRENT_LOCALE,
dateLocalizer,
DAY_HEADER_FORMAT,
WEEKDAY_FORMAT,
dayPropGetter,
slotPropGetter,
weekRangeFormat,
Expand Down Expand Up @@ -55,6 +56,7 @@ function BookingCalendar(props: Props) {
<div className={styles.calendarWrapper}>
<Calendar
localizer={dateLocalizer}
selectable={true}
toolbar
titleAccessor="title"
startAccessor="start"
Expand All @@ -74,6 +76,7 @@ function BookingCalendar(props: Props) {
culture={CURRENT_LOCALE}
formats={{
dayHeaderFormat: DAY_HEADER_FORMAT,
weekdayFormat: WEEKDAY_FORMAT,
dayRangeHeaderFormat: weekRangeFormat,
}}
dayPropGetter={dayPropGetter}
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/utils/calendar-utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ import { END, START } from "../constants";
import { sort } from "./transform-utils";

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";
Copy link

Copilot AI Dec 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[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";

Copilot uses AI. Check for mistakes.

const locales = {
[CURRENT_LOCALE]: enUS,
Expand Down