From b8d13c98b536e0d35c5b910e05bcf7bd9f96326c Mon Sep 17 00:00:00 2001
From: Jed Fox <git@jedfox.com>
Date: Sun, 27 Dec 2020 16:27:25 -0500
Subject: [PATCH] refactor: Media queries (#2680)

---
 src/components/ColorPicker.scss  |  2 +-
 src/components/ContextMenu.scss  |  2 +-
 src/components/Dialog.scss       |  2 +-
 src/components/ExportDialog.scss |  4 +---
 src/components/HintViewer.scss   | 10 +++++-----
 src/components/IconPicker.scss   |  2 +-
 src/components/Modal.scss        |  4 ++--
 src/components/ToolIcon.scss     |  6 +++++-
 src/css/_variables.scss          |  3 ++-
 src/css/styles.scss              |  2 +-
 src/is-mobile.tsx                |  1 +
 11 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/components/ColorPicker.scss b/src/components/ColorPicker.scss
index 86b0d932..23a6aac8 100644
--- a/src/components/ColorPicker.scss
+++ b/src/components/ColorPicker.scss
@@ -218,7 +218,7 @@
       left: 2px;
     }
 
-    @media #{$media-query} {
+    @media #{$is-mobile-query} {
       display: none;
     }
   }
diff --git a/src/components/ContextMenu.scss b/src/components/ContextMenu.scss
index 089c9013..fe8059e0 100644
--- a/src/components/ContextMenu.scss
+++ b/src/components/ContextMenu.scss
@@ -74,7 +74,7 @@
     z-index: 1;
   }
 
-  @media #{$media-query} {
+  @media #{$is-mobile-query} {
     .context-menu-option {
       display: block;
 
diff --git a/src/components/Dialog.scss b/src/components/Dialog.scss
index 5c94a906..3ca5d625 100644
--- a/src/components/Dialog.scss
+++ b/src/components/Dialog.scss
@@ -18,7 +18,7 @@
     margin: 0;
   }
 
-  @media #{$media-query} {
+  @media #{$is-mobile-query} {
     .Dialog {
       --metric: calc(var(--space-factor) * 4);
       --inset-left: #{"max(var(--metric), var(--sal))"};
diff --git a/src/components/ExportDialog.scss b/src/components/ExportDialog.scss
index 9a479d58..3086d72b 100644
--- a/src/components/ExportDialog.scss
+++ b/src/components/ExportDialog.scss
@@ -37,7 +37,7 @@
     }
   }
 
-  @media (max-width: 550px) {
+  @media #{$is-mobile-query} {
     .ExportDialog {
       display: flex;
       flex-direction: column;
@@ -51,9 +51,7 @@
     .ExportDialog__actions > * {
       margin-bottom: calc(var(--space-factor) * 3);
     }
-  }
 
-  @media #{$media-query} {
     .ExportDialog__preview canvas {
       max-height: 30vh;
     }
diff --git a/src/components/HintViewer.scss b/src/components/HintViewer.scss
index 63db7511..87b502b6 100644
--- a/src/components/HintViewer.scss
+++ b/src/components/HintViewer.scss
@@ -1,5 +1,8 @@
 @import "../css/_variables";
 
+// this is loosely based on the longest hint text
+$wide-viewport-width: 1000px;
+
 .excalidraw {
   .HintViewer {
     pointer-events: none;
@@ -16,12 +19,9 @@
     color: $oc-gray-6;
     font-size: 0.8rem;
 
-    @media (min-width: 1200px) {
-      white-space: pre;
-    }
-
-    @media #{$media-query} {
+    @media #{$is-mobile-query} {
       position: static;
+      padding-right: 2em;
     }
 
     > span {
diff --git a/src/components/IconPicker.scss b/src/components/IconPicker.scss
index 9521e7ed..62c2b5d4 100644
--- a/src/components/IconPicker.scss
+++ b/src/components/IconPicker.scss
@@ -110,7 +110,7 @@
     :root[dir="rtl"] & {
       left: 2px;
     }
-    @media #{$media-query} {
+    @media #{$is-mobile-query} {
       display: none;
     }
   }
diff --git a/src/components/Modal.scss b/src/components/Modal.scss
index 10620e1f..c009b4e4 100644
--- a/src/components/Modal.scss
+++ b/src/components/Modal.scss
@@ -40,7 +40,7 @@
     background: var(--bg-color-island);
     backdrop-filter: none;
 
-    @media #{$media-query} {
+    @media #{$is-mobile-query} {
       max-width: 100%;
     }
   }
@@ -74,7 +74,7 @@
     top: calc(var(--space-factor) * 5);
   }
 
-  @media #{$media-query} {
+  @media #{$is-mobile-query} {
     .Modal {
       padding: 0;
     }
diff --git a/src/components/ToolIcon.scss b/src/components/ToolIcon.scss
index 3c542aea..91e8e1bc 100644
--- a/src/components/ToolIcon.scss
+++ b/src/components/ToolIcon.scss
@@ -142,6 +142,7 @@
     user-select: none;
   }
 
+  // shrink shape icons on small viewports to make them fit
   @media (max-width: 425px) {
     .Shape .ToolIcon__icon {
       width: 2rem;
@@ -153,6 +154,8 @@
     }
   }
 
+  // move the lock button out of the way on small viewports
+  // it begins to collide with the GitHub icon before we switch to mobile mode
   @media (max-width: 760px) {
     .ToolIcon.ToolIcon__lock {
       display: inline-block;
@@ -162,6 +165,7 @@
 
       margin-left: 0;
       border-radius: 20px 0 0 20px;
+      z-index: 1;
 
       background-color: var(--button-gray-1);
 
@@ -189,7 +193,7 @@
     margin-left: 5px;
     margin-top: 1px;
 
-    @media #{$media-query} {
+    @media #{$is-mobile-query} {
       display: none;
     }
   }
diff --git a/src/css/_variables.scss b/src/css/_variables.scss
index 142d1756..4e4ac861 100644
--- a/src/css/_variables.scss
+++ b/src/css/_variables.scss
@@ -1,3 +1,4 @@
 @import "open-color/open-color.scss";
 
-$media-query: "(max-width: 600px), (max-height: 500px) and (max-width: 1000px)";
+// keep up to date with is-mobile.tsx
+$is-mobile-query: "(max-width: 600px), (max-height: 500px) and (max-width: 1000px)";
diff --git a/src/css/styles.scss b/src/css/styles.scss
index 28edcc7e..c2fcd527 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -441,7 +441,7 @@
     }
   }
 
-  @media #{$media-query} {
+  @media #{$is-mobile-query} {
     aside {
       display: none;
     }
diff --git a/src/is-mobile.tsx b/src/is-mobile.tsx
index 9a8d5fe2..c20bf89d 100644
--- a/src/is-mobile.tsx
+++ b/src/is-mobile.tsx
@@ -11,6 +11,7 @@ export const IsMobileProvider = ({
   if (!query.current) {
     query.current = window.matchMedia
       ? window.matchMedia(
+          // keep up to date with _variables.scss
           "(max-width: 640px), (max-height: 500px) and (max-width: 1000px)",
         )
       : (({