doc

app/components/Breadcrumb.tsx

@@ -8,18 +8,16 @@ import BreadcrumbMenu from "~/menus/BreadcrumbMenu";
 import { undraggableOnDesktop } from "~/styles";
 import { MenuInternalLink } from "~/types";
 
-type Props = {
+type Props = React.PropsWithChildren<{
   items: MenuInternalLink[];
   max?: number;
   highlightFirstItem?: boolean;
-};
+}>;
 
-function Breadcrumb({
-  items,
-  highlightFirstItem,
-  children,
-  max = 2,
-}: React.PropsWithChildren<Props>) {
+function Breadcrumb(
+  { items, highlightFirstItem, children, max = 2 }: Props,
+  ref: React.RefObject<HTMLDivElement> | null
+) {
   const totalItems = items.length;
   const topLevelItems: MenuInternalLink[] = [...items];
   let overflowItems;
@@ -37,7 +35,7 @@ function Breadcrumb({
   }
 
   return (
-    <Flex justify="flex-start" align="center">
+    <Flex justify="flex-start" align="center" ref={ref}>
       {topLevelItems.map((item, index) => (
         <React.Fragment key={String(item.to) || index}>
           {item.icon}
@@ -67,6 +65,8 @@ const Slash = styled(GoToIcon)`
 
 const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
   ${ellipsis()}
+  ${undraggableOnDesktop()}
+
   display: flex;
   flex-shrink: 1;
   min-width: 0;
@@ -76,7 +76,6 @@ const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
   height: 24px;
   font-weight: ${(props) => (props.$highlight ? "500" : "inherit")};
   margin-left: ${(props) => (props.$withIcon ? "4px" : "0")};
-  ${undraggableOnDesktop()}
 
   svg {
     flex-shrink: 0;
@@ -87,4 +86,4 @@ const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
   }
 `;
 
-export default Breadcrumb;
+export default React.forwardRef<HTMLDivElement, Props>(Breadcrumb);

app/components/Collaborators.tsx

@@ -18,6 +18,8 @@ import useStores from "~/hooks/useStores";
 type Props = {
   /** The document to display live collaborators for */
   document: Document;
+  /** The maximum number of collaborators to display, defaults to 6 */
+  limit?: number;
 };
 
 /**
@@ -25,6 +27,7 @@ type Props = {
  * and presence status.
  */
 function Collaborators(props: Props) {
+  const { limit = 6 } = props;
   const { t } = useTranslation();
   const user = useCurrentUser();
   const currentUserId = user?.id;
@@ -75,8 +78,6 @@ function Collaborators(props: Props) {
     placement: "bottom-end",
   });
 
-  const limit = 8;
-
   return (
     <>
       <PopoverDisclosure {...popover}>
@@ -88,6 +89,7 @@ function Collaborators(props: Props) {
           >
             <Facepile
               limit={limit}
+              overflow={collaborators.length - limit}
               users={collaborators}
               renderAvatar={(collaborator) => {
                 const isPresent = presentIds.includes(collaborator.id);

app/components/DocumentBreadcrumb.tsx

@@ -57,11 +57,10 @@ function useCategory(document: Document): MenuInternalLink | null {
   return null;
 }
 
-const DocumentBreadcrumb: React.FC<Props> = ({
-  document,
-  children,
-  onlyText,
-}: Props) => {
+function DocumentBreadcrumb(
+  { document, children, onlyText }: Props,
+  ref: React.RefObject<HTMLDivElement> | null
+) {
   const { collections } = useStores();
   const { t } = useTranslation();
   const category = useCategory(document);
@@ -140,11 +139,11 @@ const DocumentBreadcrumb: React.FC<Props> = ({
   }
 
   return (
-    <Breadcrumb items={items} highlightFirstItem>
+    <Breadcrumb items={items} ref={ref} highlightFirstItem>
       {children}
     </Breadcrumb>
   );
-};
+}
 
 const StyledIcon = styled(Icon)`
   margin-right: 2px;
@@ -160,4 +159,4 @@ const SmallSlash = styled(GoToIcon)`
   opacity: 0.5;
 `;
 
-export default observer(DocumentBreadcrumb);
+export default observer(React.forwardRef(DocumentBreadcrumb));

app/components/Header.tsx

@@ -3,6 +3,7 @@ import { observer } from "mobx-react";
 import { MenuIcon } from "outline-icons";
 import { transparentize } from "polished";
 import * as React from "react";
+import { mergeRefs } from "react-merge-refs";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
@@ -10,6 +11,7 @@ import { supportsPassiveListener } from "@shared/utils/browser";
 import Button from "~/components/Button";
 import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
+import useComponentSize from "~/hooks/useComponentSize";
 import useEventListener from "~/hooks/useEventListener";
 import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";
@@ -21,16 +23,22 @@ export const HEADER_HEIGHT = 64;
 type Props = {
   left?: React.ReactNode;
   title: React.ReactNode;
-  actions?: React.ReactNode;
+  actions?:
+    | ((props: { isCompact: boolean }) => React.ReactNode)
+    | React.ReactNode;
   hasSidebar?: boolean;
   className?: string;
 };
 
-function Header({ left, title, actions, hasSidebar, className }: Props) {
+function Header(
+  { left, title, actions, hasSidebar, className }: Props,
+  ref: React.RefObject<HTMLDivElement> | null
+) {
   const { ui } = useStores();
   const isMobile = useMobile();
   const hasMobileSidebar = hasSidebar && isMobile;
-
+  const internalRef = React.useRef<HTMLDivElement | null>(null);
+  const breadcrumbsRef = React.useRef<HTMLDivElement | null>(null);
   const passThrough = !actions && !left && !title;
 
   const [isScrolled, setScrolled] = React.useState(false);
@@ -53,8 +61,18 @@ function Header({ left, title, actions, hasSidebar, className }: Props) {
     });
   }, []);
 
+  const setBreadcrumbRef = React.useCallback((node: HTMLDivElement) => {
+    breadcrumbsRef.current = node.firstElementChild as HTMLDivElement;
+  }, []);
+
+  const size = useComponentSize(internalRef);
+  const breadcrumbsSize = useComponentSize(breadcrumbsRef);
+  const breadcrumbMakesCompact = breadcrumbsSize.width > size.width / 3;
+  const isCompact = size.width < 1000 || breadcrumbMakesCompact;
+
   return (
     <Wrapper
+      ref={mergeRefs([ref, internalRef])}
       align="center"
       shrink={false}
       className={className}
@@ -62,7 +80,7 @@ function Header({ left, title, actions, hasSidebar, className }: Props) {
       $insetTitleAdjust={ui.sidebarIsClosed && Desktop.hasInsetTitlebar()}
     >
       {left || hasMobileSidebar ? (
-        <Breadcrumbs>
+        <Breadcrumbs ref={setBreadcrumbRef}>
           {hasMobileSidebar && (
             <MobileMenuButton
               onClick={ui.toggleMobileSidebar}
@@ -74,7 +92,7 @@ function Header({ left, title, actions, hasSidebar, className }: Props) {
         </Breadcrumbs>
       ) : null}
 
-      {isScrolled ? (
+      {isScrolled && !isCompact ? (
         <Title onClick={handleClickTitle}>
           <Fade>{title}</Fade>
         </Title>
@@ -82,7 +100,7 @@ function Header({ left, title, actions, hasSidebar, className }: Props) {
         <div />
       )}
       <Actions align="center" justify="flex-end">
-        {actions}
+        {typeof actions === "function" ? actions({ isCompact }) : actions}
       </Actions>
     </Wrapper>
   );
@@ -151,7 +169,6 @@ const Wrapper = styled(Flex)<WrapperProps>`
 
   ${breakpoint("tablet")`
     padding: 16px;
-    justify-content: center;
     ${(props: WrapperProps) => props.$insetTitleAdjust && `padding-left: 64px;`}
     `};
 `;
@@ -190,4 +207,4 @@ const MobileMenuButton = styled(Button)`
   }
 `;
 
-export default observer(Header);
+export default observer(React.forwardRef(Header));

app/components/Sidebar/Right.tsx

@@ -128,7 +128,7 @@ const Sidebar = styled(m.div)<{
   max-width: 80%;
   border-left: 1px solid ${s("divider")};
   transition: border-left 100ms ease-in-out;
-  z-index: 1;
+  z-index: ${depths.sidebar};
 
   ${breakpoint("mobile", "tablet")`
     display: flex;

app/menus/TemplatesMenu.tsx

@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import { DocumentIcon } from "outline-icons";
+import { DocumentIcon, ShapesIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { MenuButton, useMenuState } from "reakit/Menu";
@@ -14,11 +14,15 @@ import useStores from "~/hooks/useStores";
 import { MenuItem } from "~/types";
 
 type Props = {
+  /** The document to which the templates will be applied */
   document: Document;
+  /** Whether to render the button as a compact icon */
+  isCompact?: boolean;
+  /** Callback to handle when a template is selected */
   onSelectTemplate: (template: Document) => void;
 };
 
-function TemplatesMenu({ onSelectTemplate, document }: Props) {
+function TemplatesMenu({ isCompact, onSelectTemplate, document }: Props) {
   const menu = useMenuState({
     modal: true,
   });
@@ -79,8 +83,13 @@ function TemplatesMenu({ onSelectTemplate, document }: Props) {
     <>
       <MenuButton {...menu}>
         {(props) => (
-          <Button {...props} disclosure neutral>
-            {t("Templates")}
+          <Button
+            {...props}
+            icon={isCompact ? <ShapesIcon /> : undefined}
+            disclosure={!isCompact}
+            neutral
+          >
+            {isCompact ? undefined : t("Templates")}
           </Button>
         )}
       </MenuButton>

app/scenes/Document/components/Header.tsx

@@ -30,6 +30,7 @@ import { publishDocument } from "~/actions/definitions/documents";
 import { navigateToTemplateSettings } from "~/actions/definitions/navigation";
 import { restoreRevision } from "~/actions/definitions/revisions";
 import useActionContext from "~/hooks/useActionContext";
+import useComponentSize from "~/hooks/useComponentSize";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useEditingFocus from "~/hooks/useEditingFocus";
@@ -86,11 +87,13 @@ function DocumentHeader({
   const team = useCurrentTeam({ rejectOnEmpty: false });
   const user = useCurrentUser({ rejectOnEmpty: false });
   const { resolvedTheme } = ui;
-  const isMobile = useMobile();
+  const isMobileMedia = useMobile();
   const isRevision = !!revision;
   const isEditingFocus = useEditingFocus();
-  const { editor } = useDocumentContext();
-  const { hasHeadings } = useDocumentContext();
+  const { hasHeadings, editor } = useDocumentContext();
+  const ref = React.useRef<HTMLDivElement | null>(null);
+  const size = useComponentSize(ref);
+  const isMobile = isMobileMedia || size.width < 700;
 
   // We cache this value for as long as the component is mounted so that if you
   // apply a template there is still the option to replace it until the user
@@ -230,6 +233,7 @@ function DocumentHeader({
   return (
     <>
       <StyledHeader
+        ref={ref}
         $hidden={isEditingFocus}
         hasSidebar
         left={
@@ -254,7 +258,7 @@ function DocumentHeader({
             {document.isArchived && <Badge>{t("Archived")}</Badge>}
           </Flex>
         }
-        actions={
+        actions={({ isCompact }) => (
           <>
             <ObservingBanner />
 
@@ -262,11 +266,15 @@ function DocumentHeader({
               <Status>{t("Saving")}…</Status>
             )}
             {!isDeleted && !isRevision && can.listViews && (
-              <Collaborators document={document} />
+              <Collaborators
+                document={document}
+                limit={isCompact ? 3 : undefined}
+              />
             )}
             {(isEditing || !user?.separateEditMode) && !isTemplate && isNew && (
               <Action>
                 <TemplatesMenu
+                  isCompact={isCompact}
                   document={document}
                   onSelectTemplate={onSelectTemplate}
                 />
@@ -306,6 +314,7 @@ function DocumentHeader({
             {can.update &&
               can.createChildDocument &&
               !isRevision &&
+              !isCompact &&
               !isMobile && (
                 <Action>
                   <NewChildDocumentMenu
@@ -377,7 +386,7 @@ function DocumentHeader({
               />
             </Action>
           </>
-        }
+        )}
       />
     </>
   );