feat(css): set breakpoints the de facto value

768px has been much more common for many years (since 2010), and other major CSS frameworks have used 768px as the breakpoint for years. Signed-off-by: Takuya Noguchi <takninnovationresearch@gmail.com>
algolia · Jul 21, 2022 · 3fbd52d · 3fbd52d
1 parent 83abe4c
commit 3fbd52d
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/packages/docsearch-css/src/button.css b/packages/docsearch-css/src/button.css
@@ -63,7 +63,7 @@
   width: 20px;
 }
 
-@media (max-width: 750px) {
+@media (max-width: 768px) {
   .DocSearch-Button-Keys,
   .DocSearch-Button-Placeholder {
     display: none;

diff --git a/packages/docsearch-css/src/modal.css b/packages/docsearch-css/src/modal.css
@@ -556,7 +556,7 @@ svg.DocSearch-Hit-Select-Icon {
 }
 
 /* Responsive */
-@media (max-width: 750px) {
+@media (max-width: 768px) {
   :root {
     --docsearch-spacing: 10px;
     --docsearch-footer-height: 40px;

diff --git a/packages/docsearch-react/src/DocSearchModal.tsx b/packages/docsearch-react/src/DocSearchModal.tsx
@@ -332,7 +332,7 @@ export function DocSearchModal({
   }, []);
 
   React.useEffect(() => {
-    const isMobileMediaQuery = window.matchMedia('(max-width: 750px)');
+    const isMobileMediaQuery = window.matchMedia('(max-width: 768px)');
 
     if (isMobileMediaQuery.matches) {
       snippetLength.current = 5;