From a10f54246312b83ba2242f3881cb379573907d60 Mon Sep 17 00:00:00 2001
From: lucka-me <i@lucka.moe>
Date: Mon, 21 Dec 2020 19:48:50 +0800
Subject: [PATCH] Use min-width for mobile breakpoint

---
 src/ui/dashboard/style.scss       | 8 ++++++--
 src/ui/nomination-list/style.scss | 6 ++++++
 src/ui/style.scss                 | 5 -----
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/ui/dashboard/style.scss b/src/ui/dashboard/style.scss
index 74301d86..1b85695f 100644
--- a/src/ui/dashboard/style.scss
+++ b/src/ui/dashboard/style.scss
@@ -13,9 +13,13 @@
     scroll-behavior: smooth;
     -webkit-overflow-scrolling: touch;
 
-    @media screen and (max-width: 620px) {
+    @media not all and (min-width: 620px) {
         flex-flow: column nowrap;
         align-items: stretch;
+
+        &.view-hide {
+            display: none;
+        }
     }
 
     > .mdc-card {
@@ -23,7 +27,7 @@
         margin: 4px;
         flex-basis: 0%;
 
-        @media screen and (max-width: 620px) {
+        @media not all and (min-width: 620px) {
             margin: 4px 8px;
             min-width: 0;
             min-height: 200px;
diff --git a/src/ui/nomination-list/style.scss b/src/ui/nomination-list/style.scss
index eb910462..0bb8b71f 100644
--- a/src/ui/nomination-list/style.scss
+++ b/src/ui/nomination-list/style.scss
@@ -9,4 +9,10 @@
     overflow-y: auto;
     scroll-behavior: smooth;
     -webkit-overflow-scrolling: touch;
+
+    @media not all and (min-width: 620px) {
+        &.view-hide {
+            display: none;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/ui/style.scss b/src/ui/style.scss
index 560df77b..b40c83cd 100644
--- a/src/ui/style.scss
+++ b/src/ui/style.scss
@@ -67,9 +67,4 @@ a { color: var(--mdc-theme-text-primary-on-light); }
     flex: 1;
     display: flex;
     flex-flow: row nowrap;
-}
-
-/* Mobile View */
-@media screen and (max-width: 620px) {
-    .view-hide { display: none !important; }
 }
\ No newline at end of file