Skip to content
This repository was archived by the owner on Jan 30, 2026. It is now read-only.

feat: implement viewport clamping for menu positioning#10

Merged
caio-pizzol merged 1 commit intomainfrom
cursor/SD-546-clamp-menu-position-to-viewport-b801
Oct 9, 2025
Merged

feat: implement viewport clamping for menu positioning#10
caio-pizzol merged 1 commit intomainfrom
cursor/SD-546-clamp-menu-position-to-viewport-b801

Conversation

@caio-pizzol
Copy link
Contributor

This commit adds a new utility function, clampToViewport, to ensure that the menu is positioned within the visible area of the viewport. The function adjusts the menu's coordinates based on predefined padding and approximate dimensions, enhancing the user experience by preventing overflow.

…plateBuilder

This commit adds a new utility function, clampToViewport, to ensure that the menu is positioned within the visible area of the viewport. The function adjusts the menu's coordinates based on predefined padding and approximate dimensions, enhancing the user experience by preventing overflow.
@linear
Copy link

linear bot commented Oct 9, 2025

SD-546 Fix menu positioning near viewport edges

Summary

Clamp menu position to viewport bounds so menu doesn't appear off-screen when trigger is near window edges

Tasks

  • Create simple viewport boundary checking function
  • Apply clamping to menu position before setting state
  • Test trigger near all four viewport edges
  • Verify menu stays visible and properly positioned

Notes

Problem: When user types trigger near right/bottom edge of viewport, menu appears partially or fully off-screen

Current code (src/index.tsx):

const coords = e.view.coordsAtPos(from);
const bounds = new DOMRect(coords.left, coords.top, 0, 0);
setMenuPosition(bounds); // No boundary checking

Simple fix (don't over-engineer):

const clampToViewport = (rect: DOMRect): DOMRect => {
  const menuWidth = 250; // Approximate menu width
  const menuHeight = 300; // Approximate menu height
  
  const left = Math.min(
    rect.left,
    window.innerWidth - menuWidth - 10 // 10px padding
  );
  
  const top = Math.min(
    rect.top,
    window.innerHeight - menuHeight - 10
  );
  
  return new DOMRect(Math.max(left, 10), Math.max(top, 10), 0, 0);
};

// Usage
const coords = e.view.coordsAtPos(from);
const bounds = clampToViewport(new DOMRect(coords.left, coords.top, 0, 0));
setMenuPosition(bounds);

Don't:

  • Calculate actual menu dimensions (expensive)
  • Add complex positioning logic (top/left/right/bottom)
  • Use portal/overlay libraries

Do: Simple hard-coded approximations work fine for 99% of cases

@caio-pizzol caio-pizzol enabled auto-merge (squash) October 9, 2025 19:30
@caio-pizzol caio-pizzol merged commit 09e82ee into main Oct 9, 2025
2 checks passed
@caio-pizzol caio-pizzol deleted the cursor/SD-546-clamp-menu-position-to-viewport-b801 branch October 9, 2025 19:31
@superdoc-bot
Copy link
Contributor

superdoc-bot bot commented Oct 9, 2025

🎉 This PR is included in version 0.2.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

superdoc-bot bot pushed a commit that referenced this pull request Nov 13, 2025
# [0.2.0](v0.1.0...v0.2.0) (2025-11-13)

### Bug Fixes

* force pre-release ([f752754](f752754))
* improve cleanup logic ([#11](#11)) ([01f0bf9](01f0bf9))
* update field ID type and improve field handling ([#14](#14)) ([e0e6d31](e0e6d31))
* update field IDs and categories in README and App component ([61a473d](61a473d))

### Features

* add import functionality for .docx files in the template builder ([#15](#15)) ([42faccc](42faccc))
* enhance exportTemplate functionality with configurable options ([#17](#17)) ([7e2a03d](7e2a03d))
* enhance field handling with mode support in template builder ([#16](#16)) ([d46ab5d](d46ab5d))
* implement viewport clamping for menu positioning in SuperDocTemplateBuilder ([#10](#10)) ([09e82ee](09e82ee))
@superdoc-bot
Copy link
Contributor

superdoc-bot bot commented Nov 13, 2025

🎉 This PR is included in version 0.2.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

caio-pizzol pushed a commit that referenced this pull request Jan 30, 2026
* chore(release): 0.2.0 [skip ci]

# [0.2.0](v0.1.0...v0.2.0) (2025-11-13)

### Bug Fixes

* force pre-release ([f752754](f752754))
* improve cleanup logic ([#11](#11)) ([01f0bf9](01f0bf9))
* update field ID type and improve field handling ([#14](#14)) ([e0e6d31](e0e6d31))
* update field IDs and categories in README and App component ([61a473d](61a473d))

### Features

* add import functionality for .docx files in the template builder ([#15](#15)) ([42faccc](42faccc))
* enhance exportTemplate functionality with configurable options ([#17](#17)) ([7e2a03d](7e2a03d))
* enhance field handling with mode support in template builder ([#16](#16)) ([d46ab5d](d46ab5d))
* implement viewport clamping for menu positioning in SuperDocTemplateBuilder ([#10](#10)) ([09e82ee](09e82ee))

* chore(release): 0.3.0 [skip ci]

# [0.3.0](v0.2.0...v0.3.0) (2025-11-21)

### Bug Fixes

* add deduplication for React dependencies in Vite config and clean up package.json ([dc17f23](dc17f23))
* add missing deployment ID in GitHub Pages workflow ([e350b3b](e350b3b))
* update SuperDoc initialization with document mode and enhance Vite config external dependencies ([9e0989a](9e0989a))

### Features

* add getSuperDoc method for accessing SuperDoc API ([#18](#18)) ([ccda4e0](ccda4e0))
* enhance field management with grouping and improved UI ([#19](#19)) ([a64e8b8](a64e8b8))

* chore(release): 0.4.0 [skip ci]

# [0.4.0](v0.3.0...v0.4.0) (2025-12-11)

### Bug Fixes

* disable comments module + sd update ([#22](#22)) ([79d24c7](79d24c7))
* remove dedupe + add dev react runtime ([#20](#20)) ([830b009](830b009))

### Features

* onexport callback ([#21](#21)) ([c85abc1](c85abc1))

* chore(release): 0.5.0 [skip ci]

# [0.5.0](v0.4.0...v0.5.0) (2025-12-16)

### Bug Fixes

* demo app ([461c620](461c620))
* demo with dedupe ([75c4184](75c4184))

### Features

* add mode to field def + move from metadata ([4141fda](4141fda))

* chore(release): 1.0.0 [skip ci]

# [1.0.0](v0.5.0...v1.0.0) (2026-01-16)

* Breaking change: migrate template builder to SuperDoc v1 ([#24](#24)) ([78af7cc](78af7cc))

### BREAKING CHANGES

* - Upgraded `superdoc` to version `1.5.0-next.7` in both `package.json` and `pnpm-lock.yaml`.
- Updated React and React DOM versions to `19.2.3`.
- Enhanced performance by using `useMemo` for toolbar settings and scheduling callbacks with `queueMicrotask` to avoid blocking rendering.
- Various dependency updates in `pnpm-lock.yaml` for improved compatibility and security.

* chore: update superdoc version to 1.5.0 in package.json and pnpm-lock.yaml

* refactor: streamline field update callbacks in SuperDocTemplateBuilder

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: semantic-release-bot <semantic-release-bot@martynus.net>
Co-authored-by: Caio Pizzol <caiopizzol@icloud.com>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant