Make rest timer overlay header with prominent countdown display#26
Merged
Make rest timer overlay header with prominent countdown display#26
Conversation
The rest timer was easily occluded by the sticky header and too small to notice. Now it renders as a fixed overlay at the top of the viewport with a larger countdown (3rem), higher z-index than the header, and full-width positioning so it's the most prominent element during rest. https://claude.ai/code/session_01PuaCbmpvpkgrFd2yX1pQKy
willchan
force-pushed
the
claude/improve-rest-timer-visibility-XJPt3
branch
from
cd6bea3 to
2f61255
Compare
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
2 participants
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
Redesigned the rest timer to be a fixed overlay that covers the header area with a large, prominent countdown display. This ensures the timer is always visible and cannot be occluded during rest periods.
Key Changes
stickypositioning tofixed, anchored at the top of the viewport to overlay the headertransform: translateX(-50%)Implementation Details
The timer now uses fixed positioning with a max-width constraint to maintain proper proportions on larger screens while remaining full-width on mobile. The skip button remains accessible and functional within the overlay. Visual snapshot testing ensures the design remains consistent across updates.
https://claude.ai/code/session_01PuaCbmpvpkgrFd2yX1pQKy