Skip to content

[RTE] Formula/special characters popup overflows viewport in non-overflowable RTE containers #5957

@AlexVelezLl

Description

@AlexVelezLl

This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Target branch: unstable

Observed behavior

When opening the formula/special characters editor in the TipTap RTE (TipTapEditor component) inside a container that does not have enough height, the popup overflows the viewport vertically. The Insert button at the bottom of the popup is cut off and unreachable, making it impossible to insert a formula without resizing the window.

This is currently reproducible on unstable where the assessment item card is shorter than on production. It does not reproduce on production because the taller card pushes the RTE higher up, leaving enough room for the popup. However, the underlying issue affects any non-overflowable container that renders the RTE — the popup has no mechanism to stay within the viewport when there is insufficient space below.

Grabacion.de.pantalla.2026-06-03.a.la.s.4.12.06.p.m.mov

Errors and logs

N/A — layout/overflow issue with no error output.

Expected behavior

The formula/special characters popup should always be fully visible and interactable regardless of the available height of its container. The Insert button should always be reachable without requiring the user to resize the window.

User-facing consequences

  • Users cannot insert formulas or special characters when the RTE is rendered in a container without enough height, as the Insert button is inaccessible.

Steps to reproduce

  1. Open Studio on unstable.
  2. Create or open an exercise and navigate to the Questions tab.
  3. Open an assessment item and focus on any RTE field (e.g. question body).
  4. Click the formula/special characters button (Σ) in the RTE toolbar.
  5. Observe that the popup overflows the bottom of the viewport and the Insert button is not visible or reachable.

Context

  • Reproducible on unstable with a 1280×720 viewport.
  • Does not reproduce on production because the assessment item card is taller, but the underlying issue affects any non-overflowable container rendering the RTE, more relevant in unstable where the new editor will be shorter.

Acceptance Criteria

  • The formula/special characters popup is fully visible and the Insert button is always reachable when opening the editor from any RTE field, regardless of the container's available height.
  • The fix works at 1280×720 viewport on the assessment item editor on unstable.
  • The popup does not overflow the viewport in any non-overflowable container rendering the RTE.

AI usage

Drafted with Claude Code. Reproduction steps and acceptance criteria were reviewed and confirmed manually.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions