Skip to content

Improve settings view navigation and layout responsiveness#2

Merged
pheuberger merged 1 commit into
mainfrom
claude/settings-layout-mobile-nav-4sfym
Jan 24, 2026
Merged

Improve settings view navigation and layout responsiveness#2
pheuberger merged 1 commit into
mainfrom
claude/settings-layout-mobile-nav-4sfym

Conversation

@pheuberger
Copy link
Copy Markdown
Owner

Summary

Enhanced the settings view with better navigation controls and improved responsive layout handling. Added a back button for mobile users to return to bookmarks and adjusted the settings container to use full width instead of a fixed max-width constraint.

Key Changes

  • Navigation: Added an onBack callback prop to SettingsView component and passed it from BookmarkList to enable returning to the bookmarks view
  • Back Button: Implemented a mobile-friendly back button (visible on screens smaller than lg breakpoint) that displays the chevron icon and "Bookmarks" label
  • Layout: Changed SettingsContainer from max-w-2xl mx-auto to w-full for better full-width utilization on all screen sizes
  • Styling: Back button includes hover effects and smooth transitions for better UX

Implementation Details

  • The back button is conditionally rendered only when onBack prop is provided
  • Mobile-first approach: back button hidden on large screens (lg:hidden) where navigation is likely handled differently
  • Maintains consistent spacing with -ml-1 mb-2 to align with the settings heading below
  • Uses existing design tokens (text-muted-foreground, hover:text-foreground) for visual consistency

- Remove max-w-2xl constraint from SettingsContainer to fill available width
- Add back button to settings view visible only on mobile (lg:hidden)
- Pass onBack callback from BookmarkList to enable navigation back to bookmarks
@netlify
Copy link
Copy Markdown

netlify Bot commented Jan 24, 2026

Deploy Preview for hypermarkk ready!

Name Link
🔨 Latest commit 140fd6f
🔍 Latest deploy log https://app.netlify.com/projects/hypermarkk/deploys/697499ca4b18e00008340676
😎 Deploy Preview https://deploy-preview-2--hypermarkk.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@pheuberger pheuberger merged commit 4e49b04 into main Jan 24, 2026
6 of 20 checks passed
@pheuberger pheuberger deleted the claude/settings-layout-mobile-nav-4sfym branch January 24, 2026 10:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants