docs: fix search input stylings (#18682)

eslint · Jul 13, 2024 · a7016a5 · a7016a5
1 parent 05ab812
commit a7016a5
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/docs/src/assets/scss/components/search.scss b/docs/src/assets/scss/components/search.scss
@@ -24,10 +24,10 @@
     color: var(--body-text-color);
     position: absolute;
     display: flex;
-    top: 50%;
-    offset-block-start: 50%;
-    transform: translateY(-50%);
-    right: 1.5rem;
+    top: 25%;
+    offset-block-start: 25%;
+    transform: translateY(-25%);
+    right: 1rem;
     offset-inline-end: 1.5rem;
     z-index: 3;
     padding: 0;
@@ -46,6 +46,8 @@
     padding-inline-start: 2.5rem;
     outline-offset: 1px;
     width: 100%;
+    padding-right: 2.5rem;
+    padding-inline-end: 2.5rem;
 }
 
 .search__icon {
@@ -93,14 +95,14 @@
     border-radius: 0 0 var(--border-radius) var(--border-radius);
     border: 1px solid var(--divider-color);
     position: relative;
-    top: .25rem;
+    top: -1.5rem;
     max-height: 400px;
     overflow-y: auto;
 
     @media all and (min-width: 1024px) {
         box-shadow: var(--shadow-lg);
         position: absolute;
-        top: calc(100% + .25rem);
+        top: calc(100% - 1.5rem);
     }
 
     &[data-results="true"] {