Handle long names in the sidebar (codesandbox#3719)

Author: siddharthkp

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/Entry/index.tsx

@@ -196,7 +196,7 @@ const Entry: React.FC<IEntryProps> = ({
             },
           }}
         >
-          <Stack gap={2} align="center">
+          <Stack gap={2} align="center" css={{ width: '100%' }}>
             <EntryIcons type={type} error={moduleHasError} />
             {state === 'editing' ? (
               <FileInput
@@ -216,7 +216,7 @@ const Entry: React.FC<IEntryProps> = ({
                 })}
               />
             ) : (
-              <Text maxWidth={150}>{title}</Text>
+              <Text maxWidth="100%">{title}</Text>
             )}
             {isNotSynced && !state && (
               <NotSyncedIcon css={css({ color: 'blues.300' })} />

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/Summary.tsx

@@ -62,10 +62,10 @@ export const Summary = () => {
                     iconUrl={customTemplate.iconUrl}
                     environment={template}
                   />
-                  <Text maxWidth={190}>{getSandboxName(currentSandbox)}</Text>
+                  <Text maxWidth="100%">{getSandboxName(currentSandbox)}</Text>
                 </Stack>
               ) : (
-                <Text maxWidth={190}>{getSandboxName(currentSandbox)}</Text>
+                <Text maxWidth="100%">{getSandboxName(currentSandbox)}</Text>
               )}
             </Stack>
 
@@ -120,9 +120,14 @@ export const Summary = () => {
                 </Link>
               </ListItem>
             ) : null}
-            <ListItem justify="space-between">
+            <ListItem justify="space-between" gap={2}>
               <Text>Environment</Text>
-              <Link variant="muted" href={templateUrl} target="_blank">
+              <Link
+                variant="muted"
+                href={templateUrl}
+                target="_blank"
+                maxWidth="100%"
+              >
                 {template}
               </Link>
             </ListItem>

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary.tsx

@@ -92,10 +92,12 @@ export const Summary = () => {
                       iconUrl={customTemplate.iconUrl}
                       environment={template}
                     />
-                    <Text maxWidth={190}>{getSandboxName(currentSandbox)}</Text>
+                    <Text maxWidth="100%">
+                      {getSandboxName(currentSandbox)}
+                    </Text>
                   </Stack>
                 ) : (
-                  <Text maxWidth={190}>{getSandboxName(currentSandbox)}</Text>
+                  <Text maxWidth="100%">{getSandboxName(currentSandbox)}</Text>
                 )}
                 <Button
                   variant="link"
@@ -129,7 +131,12 @@ export const Summary = () => {
                     {author.username}
                   </Text>
                   {team && (
-                    <Text size={2} marginTop={1} variant="muted">
+                    <Text
+                      size={2}
+                      marginTop={1}
+                      variant="muted"
+                      maxWidth="100%"
+                    >
                       {team.name}
                     </Text>
                   )}
@@ -165,9 +172,14 @@ export const Summary = () => {
               </Link>
             </ListItem>
           ) : null}
-          <ListItem justify="space-between">
+          <ListItem justify="space-between" gap={2}>
             <Text>Environment</Text>
-            <Link variant="muted" href={templateUrl} target="_blank">
+            <Link
+              variant="muted"
+              href={templateUrl}
+              target="_blank"
+              maxWidth="100%"
+            >
               {template}
             </Link>
           </ListItem>

packages/components/src/components/Avatar/index.tsx

@@ -21,6 +21,7 @@ export const AvatarContainer = styled(Element).attrs({ as: 'span' })(
     height: 8,
     width: 8,
     position: 'relative',
+    flexShrink: 0, // avatars should never shrink inside flex
   })
 );
 

packages/components/src/components/Text/index.tsx

@@ -29,9 +29,9 @@ export const Text = styled(Element).attrs({ as: 'span' })<ITextProps>(
       fontSize: size || 'inherit', // from theme.fontSizes
       textAlign: align || 'left',
       fontWeight: weight || null, // from theme.fontWeights
-      display: block ? 'block' : 'inline',
       color: variants[variant],
       maxWidth,
       ...(maxWidth ? overflowStyles : {}),
+      display: block || maxWidth ? 'block' : 'inline',
     })
 );