fix: searchbar w bug in mobile view

desmos-labs · Sep 16, 2023 · 20df58e · 20df58e
1 parent 7bfdd7d
commit 20df58e
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/docs/src/theme/SearchBar/styles.css b/docs/src/theme/SearchBar/styles.css
@@ -12,14 +12,22 @@
   border: 1px solid var(--general-light-line-3-webapp, #DDD);
   background: #FFF;
   margin: 0;
-  width: 13.75rem;
+  width: 13rem;
   height: 2rem;
   padding: 0.75rem 1rem;
   box-shadow: 0 16px 30px 10px rgba(70, 53, 43, 0.02);
   transition: all var(--ifm-transition-fast)
     var(--ifm-transition-timing-default);
 }
 
+/** In mobile view, reduce the padding */
+@media screen and (max-width: 996px) {
+  .DocSearch-Button {
+    width: auto;
+    padding: 0.5rem;
+  }
+}
+
 .DocSearch-Button:hover {
   background: white;
   color: #25282D;