<p></p>
<p><b>@hlfan</b> commented on this pull request.</p>
<hr>
<p>In <a href="https://github.com/openstreetmap/openstreetmap-website/pull/5960#discussion_r2069357067">app/assets/stylesheets/common.scss</a>:</p>
<pre style='color:#555'>> +.directions_form {
+ div {
+ align-items: center;
+ grid-template-columns: 1fr auto;
+ }
+}
+
</pre>
<p dir="auto">I've tried to build this grid layout with display flex (in the <code class="notranslate">d-flex</code> and <code class="notranslate">row</code>/<code class="notranslate">col</code> flavours).<br>
In neither can I get the close button to be in just the right place, aligned with the horizontal center of the mode and provider selectors, <em>and</em> the vertical center of the reverse directions button and the submit button when focused.</p>
<p dir="auto">While I've gotten it working in an HTML table (Bootstrap <code class="notranslate">.table</code> messed up too much), that feels like the wrong direction to move markup-wise. And the markup is quite clunky:</p>
<div class="highlight highlight-text-html-basic" dir="auto"><pre class="notranslate"><span class="pl-kos"><</span><span class="pl-ent">table</span> <span class="pl-c1">class</span>="<span class="pl-s">w-100</span>"<span class="pl-kos">></span>
<span class="pl-kos"><</span><span class="pl-ent">tr</span><span class="pl-kos">></span>
<span class="pl-kos"><</span><span class="pl-ent">td</span> <span class="pl-c1">class</span>="<span class="pl-s">pb-1 pe-1</span>"<span class="pl-kos">></span>
<span class="pl-kos"><</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">align-items-center d-flex gap-2</span>"<span class="pl-kos">></span>
<span class="pl-kos"><</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">btn-group routing_modes</span>" <span class="pl-c1">role</span>="<span class="pl-s">group</span>"<span class="pl-kos">></span>...<span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span>
<span class="pl-kos"><</span><span class="pl-ent">select</span> <span class="pl-c1">class</span>="<span class="pl-s">...</span>" <span class="pl-c1">name</span>="<span class="pl-s">routing_engines</span>"<span class="pl-kos">></span>...<span class="pl-kos"></</span><span class="pl-ent">select</span><span class="pl-kos">></span>
<span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span>
<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span>
<span class="pl-kos"><</span><span class="pl-ent">td</span> <span class="pl-c1">class</span>="<span class="pl-s">pb-1</span>"<span class="pl-kos">></span>
<span class="pl-kos"><</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">align-items-center d-flex flex-column gap-2</span>"<span class="pl-kos">></span>
<span class="pl-kos"><</span><span class="pl-ent">button</span> <span class="pl-c1">type</span>="<span class="pl-s">button</span>" <span class="pl-c1">class</span>="<span class="pl-s">btn-close p-2 rounded-5</span>" <span class="pl-c1">aria-label</span>="<span class="pl-s">Close</span>"<span class="pl-kos">/></span>
<span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span>
<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span>
<span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span>
<span class="pl-kos"><</span><span class="pl-ent">tr</span><span class="pl-kos">></span>
<span class="pl-kos"><</span><span class="pl-ent">td</span> <span class="pl-c1">class</span>="<span class="pl-s">pe-1</span>"<span class="pl-kos">></span>
<span class="pl-kos"><</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">d-flex flex-column gap-1</span>"<span class="pl-kos">></span>
<span class="pl-kos"><</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">align-items-center d-flex</span>"<span class="pl-kos">></span>...<span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span>
<span class="pl-kos"><</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">align-items-center d-flex</span>"<span class="pl-kos">></span>...<span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span>
<span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span>
<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span>
<span class="pl-kos"><</span><span class="pl-ent">td</span> <span class="pl-c1">class</span>="<span class="pl-s">col-1</span>"<span class="pl-kos">></span>
<span class="pl-kos"><</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">align-items-center d-flex flex-column gap-2</span>"<span class="pl-kos">></span>
<span class="pl-kos"><</span><span class="pl-ent">button</span> <span class="pl-c1">type</span>="<span class="pl-s">button</span>" <span class="pl-c1">class</span>="<span class="pl-s">...</span>" <span class="pl-c1">title</span>="<span class="pl-s">Reverse Directions</span>"<span class="pl-kos">></span>...<span class="pl-kos"></</span><span class="pl-ent">button</span><span class="pl-kos">></span>
<span class="pl-kos"><</span><span class="pl-ent">input</span> <span class="pl-c1">type</span>="<span class="pl-s">submit</span>" <span class="pl-c1">name</span>="<span class="pl-s">commit</span>" <span class="pl-c1">value</span>="<span class="pl-s">Go</span>" <span class="pl-c1">class</span>="<span class="pl-s">...</span>"<span class="pl-kos">></span>
<span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span>
<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span>
<span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span>
<span class="pl-kos"></</span><span class="pl-ent">table</span><span class="pl-kos">></span></pre></div>
<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#discussion_r2069357067">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLMPPYLR473HD6CCNAT24ETKHAVCNFSM6AAAAAB37DIPG2VHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDQMBYGI3TMMZSGM">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLIW4L3DR3FGNA7SEXD24ETKHA5CNFSM6AAAAAB37DIPG2WGG33NNVSW45C7OR4XAZNRKB2WY3CSMVYXKZLTORJGK5TJMV32UY3PNVWWK3TUL5UWJTVHMLSWG.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/review/2808276323</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#discussion_r2069357067",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/5960#discussion_r2069357067",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>