fix: touch up UI for compact breadcrumbs (#1961)

app/components/Breadcrumb.js

@@ -160,10 +160,13 @@ const SmallPadlockIcon = styled(PadlockIcon)`
 `;
 
 const SmallSlash = styled(GoToIcon)`
-  width: 15px;
-  height: 10px;
+  width: 12px;
+  height: 12px;
+  vertical-align: middle;
   flex-shrink: 0;
-  opacity: 0.25;
+
+  fill: ${(props) => props.theme.slate};
+  opacity: 0.5;
 `;
 
 const Crumb = styled(Link)`

app/components/DocumentMeta.js

@@ -18,6 +18,11 @@ const Container = styled(Flex)`
   min-width: 0;
 `;
 
+const Viewed = styled.span`
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
 const Modified = styled.span`
   color: ${(props) => props.theme.textTertiary};
   font-weight: ${(props) => (props.highlight ? "600" : "400")};
@@ -112,16 +117,16 @@ function DocumentMeta({
     }
     if (!lastViewedAt) {
       return (
-        <>
+        <Viewed>
           •&nbsp;<Modified highlight>{t("Never viewed")}</Modified>
-        </>
+        </Viewed>
       );
     }
 
     return (
-      <span>
+      <Viewed>
         •&nbsp;{t("Viewed")} <Time dateTime={lastViewedAt} addSuffix shorten />
-      </span>
+      </Viewed>
     );
   };