Conversation
Shum-ster
commented
Mar 5, 2026
Shum-ster
commented
- Fix mobile view
- Fix checkbox UI and add deselect-all X button
…into feature/admin-mass-accept-bookings merge with remote
|
|
||
| .extraContentContainer { | ||
| width: 100%; | ||
| padding-left: 60px; |
There was a problem hiding this comment.
Pull request overview
Adds/improves an admin bulk-action footer for the booking admin table, focusing on mobile layout and selection controls (including a deselect-all affordance).
Changes:
- Adds a fixed bulk-action footer with a new “deselect all” (✕) control.
- Adjusts footer styling/layout (including mobile overflow behavior).
- Tweaks checkbox rendering/expanded-row layout to avoid UI overlap.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/components/booking-admin-table/booking-admin-table.tsx | Wires selection footer into the admin booking table and adjusts table layout via footerHeight. |
| frontend/src/components/admin-bulk-action-footer/admin-bulk-action-footer.tsx | Adds an icon-style “deselect all” button to the bulk-action footer UI. |
| frontend/src/components/admin-bulk-action-footer/admin-bulk-action-footer.module.scss | Updates footer positioning/spacing and adds mobile layout rules + icon button styling. |
| frontend/src/components/admin-booking-base-table/admin-booking-base-table.tsx | Hides checkbox on expanded/details rows. |
| frontend/src/components/admin-booking-base-table/admin-booking-base-table.module.scss | Adds left padding to details container to prevent checkbox overlap. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| > | ||
| ✕ |
There was a problem hiding this comment.
The new icon-only deselect button uses the glyph "✕" with only a title. For accessibility, add an accessible name (e.g., aria-label="Deselect all") and ensure the decorative glyph isn’t the only label screen readers will announce.
| > | |
| ✕ | |
| aria-label="Deselect all" | |
| > | |
| <span aria-hidden="true">✕</span> |
| <BookingSelectionFooter | ||
| selectedIds={selectedBookingIds} | ||
| processedData={processedData} | ||
| onSelectionChange={setSelectedBookingIds} | ||
| /> |
There was a problem hiding this comment.
BookingSelectionFooter is rendered twice (once inside the Segment.Group and again after it). When selectedBookingIds.size > 0, this will mount two fixed-position footers at the same time (duplicate UI + duplicate DOM actions). Remove one of the render sites (likely keep only the one outside the Segment.Group).
