Zoom out when on small screens :)

This does absolutely nothing on firefox, but works great in safari and chrome. There are tricks to make zooming happen on firefox, but it involves stuff like this ``` html { -moz-transform: scale(0.7); -moz-transform-origin: 0 0; } @-moz-document url-prefix() { html { width: 142.857%; } } ``` amd after that some things still have a very hard time staying aligned with the screen edges (such as the sidebar). So I've left that as a future exercise.
2020-03-06 12:04:29 +01:00
parent ea4810c32d
commit f1ef39ec8c
3 changed files with 25 additions and 2 deletions
@@ -51,6 +51,29 @@
      href="%PUBLIC_URL%/safari-pinned-tab.svg"
      color="#5bbad5"
    />
+    <style>
+      @media only screen {
+        html {
+          zoom: 0.7;
+        }
+      }
+
+      @media only screen and (min-width: 800px) {
+        html {
+          zoom: 0.85;
+        }
+      }
+
+      @media only screen and (min-width: 1200px) {
+        html {
+          zoom: 1;
+        }
+      }
+
+      #root {
+        min-height: 100%;
+      }
+    </style>
    <title>Backstage</title>
  </head>
  <body style="margin: 0">
@@ -28,7 +28,7 @@ const useStyles = makeStyles(theme => ({
    gridTemplateColumns: '64px auto',
    gridTemplateRows: '1fr',
    width: '100%',
-    height: '100vh',
+    height: '100%',
  },
 }));

@@ -164,7 +164,7 @@ const useStyles = makeStyles(theme => ({
    display: 'flex',
    flexFlow: 'column nowrap',
    alignItems: 'flex-start',
-    position: 'absolute',
+    position: 'fixed',
    left: 0,
    top: 0,
    bottom: 0,