Remove username from the Identity selector (#903)

gravitational · Jun 24, 2022 · 6ec3b98 · 6ec3b98
1 parent 04d5e3a
commit 6ec3b98
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 7 deletions.
diff --git a/web/packages/teleterm/src/ui/TopBar/Clusters/ClusterSelector/ClusterSelector.tsx b/web/packages/teleterm/src/ui/TopBar/Clusters/ClusterSelector/ClusterSelector.tsx
@@ -45,6 +45,7 @@ const Container = styled.button`
   background: inherit;
   color: inherit;
   font-family: inherit;
+  min-width: 0;
   width: 100%;
   height: 100%;
   border: 0.5px ${props => props.theme.colors.action.disabledBackground} solid;

diff --git a/web/packages/teleterm/src/ui/TopBar/Identity/IdentitySelector/IdentitySelector.tsx b/web/packages/teleterm/src/ui/TopBar/Identity/IdentitySelector/IdentitySelector.tsx
@@ -36,9 +36,6 @@ export const IdentitySelector = forwardRef<
           <Box mr={2}>
             <UserIcon letter={props.userName[0]} />
           </Box>
-          <Text style={{ whiteSpace: 'nowrap' }} typography="subtitle1">
-            {selectorText}
-          </Text>
         </>
       ) : (
         <PamIcon />
@@ -58,7 +55,6 @@ const Container = styled.button`
   flex-direction: row;
   padding: 0 12px;
   height: 100%;
-  min-width: 0;
   border-radius: 4px;
   border-width: 1px;
   border-style: solid;

diff --git a/web/packages/teleterm/src/ui/TopBar/TopBar.tsx b/web/packages/teleterm/src/ui/TopBar/TopBar.tsx
@@ -25,9 +25,9 @@ export function TopBar() {
 const Grid = styled.div`
   background: ${props => props.theme.colors.primary.main};
   display: grid;
-  grid-template-columns: 1fr 4fr 2fr;
+  grid-template-columns: 1fr minmax(0, 700px) 1fr;
   width: 100%;
-  padding: 8px 24px;
+  padding: 8px 16px;
   height: 56px;
   box-sizing: border-box;
   align-items: center;
@@ -38,7 +38,7 @@ const CentralContainer = styled.div`
   column-gap: 12px;
   margin: auto 12px;
   grid-auto-flow: column;
-  grid-auto-columns: 1fr 2fr; // 1fr for a single child, 1fr 2fr for two children
+  grid-auto-columns: 2fr 5fr; // 1fr for a single child, 2fr 5fr for two children
   align-items: center;
   height: 100%;
 `;