Fixing some layout issues

frontend/components/Editor/Editor.js

@@ -210,6 +210,7 @@ type KeyData = {
 }
 
 const MaxWidth = styled(Flex)`
+  padding: 0 60px;
   max-width: 50em;
   height: 100%;
 `;

frontend/components/Layout/components/HeaderBlock.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
-import { color, layout } from 'styles/constants';
+import { color } from 'styles/constants';
 import type { User, Team } from 'types';
 import Flex from 'components/Flex';
 
@@ -37,7 +37,7 @@ const TeamName = styled.div`
 
 const Header = styled(Flex)`
   flex-shrink: 0;
-  padding: ${layout.padding};
+  padding: 16px 24px;
   position: relative;
   cursor: pointer;
   width: 100%;
@@ -49,8 +49,8 @@ const Header = styled(Flex)`
 
   &::after {
     content: "";
-    left: ${layout.hpadding};
-    right: ${layout.hpadding};
+    left: 24px;
+    right: 24px;
     background: rgba(0,0,0,.075);
     height: 1px;
     position: absolute;

frontend/components/Layout/components/SidebarCollections.js

@@ -4,7 +4,7 @@ import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import Flex from 'components/Flex';
 import styled from 'styled-components';
-import { color, layout, fontWeight } from 'styles/constants';
+import { color, fontWeight } from 'styles/constants';
 
 import SidebarLink from './SidebarLink';
 import DropToImport from 'components/DropToImport';
@@ -152,7 +152,7 @@ const Header = styled(Flex)`
   text-transform: uppercase;
   color: ${color.slate};
   letter-spacing: 0.04em;
-  padding: 0 ${layout.hpadding};
+  padding: 0 24px;
 `;
 
 const CollectionAction = styled.a`

frontend/components/Layout/components/SidebarLink.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { NavLink } from 'react-router-dom';
-import { layout, color, fontWeight } from 'styles/constants';
+import { color, fontWeight } from 'styles/constants';
 import styled from 'styled-components';
 
 const activeStyle = {
@@ -16,7 +16,7 @@ const styleComponent = component => styled(component)`
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
-  margin: 5px ${layout.hpadding};
+  margin: 5px 24px;
   color: ${color.slateDark};
   font-size: 15px;
   cursor: pointer;

frontend/scenes/Document/Document.js

@@ -354,10 +354,13 @@ const DropHere = styled(Flex)`
 
 const Meta = styled(Flex)`
   align-items: flex-start;
-  position: absolute;
+  position: fixed;
   top: 0;
   right: 0;
-  padding: ${layout.padding};
+  padding: ${layout.vpadding} ${layout.hpadding} 8px 8px;
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.9);
+  -webkit-backdrop-filter: blur(20px);
 `;
 
 const Container = styled(Flex)`