Sticky button#27
Conversation
LindseyB
had a problem deploying
to
github-pages
GitHub Actions
Failure
There was a problem hiding this comment.
Pull Request Overview
This PR implements a sticky Start/Pause button that appears at the bottom of the screen when the main control button scrolls out of view, enhancing user experience on long or scrollable pages. The implementation uses an Intersection Observer to track the main button's visibility and conditionally renders the sticky version.
Key Changes
- Added Intersection Observer to track main Start/Pause button visibility
- Implemented conditional rendering of a sticky button when the main button is not visible
- Added CSS styling for the fixed-position sticky button
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/App.tsx | Added state management, ref, and Intersection Observer logic for button visibility tracking, plus conditional sticky button rendering |
| src/App.css | Added CSS styles for the sticky button positioning and appearance |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| { | ||
| root: null, | ||
| rootMargin: '0px', | ||
| threshold: 0.9 // Button is considered visible if 90% is visible |
There was a problem hiding this comment.
The magic number 0.9 should be extracted to a named constant (e.g., BUTTON_VISIBILITY_THRESHOLD = 0.9) to improve code readability and make it easier to adjust this threshold value if needed.
| {!isStartButtonVisible && ( | ||
| <div className="sticky-controls"> | ||
| <button | ||
| className={`control-btn ${isActive ? 'stop' : 'start'}`} | ||
| onClick={handleStartStop} | ||
| > | ||
| {isActive ? 'Pause' : 'Start'} | ||
| </button> | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
The sticky button duplicates the exact same logic as the main button (className and text content). Consider extracting this into a reusable component or helper function to reduce code duplication and ensure consistency.
What does this PR do?
This pull request introduces a "sticky" Start/Pause button that appears at the bottom of the screen when the main control button is not visible, improving usability for users on long or scrollable pages. The implementation uses an Intersection Observer to track the visibility of the main button and conditionally renders the sticky version as needed.
Closes #23
Type of change
Testing
Screenshots (if applicable)