feat: use flexbox to center the floating title (#1959)

* use flexbox to center the floating title

* simplify breadcumb alignment

* small adjustments

* fix alignment on actions

app/components/Breadcrumb.js

@@ -12,7 +12,6 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
 import Document from "models/Document";
 import CollectionIcon from "components/CollectionIcon";
 import Flex from "components/Flex";
@@ -85,7 +84,7 @@ const Breadcrumb = ({ document, children, onlyText }: Props) => {
   const { t } = useTranslation();
 
   if (!collections.isLoaded) {
-    return <Wrapper />;
+    return;
   }
 
   let collection = collections.get(document.collectionId);
@@ -125,7 +124,7 @@ const Breadcrumb = ({ document, children, onlyText }: Props) => {
   const menuPath = isNestedDocument ? path.slice(0, -1) : [];
 
   return (
-    <Wrapper justify="flex-start" align="center">
+    <Flex justify="flex-start" align="center">
       <Icon document={document} />
       <CollectionName to={collectionUrl(collection.id)}>
         <CollectionIcon collection={collection} expanded />
@@ -146,7 +145,7 @@ const Breadcrumb = ({ document, children, onlyText }: Props) => {
         </>
       )}
       {children}
-    </Wrapper>
+    </Flex>
   );
 };
 
@@ -155,14 +154,6 @@ export const Slash = styled(GoToIcon)`
   fill: ${(props) => props.theme.divider};
 `;
 
-const Wrapper = styled(Flex)`
-  display: none;
-
-  ${breakpoint("tablet")`	
-    display: flex;
-  `};
-`;
-
 const SmallPadlockIcon = styled(PadlockIcon)`
   display: inline-block;
   vertical-align: sub;

app/components/Header.js

@@ -36,36 +36,47 @@ function Header({ breadcrumb, title, actions }: Props) {
   }, []);
 
   return (
-    <Wrapper
-      align="center"
-      justify="space-between"
-      isCompact={isScrolled}
-      shrink={false}
-    >
-      {breadcrumb}
+    <Wrapper align="center" isCompact={isScrolled} shrink={false}>
+      {breadcrumb ? <Breadcrumbs>{breadcrumb}</Breadcrumbs> : null}
       {isScrolled ? (
-        <Title
-          align="center"
-          justify={breadcrumb ? "center" : "flex-start"}
-          onClick={handleClickTitle}
-        >
-          <Fade>
-            <Flex align="center">{title}</Flex>
-          </Fade>
+        <Title align="center" justify="flex-start" onClick={handleClickTitle}>
+          <Fade>{title}</Fade>
         </Title>
       ) : (
         <div />
       )}
-      {actions && <Actions>{actions}</Actions>}
+      {actions && (
+        <Actions align="center" justify="flex-end">
+          {actions}
+        </Actions>
+      )}
     </Wrapper>
   );
 }
 
+const Breadcrumbs = styled("div")`
+  flex-grow: 1;
+  flex-basis: 0;
+  align-items: center;
+  padding-right: 8px;
+
+  /* Don't show breadcrumbs on mobile */
+  display: none;
+  ${breakpoint("tablet")`	
+  display: flex;
+`};
+`;
+
+const Actions = styled(Flex)`
+  flex-grow: 1;
+  flex-basis: 0;
+  min-width: auto;
+  padding-left: 8px;
+`;
+
 const Wrapper = styled(Flex)`
   position: sticky;
   top: 0;
-  right: 0;
-  left: 0;
   z-index: 2;
   background: ${(props) => transparentize(0.2, props.theme.background)};
   padding: 12px;
@@ -77,33 +88,38 @@ const Wrapper = styled(Flex)`
     display: none;
   }
 
+  justify-content: flex-start;
   ${breakpoint("tablet")`
     padding: ${(props) => (props.isCompact ? "12px" : `24px 24px 0`)};
+    justify-content: "center";
   `};
 `;
 
-const Title = styled(Flex)`
+const Title = styled("div")`
   font-size: 16px;
   font-weight: 600;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   cursor: pointer;
-  width: 0;
+  min-width: 0;
 
+  /* on mobile, there's always a floating menu button in the top left 
+    add some padding here to offset
+  */
+  padding-left: 40px;
   ${breakpoint("tablet")`	
-    flex-grow: 1;
+    padding-left: 0;
   `};
 
+  svg {
+    vertical-align: bottom;
+  }
+
   @media (display-mode: standalone) {
     overflow: hidden;
     flex-grow: 0 !important;
   }
 `;
 
-const Actions = styled(Flex)`
-  align-self: flex-end;
-  height: 32px;
-`;
-
 export default observer(Header);

app/components/Sidebar/components/Toggle.js

@@ -28,7 +28,7 @@ export const ToggleButton = styled.button`
   transition: opacity 100ms ease-in-out;
   transform: translateY(-50%)
     scaleX(${(props) => (props.$direction === "left" ? 1 : -1)});
-  position: absolute;
+  position: fixed;
   top: 50vh;
   padding: 8px;
   border: 0;

app/scenes/Document/components/Header.js

@@ -138,12 +138,7 @@ function DocumentHeader({
         }
         actions={
           <>
-            {!isPublishing && (
-              <Action>
-                <Status isSaving={isSaving}>{t("Saving")}…</Status>
-              </Action>
-            )}
-            &nbsp;
+            {!isPublishing && isSaving && <Status>{t("Saving")}…</Status>}
             <Fade>
               <Collaborators
                 document={document}
@@ -299,9 +294,10 @@ function DocumentHeader({
   );
 }
 
-const Status = styled.div`
+const Status = styled(Action)`
+  padding-left: 0;
+  padding-right: 4px;
   color: ${(props) => props.theme.slate};
-  visibility: ${(props) => (props.isSaving ? "visible" : "hidden")};
 `;
 
 export default observer(DocumentHeader);

server/static/index.html

@@ -44,6 +44,7 @@
       #root {
         flex: 1;
         min-height: 100vh;
+        width: 100%;
       }
     </style>
   </head>