<p></p>
<p>Checking again, the difference of width is due to the scrollbar when the results are displayed. So it also happens between empty search and search with results.</p>
<p>What do you mean by realistic?</p>
<p>On the technical side, most of the stuff should be pretty straightforward:</p>
<ul>
<li>as the bootstrap icon set were missing way of locomotions, I got car, bicyle, and pedestrian <a href="https://gitlab.gnome.org/Teams/Design/icon-development-kit" rel="nofollow">icons from GNOME</a></li>
<li>those 3 icons would be put in a group of 3 <a href="https://getbootstrap.com/docs/5.0/forms/checks-radios/#radio-toggle-buttons" rel="nofollow">radio toggle buttons</a> or <a href="https://getbootstrap.com/docs/4.6/components/button-group/" rel="nofollow">button groups</a></li>
<li>other widgets are basic buttons and dropdown</li>
</ul>
<p>The heaviest work I see is with the input fields:</p>
<ul>
<li>having a location <a href="https://getbootstrap.com/docs/5.0/forms/input-group/" rel="nofollow">icon at the start</a> should not be a problem, but not sure how hard it would be to make it draggable</li>
<li>styling of the search results may also need some attention</li>
</ul>
<p>If by realistic you mean something which integrates well with the rest of the site, one thing to consider is we don't really have guidelines nor a cohesive set of patterns and styles to rely on.</p>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />You are receiving this because you are subscribed to this thread.<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/issues/3123#issuecomment-803141517">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLJVJIRTQNCIKGEJ26DTEO6EHANCNFSM4YVZYUJA">unsubscribe</a>.<img src="https://github.com/notifications/beacon/AAK2OLLDFIJQDWZ2KJOQQ5TTEO6EHA5CNFSM4YVZYUJKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOF7PPPDI.gif" height="1" width="1" alt="" /></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/issues/3123#issuecomment-803141517",
"url": "https://github.com/openstreetmap/openstreetmap-website/issues/3123#issuecomment-803141517",
"name": "View Issue"
},
"description": "View this Issue on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>