Bugfix: Search icon would drift from input field

carpentries · Dec 8, 2023 · 9b49b47 · 9b49b47
1 parent 2e62ad2
commit 9b49b47
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/inst/pkgdown/templates/header.html b/inst/pkgdown/templates/header.html
@@ -181,7 +181,7 @@
         {{/more}}
       </ul>
     </div>
-    <form class="d-flex col-md-2 search-form">
+    <form class="d-flex col-md-2 justify-content-end search-form">
       <fieldset disabled>
       <input class="form-control me-2 searchbox" type="search" placeholder="{{ translate.Search }}" aria-label="{{ translate.Search }}">
         <button class="btn btn-outline-success tablet-search-button"  type="submit">

diff --git a/source/stylesheets/header.scss b/source/stylesheets/header.scss
@@ -282,8 +282,8 @@
 
   .tablet-search-button {
     position: absolute;
-    top: 8px;
-    right: 60px;
+    top: 0px;
+    right: 21px;
     border: none;
     color: $black;
     display: block;
@@ -295,13 +295,15 @@
 
   .search-form {
     margin-right: 20px;
+    position: relative;
+    min-width: 200px;
   }
 
   .tablet-search {
     display: block;
   }
   .tablet-search-button {
-    margin-right: -25px;
+    margin-right: -45px;
   }
 
   .tablet-search-button:hover {
@@ -420,8 +422,8 @@
 
   .tablet-search-button {
     position: absolute;
-    top: 8px;
-    right: 35px;
+    top: 0px;
+    right: -24px;
   }
 
   .desktop-search {