fix(explore): expert booking calendar — viewport-fit dialog, nav z-stack, per-day availability dots - #1229
Draft
teetangh wants to merge 11 commits into
Draft
fix(explore): expert booking calendar — viewport-fit dialog, nav z-stack, per-day availability dots#1229teetangh wants to merge 11 commits into
teetangh wants to merge 11 commits into
Conversation
…ay availability dots - Book Now dialog: inline zIndex 1002 so the fixed navbar (z-[1000]) and announcement bar (z-[1001]) can no longer paint above it; compact header/footer chrome; slot list capped (30dvh mobile / 350px desktop) with internal scroll so the dialog never grows past the viewport. - Calendar: cell size driven by a --cell clamp(26px, 5.2dvh, 42px) var so all rows + legend fit on screen at any height; weekday header and grid center cells; description and schedule note hidden on tight screens. - Calendar now shows which dates have slots: month-wide rollup from the existing availability range endpoint (today -> month end, lazy per month flip) rendered as emerald/amber/rose/zinc dots with a legend; past and zero-slot days disabled; prev-month arrow disabled on the current month. - Sidebar pricing card sticks below the real header stack via xl:top-[calc(var(--header-height)+1rem)] instead of top-24.
✅ Deploy Preview for familiarise ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Warning
|
…olling Dialog is now a fixed-height (85dvh) flex column with container-type: size — header/footer stay fixed, the two panes flex, and only the slot list scrolls internally. Calendar cells size off the dialog's real height via cqh container units (--cell clamp), so the grid can never push the dialog past the screen. Dropped the duplicate calendar legend; the slot list legend doubles as the dot key.
…insic width, w-auto collapsed it
8cqh-of-dialog cells ignored the chrome share of the pane, so the last week row spilled outside the card on shorter screens. The card is now the size container at md+ and cells derive from its real height (clamp(22px, 16.6cqh - 30px, 48px)); card clips overflow; mobile stack scrolls the body and caps the slot list at 40dvh.
…h variant) At short viewport heights the side-by-side dialog left the calendar card ~217px — six week rows can never fit. New 'mdh' custom variant (min-width 768px + min-height 700px) gates the two-column, no-scroll layout; shorter screens use the stacked layout with body scroll. Chrome slimmed (header/desc/footer/card padding) and cell formula retuned to the card's real chrome.
… mdh layout flex-basis:0 children of auto-height parents collapsed the stacked fallback to ~97px, clipping the calendar. flex-1 now applies only at mdh where the dialog has a fixed height; stacked mode sizes by content.
… full-screen on phones Per the SaaS scheduling pattern (Cal.com/Calendly): the booking flow is the task, so the sheet takes 92dvh and up to 1200px wide on desktop and goes full-bleed below sm. The mdh two-column threshold drops to 620px height — at the previously-cramped 662px viewports the side-by-side no-scroll layout now fits with ~36px cells.
…l constant to -22px
…size by content min-h-0 let flex-shrink crush the card below its content when the body grid's auto rows resolved small on mobile; the calendar clipped at ~4 rows. Panes/card/list now keep natural height outside mdh.
|
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
1 participant
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.
Problem
On the Explore Experts details page (
/explore/experts/[consultantId]):z-50while the fixed navbar isz-[1000]and the announcement barz-[1001], so the nav painted above the modal.sticky top-24(96px) sat under the real chrome stack (80px nav + ~40px announcement bar ≈ 120px).Fix
zIndex: 1002on the Book NowDialogContent(merge-order-proof vs thez-50base class). Matches thez-[1002]pattern already used byTrialBookingModal/SubscriptionPricingToggle.--cell: clamp(26px, 5.2dvh, 42px)CSS var so 6 rows + legend always fit; compact header/footer chrome; slot list capped (30dvhmobile /350pxdesktop) with internal scroll; description + schedule note hidden on tight screens. The whole dialog now shrinks with the screen instead of overflowing it./api/slots/availability-with-allocationrange endpoint (today → month end, lazy re-fetch on month flip, stale-response guard) rendered as emerald (open) / amber (partially booked) / rose (fully booked) / zinc (no slots) dots under each date, with a legend. Past and zero-slot days are disabled; fully-booked days stay clickable to show the rose slot list; prev-month arrow disabled on the current month. No backend changes.xl:sticky xl:top-[calc(var(--header-height,5rem)+1rem)]— header-aware and only sticky where the two-column layout exists.Verification
tsc --noEmit+ ESLint clean on touched files.