Moved search button to the right side

apps/block_scout_web/assets/css/components/_navbar.scss

@@ -34,9 +34,10 @@
   background: transparent;
   width: auto;
   font-size: 12px;
-  border-left: none;
+  border-right: none;
   color: $white;
   border-color: transparentize($white, 0.30);
+  padding-right: 0px;
 
 
   &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
@@ -57,13 +58,13 @@
   }
 
   @include media-breakpoint-up(xl) {
-    width: calc(43ch + #{$input-padding-x * 2});
+    width: calc(41ch + #{$input-padding-x});
   }
 }
 
 .navbar .input-group-text {
   background: none;
-  border-right: none;
+  border-left: none;
   border-color: transparentize($white, 0.30);
 }
 

apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex

@@ -26,10 +26,10 @@
       </ul>
       <%= form_for @conn, chain_path(@conn, :search), [class: "form-inline my-2 my-lg-0", method: :get, enforce_utf8: false], fn f -> %>
         <div class="input-group">
-          <div class="input-group-prepend">
+          <%= search_input f, :q, class: 'form-control mr-auto', placeholder: gettext("Search by address, transaction hash, or block number"), "aria-describedby": "search-icon", "aria-label": "Search", "data-test": "search_input" %>
-            <span class="input-group-text" id="search-icon"><i class="fas fa-search"></i></span>
+          <div class="input-group-append">
+            <button class="input-group-text" id="search-icon"><i class="fas fa-search"></i></button>
           </div>
-          <%= search_input f, :q, class: 'form-control mr-sm-2 ml-auto', placeholder: gettext("Search by address, transaction hash, or block number"), "aria-describedby": "search-icon", "aria-label": "Search", "data-test": "search_input" %>
         </div>
         <button class="btn btn-outline-success my-2 my-sm-0 sr-only" type="submit">Search</button>
       <% end %>