Mobile styling

app/scenes/Document/Document.js

@@ -26,6 +26,7 @@ import DocumentMove from './components/DocumentMove';
 import UiStore from 'stores/UiStore';
 import AuthStore from 'stores/AuthStore';
 import DocumentsStore from 'stores/DocumentsStore';
+import CollectionsStore from 'stores/CollectionsStore';
 import LoadingPlaceholder from 'components/LoadingPlaceholder';
 import LoadingIndicator from 'components/LoadingIndicator';
 import CenteredContent from 'components/CenteredContent';
@@ -50,6 +51,7 @@ type Props = {
   history: Object,
   location: Location,
   documents: DocumentsStore,
+  collections: CollectionsStore,
   newDocument?: boolean,
   auth: AuthStore,
   ui: UiStore,
@@ -248,7 +250,7 @@ class DocumentScene extends React.Component<Props> {
   };
 
   render() {
-    const { location, match, ui } = this.props;
+    const { location, match } = this.props;
     const Editor = this.editorComponent;
     const isMoving = match.path === matchDocumentMove;
     const document = this.document;

app/scenes/Document/components/Breadcrumb.js

@@ -1,26 +1,31 @@
 // @flow
 import * as React from 'react';
+import { observer, inject } from 'mobx-react';
 import breakpoint from 'styled-components-breakpoint';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 import { CollectionIcon, GoToIcon } from 'outline-icons';
 
+import Document from 'models/Document';
+import CollectionsStore from 'stores/CollectionsStore';
 import { collectionUrl } from 'utils/routeHelpers';
 import Flex from 'shared/components/Flex';
-import Document from 'models/Document';
 
 type Props = {
   document: Document,
+  collections: CollectionsStore,
 };
 
-const Breadcrumb = ({ document }: Props) => {
+const Breadcrumb = observer(({ document, collections }: Props) => {
   const path = document.pathToDocument.slice(0, -1);
+  const collection =
+    collections.getById(document.collection.id) || document.collection;
 
   return (
     <Wrapper justify="flex-start" align="center">
-      <CollectionName to={collectionUrl(document.collectionId)}>
-        <CollectionIcon color={document.collection.color} />{' '}
-        <span>{document.collection.name}</span>
+      <CollectionName to={collectionUrl(collection.id)}>
+        <CollectionIcon color={collection.color} />{' '}
+        <span>{collection.name}</span>
       </CollectionName>
       {path.map(n => (
         <React.Fragment>
@@ -29,7 +34,7 @@ const Breadcrumb = ({ document }: Props) => {
       ))}
     </Wrapper>
   );
-};
+});
 
 const Wrapper = styled(Flex)`
   width: 33.3%;
@@ -41,6 +46,7 @@ const Wrapper = styled(Flex)`
 `;
 
 const Slash = styled(GoToIcon)`
+  flex-shrink: 0;
   opacity: 0.25;
 `;
 
@@ -58,10 +64,13 @@ const Crumb = styled(Link)`
 `;
 
 const CollectionName = styled(Link)`
+  display: flex;
+  flex-shrink: 0;
   color: ${props => props.theme.text};
   font-size: 15px;
-  display: flex;
   font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
 `;
 
-export default Breadcrumb;
+export default inject('collections')(Breadcrumb);

app/scenes/Document/components/Header.js

@@ -95,6 +95,12 @@ class Header extends React.Component<Props> {
         </Title>
         <Wrapper align="center" justify="flex-end">
           {!isDraft && !isEditing && <Collaborators document={document} />}
+          {isSaving &&
+            !isPublishing && (
+              <Action>
+                <Status>Saving…</Status>
+              </Action>
+            )}
           {isDraft && (
             <Action>
               <Link
@@ -110,7 +116,6 @@ class Header extends React.Component<Props> {
           {isEditing && (
             <React.Fragment>
               <Action>
-                {isSaving && !isPublishing && <Status>Saving…</Status>}
                 <Link
                   onClick={this.handleSave}
                   title="Save changes (Cmd+Enter)"
@@ -118,10 +123,9 @@ class Header extends React.Component<Props> {
                   isSaving={isSaving}
                   highlight={!isDraft}
                 >
-                  Done
+                  {isDraft ? 'Save Draft' : 'Done'}
                 </Link>
               </Action>
-              {isDraft && <Separator />}
             </React.Fragment>
           )}
           {!isEditing && (
@@ -160,7 +164,6 @@ class Header extends React.Component<Props> {
 
 const Status = styled.div`
   color: ${props => props.theme.slate};
-  margin-right: 12px;
 `;
 
 const Wrapper = styled(Flex)`