Repository navigation
fix: centralize iOS safe area and refactor list components - #47
Merged
chriswritescode-dev merged 10 commits intoJan 4, 2026
Merged
chriswritescode-dev merged 10 commits into
chriswritescode-dev merged 10 commits into
Conversation
- Add pt-safe CSS utility class for safe-area-inset-top - Create FullscreenSheet component with built-in safe-area support - Add fullscreen prop to DialogContent for fullscreen dialogs - Update FileBrowserSheet to use FullscreenSheet - Update MobileFilePreviewModal to use FullscreenSheet - Add pt-safe to SettingsDialog mobile view Fixes status bar overlap on iOS devices with notch/Dynamic Island
- Header.tsx (main repos page) - SessionDetailHeader.tsx (session page)
- Add PageHeader component with pt-safe, sticky, z-10, border-b styling - Add TDD test infrastructure (vitest config, testing-library, jsdom) - Refactor Header, SessionDetailHeader, RepoDetailHeader, Workspace to use PageHeader - Fix missing pt-safe on RepoDetailHeader and Workspace pages - All header safe area styling now has single fix point
- GitChangesSheet, FilePreviewDialog: add fullscreen prop - ModelSelectDialog, RepoMcpDialog: add pt-safe class - EditSessionTitleDialog: add pt-safe on mobile
Dialogs need top-0 positioning on mobile for pt-safe to work. Centered dialogs don't benefit from safe area padding.
- Fullscreen on mobile with pt-safe, centered on desktop - Simplifies large dialog styling
- Convert pt-safe/pb-safe to @Utility directives with iOS 11 fallback - Use inline styles on DialogContent for reliable safe-area padding - Position close button with calc(env(safe-area-inset-top) + 1rem) - Add 10 tests for DialogContent safe-area behavior
- Add ListToolbar component for search/select all/delete UI - Add Header compound component (Header.Root, Header.Title, etc.) - Update SessionList and RepoList to use ListToolbar - Mobile delete: deletes selected or all if none selected - Cancel delete now clears selection - Remove unused layout components
chriswritescode-dev
changed the title
CloudyAasim
pushed a commit
to CloudyAasim/opencode-manager
that referenced
this pull request
Oct 1, 2026
…escode-dev#47) * fix: add iOS safe-area-inset-top support for fullscreen overlays - Add pt-safe CSS utility class for safe-area-inset-top - Create FullscreenSheet component with built-in safe-area support - Add fullscreen prop to DialogContent for fullscreen dialogs - Update FileBrowserSheet to use FullscreenSheet - Update MobileFilePreviewModal to use FullscreenSheet - Add pt-safe to SettingsDialog mobile view Fixes status bar overlap on iOS devices with notch/Dynamic Island * fix: add pt-safe to main page headers - Header.tsx (main repos page) - SessionDetailHeader.tsx (session page) * docs: add TDD refactoring plan for iOS safe area * remove plan file from repo * refactor: centralize iOS safe area handling with PageHeader component - Add PageHeader component with pt-safe, sticky, z-10, border-b styling - Add TDD test infrastructure (vitest config, testing-library, jsdom) - Refactor Header, SessionDetailHeader, RepoDetailHeader, Workspace to use PageHeader - Fix missing pt-safe on RepoDetailHeader and Workspace pages - All header safe area styling now has single fix point * fix: add pt-safe to remaining fullscreen dialogs and sheets - GitChangesSheet, FilePreviewDialog: add fullscreen prop - ModelSelectDialog, RepoMcpDialog: add pt-safe class - EditSessionTitleDialog: add pt-safe on mobile * fix: use mobile-first positioning for large dialogs Dialogs need top-0 positioning on mobile for pt-safe to work. Centered dialogs don't benefit from safe area padding. * fix: add mobileFullscreen prop to DialogContent - Fullscreen on mobile with pt-safe, centered on desktop - Simplifies large dialog styling * fix: use inline styles for iOS safe area to fix CSS cascade issues - Convert pt-safe/pb-safe to @Utility directives with iOS 11 fallback - Use inline styles on DialogContent for reliable safe-area padding - Position close button with calc(env(safe-area-inset-top) + 1rem) - Add 10 tests for DialogContent safe-area behavior * refactor: extract ListToolbar and Header components for reuse - Add ListToolbar component for search/select all/delete UI - Add Header compound component (Header.Root, Header.Title, etc.) - Update SessionList and RepoList to use ListToolbar - Mobile delete: deletes selected or all if none selected - Cancel delete now clears selection - Remove unused layout components --------- Co-authored-by: Chris Scott <99081550+chriswritescode-dev@users.noreply.github.com>
This was referenced Oct 24, 2026
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.
Summary
Changes
iOS Safe Area
Headercompound component with sticky positioning andpt-safehandlingListToolbar Component
Cleanup
Header.tsx,RepoDetailHeader.tsx,SessionDetailHeader.tsxApp.css