<div style="display: flex; flex-wrap: wrap; white-space: pre-wrap; align-items: center; "><img height="20" width="20" style="border-radius:50%; margin-right: 4px;" decoding="async" src="https://avatars.githubusercontent.com/u/4158490?s=20&v=4" /><strong>AntonKhorev</strong> left a comment <a href="https://github.com/openstreetmap/openstreetmap-website/pull/5960#issuecomment-2845105935">(openstreetmap/openstreetmap-website#5960)</a></div>
<p dir="auto">Why do we need the <em>Go</em> button at all? One scenario is when the user closes the directions panel by clicking this close button:<br>
<a href="https://github.com/user-attachments/assets/0b62f84c-b182-4c1e-a369-b442fcf30e45">image.png (view on web)</a></p>
<p dir="auto">Why would the user do that? Maybe they're on a slow connection and don't want extra route requests while they're moving the markers around and changing the routing options.^{<a href="#user-content-fn-1-e7518aab96416341db0e6cc5c14e4da8" id="user-content-fnref-1-e7518aab96416341db0e6cc5c14e4da8" data-footnote-ref="" aria-describedby="footnote-label">1</a>} When they're done with markers and options, they can click <em>Go</em> and make the directions panel reappear. So <em>Go</em> = <em>Show Directions (again)</em>. In this case it makes sense for this button to be where the panel is supposed to be, that is below the form. And if the form was closed in the scenario described in this paragraph, the button should be visible because nobody would figure out they need to tab to it.</p>
<p dir="auto">But we wanted to hide the button, right? We can hide it if one of these is true:</p>
<ul dir="auto">
<li>one or both endpoints are not ready</li>
<li>the directions panel is visible</li>
</ul>
<p dir="auto">Then normally users won't see the <em>Go</em> button. And when they'll see it, it's because the directions are not shown; in this case it doesn't take away the screen space from the direcions.</p>
<p dir="auto">Showing <em>Go</em> below the form avoids the problems of having to squeeze it into the side and resizing/moving other inputs/buttons to make space for it. We don't even know how wide <em>Go</em> is because of i18n.</p>
<section data-footnotes="" class="footnotes"><h2 id="footnote-label" class="sr-only" dir="auto">Footnotes</h2>
<ol dir="auto">
<li id="user-content-fn-1-e7518aab96416341db0e6cc5c14e4da8">
<p dir="auto">Currently the panel reappears when the options are changed, but it probably shouldn't. <a href="#user-content-fnref-1-e7518aab96416341db0e6cc5c14e4da8" data-footnote-backref="" aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p>
</li>
</ol>
</section>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/5960#issuecomment-2845105935">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLJ33IOQLI5VGE7FQV324I62HAVCNFSM6AAAAAB37DIPG2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQNBVGEYDKOJTGU">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLLJ64I6J2I6GVPQ5RD24I62HA5CNFSM6AAAAAB37DIPG2WGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTVJSTPQ6.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/pull/5960/c2845105935</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>

<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/5960#issuecomment-2845105935",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/5960#issuecomment-2845105935",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>