fix(super-editor): flip tooltip when clipped by viewport by dani-beltran · Pull Request #3836 · superdoc/docx-editor

dani-beltran · 2026-07-17T23:37:37Z

Tooltip positioning wasn't detecting viewport collisions, it only clamped horizontally, so tooltips could still overflow on top.

This PR fixes the issue, while also refactoring some other components using the same duplicated logic. Also created a repro test for the bug.

Before	After

Refactor notes:

Extracted the positioning logic into a standalone util function to reduce component complexity and avoid duplicated code.
SdTooltip, FontFamilyCombobox and ToolbarDropdown, all share the new utility for positioning
Expanded the utility to support additional alignments (bottom-start, bottom-end, etc.) to match FontFamilyCombobox's alignment behavior
Added support for calculating available space to fit dropdown height, needed by ToolbarDropdown
Added support for boundary elements in contrast to just using the viewport as the boundary. Could be useful for components like ContextMenu that depend on the editor container and not the viewport. Not implemented here though, since ContextMenu uses a specific plugin for this type of logic.
Added unit tests for the new utility functions

Demo of how FontFamilyCombobox and ToolbarDropdown components behave after the change. They retain the same behavior as before. 👇

qodo-code-review · 2026-07-17T23:37:41Z

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 0967f00061

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

chatgpt-codex-connector · 2026-07-17T23:40:54Z

+    case 'top-start':
+      top = triggerRect.top - contentHeight - offset;


Clamp flipped long dropdowns to the viewport

When a bottom-start dropdown flips upward, this subtracts the full content height before callers apply the new maxHeight; for example the existing long-menu case with a 500px menu, trigger top=260, and only 248px available above computes top=-244px, then renders a 248px-tall menu mostly offscreen. Use the constrained render height or clamp to the gutter as the previous dropdown code did, otherwise long toolbar/font dropdowns near the bottom still get clipped after flipping.

Useful? React with 👍 / 👎.

