Skip to content

Improve bookmark save UX and fix toast positioning#12

Merged
pheuberger merged 4 commits intomainfrom
claude/fix-bookmark-dialog-shortcuts-j1tIa
Feb 5, 2026
Merged

Improve bookmark save UX and fix toast positioning#12
pheuberger merged 4 commits intomainfrom
claude/fix-bookmark-dialog-shortcuts-j1tIa

Conversation

@pheuberger
Copy link
Copy Markdown
Owner

Summary

This PR improves the user experience for saving bookmarks and fixes the toast notification positioning to be more accessible and visually consistent.

Key Changes

Bookmark Inline Card

  • Changed save shortcut from Enter to Ctrl+Enter (or Cmd+Enter on Mac) to avoid conflicts with text input in description field
  • Updated the help text to reflect the new keyboard shortcut
  • This allows users to press Enter naturally when editing the description without accidentally saving

Toast Notifications

  • Repositioned toasts from center-bottom (left-1/2 -translate-x-1/2) to bottom-right (right-4) for better visibility and reduced overlap with content
  • Increased gap between toast elements from gap-3 to gap-4 for better spacing
  • Added whitespace-nowrap to action button to prevent text wrapping
  • Removed left margin from close button and added flex-shrink-0 to ensure consistent sizing
  • Applied the same positioning fix to the ToastContainer component

Implementation Details

The bookmark save change uses e.ctrlKey || e.metaKey to support both Windows/Linux (Ctrl) and macOS (Cmd) conventions. The toast positioning change aligns with common UI patterns where notifications appear in the corner rather than centered, reducing visual distraction and improving accessibility.

https://claude.ai/code/session_01H5CR653mxrDbtqwK7aUA6G

The keyboard shortcut to submit the bookmark dialog was broken. Now
Ctrl+Enter (or Cmd+Enter on Mac) properly saves from any field.

https://claude.ai/code/session_01H5CR653mxrDbtqwK7aUA6G
The hint incorrectly showed "Enter to save" which doesn't work when
focused on the description textarea. Updated to "Ctrl+Enter to save".

https://claude.ai/code/session_01H5CR653mxrDbtqwK7aUA6G
Notifications were horizontally centered at the bottom of the screen.
Moved them to the right bottom corner for better UX.

https://claude.ai/code/session_01H5CR653mxrDbtqwK7aUA6G
The keyboard shortcut to submit the bookmark dialog was broken. Now
uses the useHotkeys hook with enableOnInputs: true to properly handle
Ctrl+Enter (or Cmd+Enter on Mac) from any field including textarea.

https://claude.ai/code/session_01H5CR653mxrDbtqwK7aUA6G
@netlify
Copy link
Copy Markdown

netlify Bot commented Feb 5, 2026

Deploy Preview for hypermarkk ready!

Name Link
🔨 Latest commit 3ba3ff8
🔍 Latest deploy log https://app.netlify.com/projects/hypermarkk/deploys/6984020b54170e0008233c8b
😎 Deploy Preview https://deploy-preview-12--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 f2bc5f3 into main Feb 5, 2026
5 of 19 checks passed
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