Note card deforms instead of repositioning at screen edges

[kookyleo]

Bug Report

Description

On small screens, when a note card is displayed near the screen edge, it deforms (gets squeezed) to fit within the viewport constraints. The expected behavior is to reposition the card in the opposite direction instead of deforming it.

Current Behavior

• Note card appears near screen edge
• Card width/height is compressed to fit available space
• Content becomes cramped and harder to read

Expected Behavior

• Note card should maintain its original dimensions
• When constrained by screen edge, card should shift position in the opposite direction
• For example:
  • If card would overflow right edge → shift left
  • If card would overflow bottom edge → shift up
  • If card would overflow left edge → shift right
  • If card would overflow top edge → shift down

Steps to Reproduce

1. Open the application on a small screen or narrow browser window
2. Highlight text near the edge of the viewport
3. Add a note to create a note card
4. Observe the card is deformed/squeezed instead of repositioned

Technical Notes

• Issue likely in note card positioning logic
• Need to check boundary detection and adjustment code
• Should calculate available space and reposition before rendering
• May need to implement smart positioning with fallback directions

Related Code

• assets/js/managers/note-manager.js - Note popup positioning
• Possibly other card/popup components with similar issues