changed the mobile view breakdown, based on folding phones and tablets (#113)

Signed-off-by: Kai Wagner <kai.wagner@percona.com>

Author: ImTheKai

app/assets/stylesheets/base/root.css

@@ -87,7 +87,7 @@ body.sidebar-collapsed .page-layout.with-sidebar > main.container {
   display: none;
 }
 
-@media (max-width: 900px) {
+@media (max-width: 1024px) {
   .container {
     padding: 0;
   }

app/assets/stylesheets/components/navigation.css

@@ -327,7 +327,7 @@ body.has-sidebar .nav-burger {
   display: flex;
 }
 
-@media (max-width: 900px) {
+@media (max-width: 1024px) {
   .nav-container {
     padding: 0 var(--spacing-4);
   }

app/assets/stylesheets/components/settings.css

@@ -326,7 +326,7 @@
   padding: var(--spacing-2) var(--spacing-3);
 }
 
-@media (max-width: 900px) {
+@media (max-width: 1024px) {
   .settings-page .email-table {
     table-layout: fixed;
   }

app/assets/stylesheets/components/sidebar.css

@@ -21,7 +21,7 @@
   }
 }
 
-@media (max-width: 900px) {
+@media (max-width: 1024px) {
   .sidebar {
     position: static;
     top: auto;

app/assets/stylesheets/components/topics.css

@@ -258,7 +258,7 @@ a.topic-icon {
   }
 }
 
-@media (max-width: 900px) {
+@media (max-width: 1024px) {
   .topics-table {
     & th,
     & td {
@@ -572,7 +572,7 @@ a.topic-icon {
   flex-shrink: 0;
 }
 
-@media (max-width: 900px) {
+@media (max-width: 1024px) {
   .topic-title-main {
     display: none;
   }

app/javascript/controllers/nav_overflow_controller.js

@@ -1,6 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
 
-const MOBILE_BREAKPOINT = "(max-width: 900px)"
+const MOBILE_BREAKPOINT = "(max-width: 1024px)"
 
 export default class extends Controller {
   static targets = ["container", "menu", "overflow", "overflowMenu", "item"]

app/javascript/controllers/sidebar_controller.js

@@ -162,7 +162,7 @@ export default class extends Controller {
   }
 
   isMobile() {
-    return window.matchMedia("(max-width: 900px)").matches
+    return window.matchMedia("(max-width: 1024px)").matches
   }
 
   closeOnNavigate(event) {