From b6286e1abd9769a78dcea307cc85378d945ed0e2 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Mon, 2 Nov 2020 16:36:43 -0500
Subject: [PATCH] landscape: flex-shrink group title in dropdown

Instead of using a maxWidth in pixels, we flexbox to truncate the title.
---
 pkg/interface/src/views/components/Dropdown.tsx    |  4 ++--
 .../views/landscape/components/GroupSwitcher.tsx   | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/pkg/interface/src/views/components/Dropdown.tsx b/pkg/interface/src/views/components/Dropdown.tsx
index a86aed55d..e113ae50a 100644
--- a/pkg/interface/src/views/components/Dropdown.tsx
+++ b/pkg/interface/src/views/components/Dropdown.tsx
@@ -111,8 +111,8 @@ export function Dropdown(props: DropdownProps) {
   });
 
   return (
-    <Box flexShrink={0} position={open ? "relative" : "static"}>
-      <ClickBox ref={anchorRef} onClick={onOpen}>
+    <Box flexShrink={1} position={open ? "relative" : "static"} minWidth='0'>
+      <ClickBox width='100%' ref={anchorRef} onClick={onOpen}>
         {children}
       </ClickBox>
       {open && (
diff --git a/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx b/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx
index 20b896708..295515dc1 100644
--- a/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx
+++ b/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx
@@ -165,24 +165,24 @@ export function GroupSwitcher(props: {
               </Col>
             }
           >
-            <Row p={2} alignItems="center">
-              <Row alignItems="center" mr={1} flex='1'>
-                <Text overflow='hidden' display='inline-block' maxWidth='131px'  style={{ textOverflow: 'ellipsis', whiteSpace: 'pre'}}>{title}</Text>
+            <Row p={2} alignItems="center" width='100%' minWidth='0'>
+              <Row alignItems="center" mr={1} flex='1' width='100%' minWidth='0'>
+                <Text overflow='hidden' display='inline-block' flexShrink='1' style={{ textOverflow: 'ellipsis', whiteSpace: 'pre'}}>{title}</Text>
+                <Icon size='12px' ml='1' mt="0px" display="inline-block" icon="ChevronSouth" />
               </Row>
-              <Icon size='12px' ml='1' mt="0px" display="inline-block" icon="ChevronSouth" />
             </Row>
           </Dropdown>
-          <Row pr={1} justifyContent="flex-end" alignItems="center">
+          <Row pr={1} flexShrink='0' justifyContent="flex-end" alignItems="center">
             {workspace.type === "group" && (
               <>
-                <Link to={navTo("/invites")}>
+                <Link flexShrink='0' to={navTo("/invites")}>
                   <Icon
                     display="block"
                     color='blue'
                     icon="CreateGroup"
                   />
                 </Link>
-                <Link to={navTo("/popover/settings")}>
+                <Link flexShrink='0' to={navTo("/popover/settings")}>
                   <Icon color='gray' display="block" m={2} icon="Gear" />
                 </Link>
               </>