Add stricter styling for searchbar

MarkBind · Aug 15, 2022 · a39a92d · a39a92d
1 parent 1f79ce1
commit a39a92d
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/packages/vue-components/src/Searchbar.vue b/packages/vue-components/src/Searchbar.vue
@@ -274,7 +274,16 @@ export default {
         }
     }
 
-    @media screen and (min-width: 768px) and (max-width: 878px) {
+    /* For general tablets in portrait e.g. iPad */
+    @media screen and (min-width: 768px) and (max-width: 878px) and (orientation: portrait) {
+        .form-control {
+            min-width: 8em;
+            max-width: 16em; /* twice of min-width, to accommodate a range of lengths */
+        }
+    }
+
+    /* For general tablets in landscape e.g. iPad */
+    @media screen and (min-width: 768px) and (max-width: 878px)  and (orientation: landscape) {
         .form-control {
             min-width: 9em;
             max-width: 18em; /* twice of min-width, to accommodate a range of lengths */