position sticky

app/components/Sidebar/Sidebar.js

@@ -59,7 +59,7 @@ const Container = styled(Flex)`
   background: ${props => props.theme.smoke};
   transition: left 100ms ease-out;
   margin-left: ${props => (props.mobileSidebarVisible ? 0 : '-100%')};
-  z-index: 1;
+  z-index: 2;
 
   @media print {
     display: none;
@@ -101,7 +101,7 @@ const Toggle = styled.a`
   left: ${props => (props.mobileSidebarVisible ? 'auto' : 0)};
   right: ${props => (props.mobileSidebarVisible ? 0 : 'auto')};
   z-index: 1;
-  margin: 16px;
+  margin: 12px;
 
   ${breakpoint('tablet')`
     display: none;

app/scenes/Document/Document.js

@@ -269,7 +269,7 @@ class DocumentScene extends React.Component<Props> {
     }
 
     return (
-      <Container column auto>
+      <Container key={document ? document.id : undefined} column auto>
         {isMoving && document && <DocumentMove document={document} />}
         {titleText && <PageTitle title={titleText} />}
         {(this.isUploading || this.isSaving) && <LoadingIndicator />}
@@ -278,7 +278,7 @@ class DocumentScene extends React.Component<Props> {
             <LoadingState />
           </CenteredContent>
         ) : (
-          <Flex justify="center" auto>
+          <Container justify="center" column auto>
             {this.isEditing && (
               <React.Fragment>
                 <Prompt
@@ -288,9 +288,22 @@ class DocumentScene extends React.Component<Props> {
                 <Prompt when={this.isUploading} message={UPLOADING_WARNING} />
               </React.Fragment>
             )}
+            {document &&
+              !isShare && (
+                <Header
+                  document={document}
+                  isDraft={!document.publishedAt}
+                  isEditing={this.isEditing}
+                  isSaving={this.isSaving}
+                  isPublishing={this.isPublishing}
+                  savingIsDisabled={!document.allowSave}
+                  history={this.props.history}
+                  onDiscard={this.onDiscard}
+                  onSave={this.onSave}
+                />
+              )}
             <MaxWidth column auto>
               <Editor
-                key={document ? document.id : undefined}
                 titlePlaceholder="Start with a title…"
                 bodyPlaceholder="…the rest is your canvas"
                 defaultValue={document.text}
@@ -307,22 +320,7 @@ class DocumentScene extends React.Component<Props> {
                 toc
               />
             </MaxWidth>
-            {document &&
-              !isShare && (
-                <Header
-                  document={document}
-                  isDraft={!document.publishedAt}
-                  isEditing={this.isEditing}
-                  isSaving={this.isSaving}
-                  isPublishing={this.isPublishing}
-                  savingIsDisabled={!document.allowSave}
-                  history={this.props.history}
-                  onDiscard={this.onDiscard}
-                  onSave={this.onSave}
-                  editMode={ui.editMode}
-                />
-              )}
-          </Flex>
+          </Container>
         )}
       </Container>
     );
@@ -330,13 +328,14 @@ class DocumentScene extends React.Component<Props> {
 }
 
 const MaxWidth = styled(Flex)`
-  padding: 0 20px;
+  padding: 0 16px;
   max-width: 100vw;
+  width: 100%;
   height: 100%;
 
   ${breakpoint('tablet')`	
-    padding: 0;
-    margin: 60px;
+    padding: 0 24px;
+    margin: 60px auto;
     max-width: 46em;
   `};
 `;

app/scenes/Document/components/Breadcrumb.js

@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react';
+import breakpoint from 'styled-components-breakpoint';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 import { CollectionIcon, GoToIcon } from 'outline-icons';
@@ -32,6 +33,11 @@ const Breadcrumb = ({ document }: Props) => {
 
 const Wrapper = styled(Flex)`
   width: 33.3%;
+  display: none;
+
+  ${breakpoint('tablet')`	
+    display: flex;
+  `};
 `;
 
 const Slash = styled(GoToIcon)`

app/scenes/Document/components/Header.js

@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react';
-import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+import { throttle } from 'lodash';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import styled from 'styled-components';
@@ -22,7 +22,6 @@ type Props = {
   isSaving: boolean,
   isPublishing: boolean,
   savingIsDisabled: boolean,
-  editMode: boolean,
   onDiscard: () => *,
   onSave: ({
     done?: boolean,
@@ -36,10 +35,6 @@ type Props = {
 class Header extends React.Component<Props> {
   @observable isScrolled = false;
 
-  componentWillMount() {
-    this.handleScroll();
-  }
-
   componentDidMount() {
     window.addEventListener('scroll', this.handleScroll);
   }
@@ -48,10 +43,12 @@ class Header extends React.Component<Props> {
     window.removeEventListener('scroll', this.handleScroll);
   }
 
-  handleScroll = () => {
+  updateIsScrolled = () => {
     this.isScrolled = window.scrollY > 75;
   };
 
+  handleScroll = throttle(this.updateIsScrolled, 50);
+
   handleNewDocument = () => {
     this.props.history.push(documentNewUrl(this.props.document));
   };
@@ -68,6 +65,13 @@ class Header extends React.Component<Props> {
     this.props.onSave({ done: true, publish: true });
   };
 
+  handleClickTitle = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
   render() {
     const {
       document,
@@ -76,19 +80,19 @@ class Header extends React.Component<Props> {
       isPublishing,
       isSaving,
       savingIsDisabled,
-      editMode,
     } = this.props;
 
     return (
       <Actions
         align="center"
         justify="space-between"
-        editMode={editMode}
         readOnly={!isEditing}
         isCompact={this.isScrolled}
       >
         <Breadcrumb document={document} />
-        <Title isHidden={!this.isScrolled}>{document.title}</Title>
+        <Title isHidden={!this.isScrolled} onClick={this.handleClickTitle}>
+          {document.title}
+        </Title>
         <Wrapper align="center" justify="flex-end">
           {!isDraft && !isEditing && <Collaborators document={document} />}
           {isDraft && (
@@ -160,19 +164,25 @@ const Status = styled.div`
 `;
 
 const Wrapper = styled(Flex)`
-  width: 33.3%;
+  width: 100%;
+  align-self: flex-end;
+
+  ${breakpoint('tablet')`	
+    width: 33.3%;
+  `};
 `;
 
 const Actions = styled(Flex)`
-  position: fixed;
+  position: sticky;
   top: 0;
   right: 0;
-  left: ${props => (props.editMode ? '0' : props.theme.sidebarWidth)};
+  left: 0;
+  z-index: 1;
   background: rgba(255, 255, 255, 0.9);
   border-bottom: 1px solid
     ${props => (props.isCompact ? props.theme.smoke : 'transparent')};
   padding: 12px;
-  transition: all 100ms ease-out;
+  transition: padding 100ms ease-out;
   -webkit-backdrop-filter: blur(20px);
 
   @media print {
@@ -180,13 +190,11 @@ const Actions = styled(Flex)`
   }
 
   ${breakpoint('tablet')`
-    padding: ${props =>
-      props.isCompact ? '12px' : `${props.theme.padding} 0`};
+    padding: ${props => (props.isCompact ? '12px' : `24px 24px 0`)};
   `};
 `;
 
 const Title = styled.div`
-  width: 33.3%;
   font-size: 16px;
   font-weight: 600;
   text-align: center;
@@ -196,6 +204,14 @@ const Title = styled.div`
   overflow: hidden;
   transition: opacity 100ms ease-in-out;
   opacity: ${props => (props.isHidden ? '0' : '1')};
+  cursor: ${props => (props.isHidden ? 'default' : 'pointer')};
+  display: none;
+  width: 0;
+
+  ${breakpoint('tablet')`	
+    display: block;
+    width: 33.3%;
+  `};
 `;
 
 const Link = styled.a`