patch.com - Small allocated space for “Show” button text in “Password” field

[softvision-oana-arbuzov]

URL: https://patch.com/login

Browser / Version: Firefox Nightly 67.0a1 (2019-03-11)
Operating System: Samsung Galaxy S7 Edge (Android 8.0.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)
Tested Another Browser: Yes

Problem type: Design is broken
Description: Small allocated space for “Show” button text in “Password” field
Steps to Reproduce:
1. Navigate to https://patch.com/login
2. Observe “Show” button text.

Expected Behavior:
The text is fully visible.

Actual Behavior:
The text is displayed cropped.

Note
1. Not reproducible on Chrome 72.0.3626.121.
2. Screenshot attached.
Affected area:

<button type="button" class="bg-light btn btn-link link-unstyled outline-0 rounded-0 text-secondary">
              Show
</button>

Watchers:
@softvision-oana-arbuzov
@softvision-sergiulogigan
@cipriansv

sv;

Browser Configuration

• None

From webcompat.com with ❤️

[karlcow]

@softvision-oana-arbuzov on a pixel 2 I can't reproduce.
Nightly 68.0a1 2019-03-24 Android 9

[softvision-oana-arbuzov]

@karlcow , indeed the issue seems to work on Pixel mobile device (Google Pixel (Android 9) - 1080 x 1920 pixels (~441 ppi pixel density)), but it is broken on other mobile devices (LG G5 (Android 7.0) - 1440 x 2560 pixels (~554 ppi pixel density), Samsung Galaxy S7 Edge (Android 8.0.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)).

Tested with:
Browser / Version: Firefox Nightly 68.0a1 (2019-03-26)

[karlcow]

on RDM I can reproduce if I set the width of the viewport to be around 318px. The minimal size when the Show disappears is when we hit around 338px.

<section class="align-items-start d-flex flex-column mb-4" __devtools_outlined="true">
  <section class="bg-light border border-gray d-flex overflow-hide rounded w-100">
    <input data-hj-whitelist="" autocomplete="current-password" placeholder="Password" required="required" type="password" class="bg-light border-0 post-input-field outline-0 px-4 py-3 rounded w-100">
    <button type="button" class="bg-light btn btn-link link-unstyled outline-0 rounded-0 text-secondary">Show</button>
  </section>
  <!---->
</section>

Basically these are flexbox with minimal sizes.

And you can see the input for password is clamped.

So there seems to be an intrisic size which I can't collapse more.

This is the change they need.

/* css_rXEF46DN8kG9OU8kpsZZz6eUJZ66Gw1BvaxNuAIR_tE.css | https://patch.com/sites/default/files/css/css_rXEF46DN8kG9OU8kpsZZz6eUJZ66Gw1BvaxNuAIR_tE.css */

.post-input-field {
  min-width: 0;
}

so we can go from

to

And this is probably https://bugzilla.mozilla.org/show_bug.cgi?id=1136312

Pushing to needscontact and at the same time adding to this bugzilla

[karlcow]

Also this is the context for the input issue.
This would happen also in Chrome if the window was smaller.
https://bugzilla.mozilla.org/show_bug.cgi?id=1302834

[softvision-oana-arbuzov]

The issue has been fixed.

Tested with:
Browser / Version: Firefox Nightly 68.3a1 (2019-11-12), Firefox Preview Nightly 191109 (🦎: 72.0a1-20191105095755)
Operating System: Huawei P20 Lite (Android 8.0.0) - 1080 x 2280 pixels, 19:9 ratio (~432 ppi density), Samsung Galaxy S7 Edge (Android 8.0.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

[lock]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.