<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Web Inspector: console search bar jumps, behaves poorly at narrow widths"
href="https://bugs.webkit.org/show_bug.cgi?id=164047">164047</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Web Inspector: console search bar jumps, behaves poorly at narrow widths
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>WebKit Nightly Build
</td>
</tr>
<tr>
<th>Hardware</th>
<td>All
</td>
</tr>
<tr>
<th>OS</th>
<td>All
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Web Inspector
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>bburg@apple.com
</td>
</tr>
<tr>
<th>CC</th>
<td>bburg@apple.com, joepeck@webkit.org, mattbaker@apple.com, nvasilyev@apple.com, timothy@apple.com, webkit-bug-importer@group.apple.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=292977" name="attach_292977" title="narrow-console-sad.mov">attachment 292977</a> <a href="attachment.cgi?id=292977&action=edit" title="narrow-console-sad.mov">[details]</a></span>
narrow-console-sad.mov
See the video.
- The find field should not move around while typing. This is really jarring.
- If there are results, the "NN results" text will push the text field to the right, making trash can and chevron to be hidden.
- If the window is quite narrow, the "NN results" text will take up too much space and cause the filter bar to be hidden.
If anything, we should consider moving the find banner to resemble find-in-page, to show up below the console bar. There's really no good way to make the text bar not jump around when it's in the middle of a flexbox context.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>