Fix search field border break/overlap

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

@@ -20,6 +20,7 @@
     form {
       flex-grow: 1;
     }
+
   }
 
   .input-group {
@@ -79,9 +80,8 @@
   background: transparent;
   width: auto;
   font-size: 12px;
-  border-right: none;
+  border: none;
   color: $white;
-  border-color: transparentize($white, 0.30);
   padding-right: 0px;
 
 
@@ -109,8 +109,7 @@
 
 .navbar .input-group-text {
   background: none;
-  border-left: none;
+  border: none;
-  border-color: transparentize($white, 0.30);
 }
 
 .input-group-append {
@@ -160,3 +159,7 @@
     color: $white;
   }
 }
+
+.add-border {
+  border: 1px solid transparentize($white, 0.30);
+}

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

@@ -78,7 +78,7 @@
         </li>
       </ul>
       <div class="search-form d-lg-flex d-inline-block">
-        <%= form_for @conn, chain_path(@conn, :search), [class: "form-inline my-2 my-lg-0", method: :get, enforce_utf8: false], fn f -> %>
+        <%= form_for @conn, chain_path(@conn, :search), [class: "form-inline my-2 my-lg-0 add-border", method: :get, enforce_utf8: false], fn f -> %>
 
         <div class="input-group">
               <%= awesomplete(f, :q,