Bug: UI Text Overflow / Container Break on Large Custom Credit Input

Open 💬 0 comments Opened Jul 11, 2026 by jasgigli

UI Overflow Bug When Entering Extremely Large Credit Values

Codex

Subscription

Free

Platform

Operating System: Microsoft Windows 10 Pro
Version: 10.0.19045 (Build 19045)

---

Bug Description

When entering an extremely large integer into the custom credit amount field under the "Other" payment option, the UI fails to constrain the calculated price string.

As the calculated PKR value grows, the text overflows its container, shifts outside the intended layout, and overlaps adjacent UI elements, including the "credits" label and the modal boundaries.

The validation message "Enter a whole number of credits" is displayed, but the layout continues to break while the value is being evaluated.

---

Steps to Reproduce

  1. Open the One-time Credit Purchase modal (for example, after running out of usage credits).
  2. Select the Other option to enable the custom credit input field.
  3. Enter an extremely large integer, for example:
99999999999999999999999999999999999999999999999999
  1. Observe the calculated PKR value beneath the input field.

---

Actual Behavior

  • The calculated PKR amount expands indefinitely.
  • The text is not constrained by its container.
  • The value overflows the modal layout.
  • The calculation shifts to the left and overlaps surrounding labels and UI elements.
  • The validation message "Enter a whole number of credits" appears, but the layout remains visually broken.

---

Expected Behavior

The UI should safely handle excessively large numeric input without breaking the layout.

Possible improvements include:

  • Restricting the maximum input length (maxLength) or enforcing a reasonable numeric limit.
  • Clamping values that exceed supported numeric ranges.
  • Applying proper overflow handling to the calculated amount, for example:
  • overflow: hidden
  • text-overflow: ellipsis
  • white-space: nowrap
  • Alternatively, display extremely large values using scientific notation or a shortened format.
  • Ensure the calculated amount always remains within the modal boundaries regardless of input size.

---

Additional Information

  • Current Balance: PKR 0
  • The issue occurs before clicking Continue to Checkout.
  • A screenshot demonstrating the UI overflow has been attached to this report.

<img width="1362" height="760" alt="Image" src="https://github.com/user-attachments/assets/b9e7eae7-384b-43f8-87b9-225f6c3815e1" />

View original on GitHub ↗