fix: Make timesheet and timer components mobile-responsive#22
Merged
fix: Make timesheet and timer components mobile-responsive#22
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR addresses critical mobile responsiveness issues in the timesheet and timer components that were making the application unusable on mobile viewports. The changes implement horizontal scrolling for the 7-column timesheet grid and introduce responsive breakpoints to optimize the layout for smaller screens.
- Enabled horizontal scrolling for the weekly timesheet grid with a 700px minimum width
- Added responsive height adjustments to time entry cells (100px on mobile, 120px on desktop)
- Converted timer display from horizontal to vertical layout on mobile devices with text truncation
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/components/timesheet/WeeklyTimesheet.tsx | Wrapped the 7-column timesheet grid in a horizontally scrollable container with 700px minimum width to prevent unusable narrow columns on mobile |
| src/components/timesheet/TimeEntryCell.tsx | Reduced cell height on mobile from 120px to 100px with md: breakpoint restoration, and added last:border-r-0 for cleaner edge styling |
| src/components/timer/TimerDisplay.tsx | Restructured layout to stack vertically on mobile using sm: breakpoints, added text truncation to prevent overflow, and grouped timer display with stop button |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add horizontal scroll to WeeklyTimesheet for mobile (min-width: 700px) - Adjust TimeEntryCell min-height with responsive breakpoint - Make TimerDisplay stack vertically on mobile with proper truncation Fixes critical MVP issue: timesheet grid was unusable on mobile viewports due to 7-column layout without responsive breakpoints.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
BenGWeeks
force-pushed
the
claude/fix-mvp-issue-CSmqF
branch
from
08d06ac to
2e865a6
Compare
- Remove horizontal scrolling from timesheet grid (prefer shrinking) - Keep icon-only "Copy previous week" button on mobile - Keep smaller TimeEntryCell height on mobile 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Fix ExtensionBanner buttons staying right-aligned on mobile - Add Branch Switching section to CLAUDE.md explaining need to restart dev server after switching branches 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
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
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.
Fixes critical MVP issue: timesheet grid was unusable on mobile viewports
due to 7-column layout without responsive breakpoints.