From: Anton Khorev <tony29@yandex.ru>
Date: Mon, 17 Mar 2025 16:34:34 +0000 (+0300)
Subject: Move directions form buttons closer to edges
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/15ceb9e8e3e5e8d585bb67b4b9b5cd132e686893?ds=inline

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 da19d3d39..68c28c332 100644
--- 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>