From b4d307b3b431ff044295453777e5e98bd124ad87 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Thu, 14 Jan 2021 19:36:31 -0800
Subject: [PATCH] fix: Confusing breadcrumb collapsing

---
 app/components/Breadcrumb.js | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/app/components/Breadcrumb.js b/app/components/Breadcrumb.js
index b6130a16f..b6a527588 100644
--- a/app/components/Breadcrumb.js
+++ b/app/components/Breadcrumb.js
@@ -31,11 +31,11 @@ function Icon({ document }) {
   if (document.isDeleted) {
     return (
       <>
-        <CollectionName to="/trash">
+        <CategoryName to="/trash">
           <TrashIcon color="currentColor" />
           &nbsp;
           <span>{t("Trash")}</span>
-        </CollectionName>
+        </CategoryName>
         <Slash />
       </>
     );
@@ -43,11 +43,11 @@ function Icon({ document }) {
   if (document.isArchived) {
     return (
       <>
-        <CollectionName to="/archive">
+        <CategoryName to="/archive">
           <ArchiveIcon color="currentColor" />
           &nbsp;
           <span>{t("Archive")}</span>
-        </CollectionName>
+        </CategoryName>
         <Slash />
       </>
     );
@@ -55,11 +55,11 @@ function Icon({ document }) {
   if (document.isDraft) {
     return (
       <>
-        <CollectionName to="/drafts">
+        <CategoryName to="/drafts">
           <EditIcon color="currentColor" />
           &nbsp;
           <span>{t("Drafts")}</span>
-        </CollectionName>
+        </CategoryName>
         <Slash />
       </>
     );
@@ -67,11 +67,11 @@ function Icon({ document }) {
   if (document.isTemplate) {
     return (
       <>
-        <CollectionName to="/templates">
+        <CategoryName to="/templates">
           <ShapesIcon color="currentColor" />
           &nbsp;
           <span>{t("Templates")}</span>
-        </CollectionName>
+        </CategoryName>
         <Slash />
       </>
     );
@@ -197,4 +197,8 @@ const CollectionName = styled(Link)`
   }
 `;
 
+const CategoryName = styled(CollectionName)`
+  flex-shrink: 0;
+`;
+
 export default observer(Breadcrumb);