play.sabai99.com - Text exceeds the allocated field in the "Mobile phone" field

[softvision-oana-arbuzov]

URL: https://play.sabai99.com/

Browser / Version: Firefox 83.0
Operating System: Windows 10
Tested Another Browser: Yes Chrome

Problem type: Design is broken
Description: Items not fully visible
Steps to Reproduce:

1. Navigate to https://play.sabai99.com/
2. Click "Account" button.
3. Observe "Mobile phone" field.

Expected Behavior:
The text is displayed in the allocated space.

Actual Behavior:
The text exceeds the allocated space of the popup.

Notes:

1. Screenshot attached.
2. The issue is not reproducible on Chrome.
3. The issue is reproducible both on mobile and desktop.
4. The issues is reproducible also when filling in the field.

Affected area:

<input type="tel" autocomplete="on" id="" maxlength="25" name="telephone" placeholder="กรุณาใส่หมายเลขโทรศัพท์ของคุณ" tabindex="0" class="vti__input">

Watchers:
@softvision-oana-arbuzov
@cipriansv

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[ksy36]

This looks like a duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1585485

Adding min-width: 0; to the input style fixes the issue:

.selectWrapper select, input[type="number"], input[type="password"], input[type="tel"], input[type="text"] {
    border: 0;
    color: #fff;
    background-color: #3b144d;
    font-size: 16px;
    width: 100%;
    height: 28px;
    border-radius: 6px;
    outline: 0;
}

[denschub]

Bug 1585485 got patched in December 2020. The site appears to be fine now, even though it's horribly slow (but it's just as slow in Chrome, so...)

[softvision-oana-arbuzov]

Indeed the issue no longer occurs.

Tested with:
Browser / Version: Firefox Nightly 97.0a1 (2021-12-06)
Operating System: Windows 10 Pro