Refine Tutorial positioning and fix mobile width constraint#17
Refine Tutorial positioning and fix mobile width constraint#17google-labs-jules[bot] wants to merge 2 commits intomainfrom
Conversation
- Remove duplicate and broken positioning code block in `src/components/Tutorial.jsx`. - Implement robust `maxWidth` constraint for mobile devices using `min(24rem, calc(100vw - 40px))`. - Ensure strict boundary clamping and center-priority positioning are preserved.
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
Moved `handleNext` and `handleSkip` function definitions to the top of the component body, ensuring they are declared before being accessed by `useEffect` hooks. This resolves the 'handleNext accessed before declared' runtime error.
This change fixes a critical issue in the Tutorial component where duplicate code was causing potential errors and implements a requested mobile-responsive width constraint. It removes a redundant
useLayoutEffectblock that referenced an undefined function and updates the tooltip's inline styles to safely handle small screens using standard CSSmin()andcalc()functions. The "Center Priority" positioning logic and "Smart Anti-shake" behavior viaResizeObserverare verified and preserved.PR created automatically by Jules for task 9664505019768821353 started by @OsakaLOOP