doc.rust-lang.org - "Settings" icon overlaps "Search" field

[softvision-oana-arbuzov]

URL: https://doc.rust-lang.org/std/cmp/macro.PartialOrd.html

Browser / Version: Firefox Preview Nightly 191230 (🦎: 73.0a1-20191227094418), Firefox Nightly 68.4a1 (2019-12-26)
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)
Tested Another Browser: Yes Chrome

Problem type: Design is broken
Description: Items are overlapped

Steps to reproduce:

1. Navigate to https://doc.rust-lang.org/std/cmp/macro.PartialOrd.html
2. Observe the "Search" field.

Expected behavior:
No elements are overlapped. "Search" field is displayed on the left side of "Settings" icon.

Actual behavior:
"Settings" icon overlaps "Search" field.

Notes:

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

Affected area:

<div class="search-container">
	<div>
		<select id="crate-search">
			<option value="All crates">All crates</option>
			<option value="alloc">alloc</option>
			<option value="core">core</option>
			<option value="proc_macro">proc_macro</option>
			<option value="std">std</option>
			<option value="test">test</option>
		</select>
		<input class="search-input" name="search" autocomplete="off" spellcheck="false" placeholder="Click or press ‘S’ to search, ‘?’ for more options…" type="search">
	</div>
	<a id="settings-menu" href="../../settings.html">
		<img src="../../wheel1.40.0.svg" alt="Change settings" width="18">
	</a>
</div>

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

sv;

Browser Configuration

• None

From webcompat.com with ❤️

[ksy36]

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

#crate-search + .search-input {
    border-radius: 0 1px 1px 0;
    width: calc(100% - 32px);
    min-width: 0; 
}

So I think this makes a case for https://bugzilla.mozilla.org/show_bug.cgi?id=1136312

[ksy36]

Actually there is a bug for inputs with percent sizes and "compressible" min-content: https://bugzilla.mozilla.org/show_bug.cgi?id=1585485

[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.