From f1ef39ec8c7ffdc84cc8c572d2b5bc91d0dda397 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= Date: Fri, 6 Mar 2020 12:04:29 +0100 Subject: [PATCH] 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. --- packages/app/public/index.html | 23 +++++++++++++++++++ packages/app/src/App.tsx | 2 +- .../app/src/components/SideBar/SideBar.tsx | 2 +- 3 files changed, 25 insertions(+), 2 deletions(-) diff --git a/packages/app/public/index.html b/packages/app/public/index.html index 49fd768c53..ac2e9a6a73 100644 --- a/packages/app/public/index.html +++ b/packages/app/public/index.html @@ -51,6 +51,29 @@ href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#5bbad5" /> + Backstage diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index 3806f1ac96..ad6cd58cd6 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -28,7 +28,7 @@ const useStyles = makeStyles(theme => ({ gridTemplateColumns: '64px auto', gridTemplateRows: '1fr', width: '100%', - height: '100vh', + height: '100%', }, })); diff --git a/packages/app/src/components/SideBar/SideBar.tsx b/packages/app/src/components/SideBar/SideBar.tsx index 724b2a4a79..92e17d6eb1 100644 --- a/packages/app/src/components/SideBar/SideBar.tsx +++ b/packages/app/src/components/SideBar/SideBar.tsx @@ -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,