dani-beltran · 2026-07-17T23:44:22Z

 .fade-in-scale-up-transition-enter-active,
 .fade-in-scale-up-transition-leave-active {
-  transform-origin: bottom center;
+  transform-origin: center;


I changed the animation origin to be position agnostic, since the tooltip could be now on top or bottom positions. It looks good, barely noticeable difference. However, this is modifying the original animation, so I am considering changing it.

I added a simple solution to make the animation origin match the dynamic tooltip position. 🟢

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: c7b4b2b2a9

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

chatgpt-codex-connector · 2026-07-18T00:41:20Z

+  const { placement = 'top', offset = 0, flip = true } = options;
+  const triggerRect = triggerElem.getBoundingClientRect();
+  const contentWidth = contentElem.offsetWidth;
+  const contentHeight = contentElem.offsetHeight;


Use scrollHeight when deciding dropdown flips

For toolbar/font dropdowns, menuPosition.maxHeight is kept in component state after a close, so the element created on the next open can already be constrained by the previous max-height. Measuring offsetHeight here then uses the clipped height rather than the full menu height; for example a 500px menu reopened near the bottom with a stale 120px maxHeight and 200px below/400px above will no longer flip upward, leaving the long menu clipped below. The previous inline dropdown logic used scrollHeight for this decision, so this should measure the scrollable height with an offset fallback.

Useful? React with 👍 / 👎.

Sure, but using scrollHeight instead of offsetHeight will mess up content components that are not dropdowns. I will add some way of detecting that is a dropdown or add a parameter in the function to indicate it is.

Fixed 🟢! I added a way of detecting if the content element is a scrollable component like the dropdown.

chatgpt-codex-connector

💡 Codex Review

https://github.com/superdoc-dev/superdoc/blob/488f8eaa8ff40f75e5aa6a1cb3348f1576faebad/packages/super-editor/src/editors/v1/components/toolbar/FontFamilyCombobox.vue#L109
Clamp using the widened font popup width

When the font list first opens, menuPosition.minWidth is still 0px, so getAnchoredPosition() can measure and clamp the popup using a width smaller than the trigger. This line then widens the popup to rect.width; for a combobox near the right viewport edge with short font names, the final right edge can overflow even though the old code clamped against rect.width. Clamp with an effective width of at least the trigger width, or recompute after applying the min width.

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

dani-beltran · 2026-07-21T23:50:13Z

💡 Codex Review

https://github.com/superdoc-dev/superdoc/blob/488f8eaa8ff40f75e5aa6a1cb3348f1576faebad/packages/super-editor/src/editors/v1/components/toolbar/FontFamilyCombobox.vue#L109

Clamp using the widened font popup width
When the font list first opens, menuPosition.minWidth is still 0px, so getAnchoredPosition() can measure and clamp the popup using a width smaller than the trigger. This line then widens the popup to rect.width; for a combobox near the right viewport edge with short font names, the final right edge can overflow even though the old code clamped against rect.width. Clamp with an effective width of at least the trigger width, or recompute after applying the min width.

ℹ️ About Codex in GitHub

This is not really happening.
For bottom-start, left is set to triggerRect.left
After applying minWidth = triggerWidth, the popup's right edge lands at triggerRect.right the same as the trigger. If the trigger isn't overflowing, neither will the popup. The review's concern doesn't hold.

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 711d00be09

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

chatgpt-codex-connector · 2026-07-28T10:34:56Z

+  placement: Placement,
+  options: { offset?: number; boundary?: HTMLElement | null } = {},
+) => {
+  const { offset = 0, boundary = null } = options;


Pass the gap as an options object

Every call site introduced here passes a numeric third argument to this helper (..., computedPlacement, gap), and the new offset tests do the same, but destructuring a number treats it like an empty options object so offset always falls back to 0. When toolbar/font dropdowns open near the viewport edge, their top includes the 4px gap while maxHeight does not subtract it, so the menu can still render into the gutter/clip; accept numeric offsets or update the callers to pass { offset: gap }.

Useful? React with 👍 / 👎.

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 09e1ab2112

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

chatgpt-codex-connector · 2026-07-28T10:55:00Z

+  const availableAbove = Math.max(0, aboveBottom - GUTTER);
+  const availableLeft = Math.max(0, rect.left - offset - GUTTER);
+  const availableRight = Math.max(0, getBoundaryRight(boundary) - rect.right - offset - GUTTER);


Respect the boundary origin when measuring space

When a boundary element is supplied (the context menu now passes the editor surface), this still measures availableAbove from viewport 0 instead of from boundary.getBoundingClientRect().top (and availableLeft has the same issue). In an editor surface that starts below the top of the viewport, a menu opened near the lower part of a short surface can flip upward because this counts space outside the editor; the returned top is then clamped to the viewport gutter rather than the surface, so the context menu can still render above/outside the editor boundary. Use the boundary rect's top/left as the lower clamps and subtract them from the available-space calculations.

Useful? React with 👍 / 👎.

…ndow anymore

…n utility fns

…tion utility fns

… outside viewport

…ositioning

…ioning utils

…eters

…d to boundaries

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: a04b194217

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

chatgpt-codex-connector · 2026-07-28T12:53:01Z

+  const menuPosRect = new DOMRect(parsedX, parsedY, 0, 0);
+  const { left, top } = getAnchoredPosition(menuPosRect, menuRef.value, {
+    placement: 'bottom-start',
+    offset: 0,
+    boundary: getEditorSurfaceElement(props.editor),


Preserve containing-block coordinates for context menus

When the editor lives under an ancestor that creates a fixed-position containing block, the context-menu plugin intentionally converts the emitted menuPosition into containing-block-relative CSS coordinates before this component receives it (see context-menu.js around the findContainingBlockAncestor adjustment). This new DOMRect treats those adjusted coordinates as viewport coordinates and compares them to the editor surface's viewport getBoundingClientRect(), so near the bottom of a transformed/contained editor it overestimates the space below and fails to flip/clamp the menu. Convert the point back to viewport coordinates for collision detection, or keep both the point and boundary in the same coordinate space before assigning the returned CSS left/top.

Useful? React with 👍 / 👎.

ContextMenu uses a specific plugin already handling the positioning logic and changing it will increase the complexity of this PR too much. So I reverted changes to ContextMenu.

cubic-dev-ai

All reported issues were addressed across 7 files

_{Reply with feedback, questions, or to request a fix.

Re-trigger cubic}

…unt for calculating positioning

… layout reads

dani-beltran requested a review from a team as a code owner July 17, 2026 23:37

superdoc-bot Bot added review: quick community labels Jul 17, 2026

chatgpt-codex-connector Bot reviewed Jul 17, 2026

View reviewed changes

dani-beltran commented Jul 17, 2026

View reviewed changes

chatgpt-codex-connector Bot reviewed Jul 18, 2026

View reviewed changes

dani-beltran mentioned this pull request Jul 20, 2026

fix(super-editor): flip toolbar tooltip below trigger when clipped by viewport top #3832

Open

4 tasks

chatgpt-codex-connector Bot reviewed Jul 20, 2026

View reviewed changes

chatgpt-codex-connector Bot reviewed Jul 28, 2026

View reviewed changes

dani-beltran force-pushed the main branch from 711d00b to 09e1ab2 Compare July 28, 2026 10:50

chatgpt-codex-connector Bot reviewed Jul 28, 2026

View reviewed changes

dani-beltran added 13 commits July 28, 2026 14:46

fix(super-editor): toolbar tooltips are not cut off by edge of the wi…

85ca5d4

…ndow anymore

chore(super-editor): refactor ToolbarDropdown to use anchored-positio…

9280d31

…n utility fns

chore(super-editor): refactor FontFamilyCombobox to use anchored-posi…

98aaca6

…tion utility fns

chore(super-editor): added test for the SdTooltip fliping fix

692cca4

chore(super-editor): added test for anchored-position utility fns

bde822f

fix(super-editor): avoid edge case where popover positioning could go…

efcc505

… outside viewport

fix(super-editor): measuring full menu height for dropdowns dynamic p…

b27f96e

…ositioning

fix(super-editor): tooltip animation origin matches its position

ce793a3

chore(super-ditor): removed unnecesary code

09a2bca

fix(super-editor): context menu no more clipping outside editor

38aea83

chore(super-editor): update tests for components using anchored posit…

1118b3f

…ioning utils

chore(super-editor): added tests for anchored-position util new param…

6a5c6f1

…eters

fix(super-editor): positioning available space on top and left update…

a04b194

…d to boundaries

dani-beltran force-pushed the main branch from f0453f2 to a04b194 Compare July 28, 2026 12:47

chatgpt-codex-connector Bot reviewed Jul 28, 2026

View reviewed changes

chore(super-editor): restored context menu original behaviour

2edbe98

dani-beltran requested a review from a team as a code owner July 30, 2026 15:58

cubic-dev-ai Bot reviewed Jul 30, 2026

View reviewed changes

dani-beltran added 4 commits July 30, 2026 19:46

fix(super-editor): anchored position function take boundary into acco…

49be664

…unt for calculating positioning

chore(super-editor): update anchored position util tests

49b2547

fix(super-editor): flip anchored position for the secondary axis as well

5ff59f6

chore(super-editor): refactor font family combobox to avoid redundant…

58e18f0

… layout reads

		case 'top-start':
		top = triggerRect.top - contentHeight - offset;

Uh oh!

Conversation

dani-beltran commented Jul 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

qodo-code-review Bot commented Jul 17, 2026

Qodo reviews are paused for this user.

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Jul 17, 2026

Choose a reason for hiding this comment

Uh oh!

dani-beltran Jul 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dani-beltran Jul 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dani-beltran Jul 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Jul 18, 2026

Choose a reason for hiding this comment

Uh oh!

dani-beltran Jul 18, 2026

Choose a reason for hiding this comment

Uh oh!

dani-beltran Jul 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

dani-beltran commented Jul 21, 2026

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Jul 28, 2026

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Jul 28, 2026

Choose a reason for hiding this comment

Uh oh!

dani-beltran Jul 29, 2026

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Jul 28, 2026

Choose a reason for hiding this comment

Uh oh!

dani-beltran Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dani-beltran commented Jul 17, 2026 •

edited

Loading

dani-beltran Jul 18, 2026 •

edited

Loading

dani-beltran Jul 17, 2026 •

edited

Loading

dani-beltran Jul 20, 2026 •

edited

Loading

dani-beltran Jul 20, 2026 •

edited

Loading

dani-beltran Jul 30, 2026 •

edited

Loading

cubic-dev-ai Bot left a comment •

edited

Loading