Move directions form buttons closer to edges

- Adds more space between Close and Reverse buttons.
- Places Close button exactly above Sidebar Close button.

diff --git a/app/views/layouts/_search.html.erb b/app/views/layouts/_search.html.erb
index da19d3d39d92eda92da66559fdea44755e3ecf17..68c28c332bf68a414ad743ec26854a9b50f097c6 100644 (file)
--- a/app/views/layouts/_search.html.erb
+++ b/app/views/layouts/_search.html.erb
@@ -33,7 +33,9 @@
   </form>
 
   <form method="GET" action="<%= directions_path %>" class="directions_form bg-body-secondary p-2">
-    <div class="d-flex flex-row-reverse p-2"><button type="button" class="btn-close position-absolute" aria-label="<%= t("javascripts.close") %>"></button></div>
+    <div class="d-flex flex-row-reverse pb-3">
+      <button type="button" class="btn-close position-absolute p-2 rounded-5" aria-label="<%= t("javascripts.close") %>"></button>
+    </div>
 
     <div class="d-flex flex-column gap-2">
       <div class="d-flex gap-1 align-items-center">
@@ -51,8 +53,8 @@
             <%= text_field_tag "route_to", params[:to], :placeholder => t("site.search.to"), :autocomplete => "on", :class => "form-control py-1 px-2 ps-4", :dir => "auto" %>
           </div>
         </div>
-        <button type="button" class="reverse_directions btn btn-outline-secondary border-0 p-2" title="<%= t("site.search.reverse_directions_text") %>">
-          <svg class="d-block" width="20" height="20" viewBox="-10 -10 20 20" fill="none" stroke="currentColor" stroke-width="2">
+        <button type="button" class="reverse_directions btn btn-outline-secondary border-0 p-2 me-n1" title="<%= t("site.search.reverse_directions_text") %>">
+          <svg class="d-block" width="22" height="22" viewBox="-11 -11 22 22" fill="none" stroke="currentColor" stroke-width="2">
             <path d="m-4 -2 0 10 m-4 -4 4 4 4 -4" />
             <path d="m4 2 0 -10 m4 4 -4 -4 -4 4" />
           </svg>