From adca894e83263c7ef9e273d1db3e2690398b2c10 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sun, 24 Oct 2021 17:32:07 -0700
Subject: [PATCH] fix: Long titles in command bar should not wrap

---
 app/components/CommandBarItem.js | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/app/components/CommandBarItem.js b/app/components/CommandBarItem.js
index 8b304abe..f85c60fe 100644
--- a/app/components/CommandBarItem.js
+++ b/app/components/CommandBarItem.js
@@ -14,7 +14,7 @@ type Props = {|
 function CommandBarItem({ action, active }: Props, ref) {
   return (
     <Item active={active} ref={ref}>
-      <Flex align="center" gap={8}>
+      <Text align="center" gap={8}>
         <Icon>
           {action.icon ? (
             React.cloneElement(action.icon, { size: 22 })
@@ -24,7 +24,7 @@ function CommandBarItem({ action, active }: Props, ref) {
         </Icon>
         {action.name}
         {action.children?.length ? "…" : ""}
-      </Flex>
+      </Text>
       {action.shortcut?.length ? (
         <div style={{ display: "grid", gridAutoFlow: "column", gap: "4px" }}>
           {action.shortcut.map((sc) => (
@@ -42,6 +42,12 @@ const Icon = styled.div`
   color: ${(props) => props.theme.textSecondary};
 `;
 
+const Text = styled(Flex)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 1;
+`;
+
 const Item = styled.div`
   font-size: 15px;
   padding: 12px 16px;
@@ -51,6 +57,11 @@ const Item = styled.div`
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  min-width: 0;
 `;
 
 const ForwardIcon = styled(BackIcon)`