Add media query to handle overflow searchbar in tablets

MarkBind · Aug 13, 2022 · 008afe9 · 008afe9
1 parent c495877
commit 008afe9
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/packages/vue-components/src/Searchbar.vue b/packages/vue-components/src/Searchbar.vue
@@ -267,13 +267,20 @@ export default {
         max-width: 25.4em; /* twice of min-width, to accommodate a range of lengths */
     }
 
-    @media screen and (max-width: 768px) {
+    @media screen and (max-width: 767px) {
         .form-control {
             min-width: 8em;
             max-width: 16em; /* twice of min-width, to accommodate a range of lengths */
         }
     }
 
+    @media screen and (min-width: 768px) and (max-width: 878px) {
+        .form-control {
+            min-width: 9em;
+            max-width: 18em; /* twice of min-width, to accommodate a range of lengths */
+        }
+    }
+
     .table-active {
         background-color: rgba(0, 0, 0, 0.075); /* follows Bootstrap's table-active */
     }