www.namecheap.com - "Search" icon is displayed misaligned

[softvision-oana-arbuzov]

URL: https://www.namecheap.com/domains/registration/results/?domain=ixnay

Browser / Version: Firefox Nightly 201105 (🦎 84.0a1-20201104095518)
Operating System: Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density), Huawei P20 Lite (Android 8.0.0) - 1080 x 2280 pixels, 19:9 ratio (~432 ppi density)
Tested Another Browser: Yes Chrome

Problem type: Design is broken
Description: Items are misaligned
Steps to Reproduce:

1. Navigate to https://www.namecheap.com/domains/registration/results/?domain=ixnay
2. Observe the "Search" icon.

Expected Behavior:
"Search" icon is displayed correctly in the allocated area.

Actual Behavior:
"Search" icon is displayed misaligned, exceeds the allocated area.

Notes:

1. Screenshot attached.
2. The issue is not reproducible on Chrome.

Affected area:

<section class="standard">
	<form>
		<div>
			<input type="text" id="search-query" placeholder="Search for domains ..." value="ixnay">
				<button type="button">Beast Mode</button>
				<button type="submit">Search</button>
				<button type="button" class="filter-toggle">Explore more</button>
			</div>
		</form>
		<article class="domain-com available">
			<div class="name">
				<h2>ixnay.com</h2>
				<span class="label premium">Premium
					<span style="margin-left: 43.85px;">We offer high value Premium inventory through our registry and aftermarket partners. Premium domain names are usually valued higher because they are brandable keywords, short in length, and/or dictionary words.</span>
				</span>
			</div>
			<div class="price">
				<strong>$9,680.00</strong>
				<small>Renews at $8.88/yr</small>
			</div>
			<button type="button" class="available">Add to cart</button>
		</article>
		<div style="height: 0px; visibility: hidden;" class="collapse-css-transition --is-collapsed"></div>
</section>

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:

#react-nc-search .standard > form input {
    border: 0 none;
    color: #4d4a48;
    flex-grow: 1;
    font-size: 16px;
    font-weight: 700;
    padding: 0;
    min-width: 0;
}