fix: opening drill tour and responsive layout fixes#285
Open
mojoro wants to merge 5 commits intoCSSLab:mainfrom
Open
fix: opening drill tour and responsive layout fixes#285mojoro wants to merge 5 commits intoCSSLab:mainfrom
mojoro wants to merge 5 commits intoCSSLab:mainfrom
Conversation
…ased on viewport width Converts the static openingDrillTourSteps array to a function that returns mobile or desktop step configurations based on window width. This allows different targetIds and placements per breakpoint without changing the tourConfigs schema or any call sites.
Adds optional beforeAction callback to TourStep interface, executed before each step transition in handleNext and handlePrevious. Used by the opening drill tour to dispatch synthetic click events on mobile tab buttons so the correct panel is visible before Joyride targets it.
- Add beforeAction to TourStep interface for pre-step DOM interactions - Execute beforeAction in handleNext/handlePrevious before transitions - Mobile step 2: dispatch click on Selected tab before targeting it - Mobile step 3: dispatch click on Selected tab, target panel content - Desktop step 3: target opening-drill-queue section - Rename SelectedPanel id to opening-drill-selected-panel to avoid duplicate ids with the mobile tab button - Add id to Queue section in DrillStudioPanel for desktop targeting
The two-column desktop layout (browse panel + preview) breaks at widths below ~851px, but the mobile tab layout didn't activate until md (768px). Bump layout-critical breakpoints to lg (1024px) to match the existing TABLET_BREAKPOINT_PX used by WindowSizeContext.
- Extract clickTab helper to DRY up repeated dispatchEvent calls - Fix off-by-one in isMobile check (<= 1024 -> < 1024) to match Tailwind lg: breakpoint (min-width: 1024px) - Fix double space typo in step description
|
@mojoro is attempting to deploy a commit to the Maia Platform Team on Vercel. A member of the Team first needs to authorize it. |
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.
Summary
The opening drill tour (react-joyride) has several issues across mobile and desktop that prevent it from being as helpful as it could be on mobile and partially broken on desktop. The modal's responsive breakpoint also causes layout breakage at intermediate widths.
Issues fixed
#opening-drill-selectedwhich is inside amd:hiddenwrapper on desktop and had duplicate IDs on mobile. Step 3 re-targeted the modal header (same as step 0) instead of a meaningful element.md:(768px), causing the chessboard and preview panel to squeeze/overflow between 768-1024px.Changes
src/constants/tours.tsopeningDrillTourStepsfrom a static array to a function that returns mobile or desktop step configurations based on viewport widthbeforeActioncallbacks on mobile steps to dispatch synthetic click events on tab buttons, switching to the correct tab before Joyride targets the element#opening-drill-preview, desktop step 4 →#opening-drill-queue, mobile step 4 →#opening-drill-selected-panelsrc/contexts/TourContext.tsxbeforeActioncallback toTourStepinterfacebeforeActioninhandleNextandhandlePreviousbefore scroll/transitionsrc/components/Openings/OpeningSelectionModal.tsxmd:tolg:(1024px) to matchTABLET_BREAKPOINT_PXinWindowSizeContextidfromopening-drill-selectedtoopening-drill-selected-panelto resolve duplicate ID with the mobile tab buttonid="opening-drill-queue"to Queue section for desktop tour targetingKnown issues (not addressed in this PR)
disableScrollParentFix={false}fixes mobile but only improves desktop. I notice that on an actual phone, the current approach renders the spotlight position correctly. It is possibly a Joyride limitation with nested scroll parents, but I am not sure.opening-drill-browseIDs on mobile: The Browse tab button and BrowsePanel both haveid="opening-drill-browse"on mobile. Pre-existing, not introduced by this PR.openingDrillTourSteps()evaluated once at module load: The mobile/desktop decision is fixed for the session. If this needs to be reactive to resize, the call sites would need to invoke the function on each tour start.Before (bugs)
Breakpoint: chessboard squeezed at intermediate width
Mobile step 4: spotlight the same as step 1, tooltip referencing a less helpful section of the drill panel
Desktop step 3: was targeting an id that didn't exist on desktop breakpoint, so the position got thrown off.
After (fixes)
Desktop tour:
Step 1
Step 2
Step 3
Step 4
Mobile tour:
Step 1
Step 2
Step 3 with working tab switch
Step 4
Test plan
beforeActionaddition