CSS tweaks

app/scenes/Document/Document.js

@@ -334,8 +334,8 @@ const MaxWidth = styled(Flex)`
   height: 100%;
 
   ${breakpoint('tablet')`	
-    padding: 0 24px;
-    margin: 60px auto;
+    padding: 0;
+    margin: 12px auto;
     max-width: 46em;
   `};
 `;

app/scenes/Document/components/Breadcrumb.js

@@ -24,7 +24,7 @@ const Breadcrumb = observer(({ document, collections }: Props) => {
   return (
     <Wrapper justify="flex-start" align="center">
       <CollectionName to={collectionUrl(collection.id)}>
-        <CollectionIcon color={collection.color} />{' '}
+        <CollectionIcon color={collection.color} expanded />{' '}
         <span>{collection.name}</span>
       </CollectionName>
       {path.map(n => (

app/scenes/Document/components/Header.js

@@ -185,7 +185,8 @@ const Actions = styled(Flex)`
   border-bottom: 1px solid
     ${props => (props.isCompact ? props.theme.smoke : 'transparent')};
   padding: 12px;
-  transition: padding 100ms ease-out;
+  transition: all 100ms ease-out;
+  transform: translate3d(0, 0, 0);
   -webkit-backdrop-filter: blur(20px);
 
   @media print {