CSS: Fixed floating search icon on mobile

Also updated styles to use logical elements instead of conditional rules
for altered search boxes.
Related to #2504

Author: ssddanbrown

resources/sass/_forms.scss

@@ -441,12 +441,8 @@ input[type=color] {
     padding: 0;
     cursor: pointer;
     position: absolute;
-    left: 8px;
-    top: 9px;
-    @include rtl {
-      right: 8px;
-      left: auto;
-    }
+    inset-inline-start: 8px;
+    top: 10px;
   }
   input {
     display: block;

resources/views/search/all.blade.php

@@ -79,7 +79,9 @@
 
                     <form action="{{ url('/search') }}" method="GET"  class="search-box flexible hide-over-l">
                         <input value="{{$searchTerm}}" type="text" name="term" placeholder="{{ trans('common.search') }}">
-                        <button type="submit">@icon('search')</button>
+                        <button type="submit"
+                                aria-label="{{ trans('common.search') }}"
+                                tabindex="-1">@icon('search')</button>
                     </form>
 
                     <h6 class="text-muted">{{ trans_choice('entities.search_total_results_found', $totalResults, ['count' => $totalResults]) }}</h6>