fix: restore PageLayout header visibility and add mobile actions slot#141
Merged
Conversation
The title/actions header div had `hidden` with no `md:block` override, making it permanently invisible at all breakpoints. This caused action buttons (e.g. Add Category, Reset to Defaults) to never render, silently breaking any mobile sheet triggers tied to those actions. - Add `md:block` to restore desktop header visibility - Add a `md:hidden` actions bar below the nav for mobile so page-level actions are accessible on narrow viewports https://claude.ai/code/session_01CQMMD3NwoJywWphB2woG6M
Deploying timetrackerpro with
|
| Latest commit: |
4f72d23
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://a9b20b17.timetrackerpro.pages.dev |
| Branch Preview URL: | https://claude-mobile-sheet-action-b.timetrackerpro.pages.dev |
Actions now render in both the desktop header and the mobile strip, so getByRole throws on multiple matches. Switch to getAllByRole and assert at least one button is present. https://claude.ai/code/session_01CQMMD3NwoJywWphB2woG6M
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
Restores the page header section (title, icon, actions) that was accidentally hidden at all breakpoints, and adds a mobile-specific actions bar so page-level action buttons are accessible on narrow viewports.
Type of Change
Related Issue
Closes #
Changes Made
src/components/PageLayout.tsx— Addedmd:blockto the desktop header div class so it renders on ≥768 px viewports (was permanentlydisplay:nonedue to barehiddenclass)src/components/PageLayout.tsx— Added amd:hiddenactions bar that renders theactionsprop below the nav on mobile, giving narrow viewports access to page-level action buttons (e.g. Add Category, Reset to Defaults) that previously never renderedRoot Cause
Commit
0130933removed the iOS/Capacitor build and resolved a merge conflict by applyinghiddento the header div without the matchingmd:blockoverride. The intended class washidden md:block— hide on mobile, show on desktop — but themd:blockpart was dropped. As a result the entire header section, including theactionsslot, wasdisplay:noneat every breakpoint, silently preventing any action button (and any sheet it triggers) from rendering on mobile.Checklist
Documentation
README.mdCHANGELOG.mdupdated accordinglyGeneral
mainnpm run test,npm run lint, andnpm run buildNotes for Reviewers
The mobile actions bar (
md:hiddenstrip) only renders when theactionsprop is provided and the page has atitle, so pages without actions are unaffected. The strip usesborder-b border-borderto visually anchor it below the nav, matching the existing desktop header style.Generated by Claude Code