Sidebar - fix dependencies overlap (codesandbox#3476)

* add maxWidth to text component

* fix width of version + select padding

Author: siddharthkp

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/Dependency/index.tsx

@@ -149,6 +149,7 @@ export class Dependency extends React.PureComponent<Props, State> {
             >
               <Text
                 variant="muted"
+                maxWidth={75}
                 css={{ display: hovering ? 'none' : 'block' }}
               >
                 {formatVersion(dependencies[dependency])}{' '}
@@ -164,7 +165,7 @@ export class Dependency extends React.PureComponent<Props, State> {
             css={css({
               position: 'absolute',
               right: 0,
-              width: '160px',
+              width: '150px', // overlay on text
             })}
           >
             {hovering && (
@@ -192,7 +193,11 @@ export class Dependency extends React.PureComponent<Props, State> {
                         style={{ outline: 'none' }}
                         singleton={singleton}
                       >
-                        <Button variant="link" onClick={this.handleOpen}>
+                        <Button
+                          variant="link"
+                          onClick={this.handleOpen}
+                          css={css({ minWidth: 5 })}
+                        >
                           {open ? <ArrowDropUp /> : <ArrowDropDown />}
                         </Button>
                       </Tooltip>
@@ -201,7 +206,11 @@ export class Dependency extends React.PureComponent<Props, State> {
                         style={{ outline: 'none' }}
                         singleton={singleton}
                       >
-                        <Button variant="link" onClick={this.handleRefresh}>
+                        <Button
+                          variant="link"
+                          onClick={this.handleRefresh}
+                          css={css({ minWidth: 5 })}
+                        >
                           <RefreshIcon />
                         </Button>
                       </Tooltip>
@@ -210,7 +219,11 @@ export class Dependency extends React.PureComponent<Props, State> {
                         style={{ outline: 'none' }}
                         singleton={singleton}
                       >
-                        <Button variant="link" onClick={this.handleRemove}>
+                        <Button
+                          variant="link"
+                          onClick={this.handleRemove}
+                          css={css({ minWidth: 5 })}
+                        >
                           <CrossIcon />
                         </Button>
                       </Tooltip>

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

@@ -202,16 +202,7 @@ const Entry: React.FC<IEntryProps> = ({
                 error={error}
               />
             ) : (
-              <Text
-                css={{
-                  maxWidth: 150,
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  whiteSpace: 'nowrap',
-                }}
-              >
-                {title}
-              </Text>
+              <Text maxWidth={150}>{title}</Text>
             )}
             {isNotSynced && !state && (
               <NotSyncedIcon css={css({ color: 'blues.300' })} />

packages/components/src/components/Select/index.tsx

@@ -19,6 +19,8 @@ const SelectComponent = styled(Input).attrs({ as: 'select' })(
     transition: 'all ease',
     transitionDuration: theme => theme.speeds[2],
 
+    paddingRight: 5, // select has a caret icon on the right
+
     backgroundImage: theme =>
       theme && `url(${svg(theme.colors.input.placeholderForeground)})`,
     backgroundPosition: 'calc(100% - 8px) center',

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

@@ -8,18 +8,27 @@ const variants = {
   danger: 'errorForeground',
 };
 
+const overflowStyles = {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+};
+
 export const Text = styled(Element).attrs({ as: 'span' })<{
   size?: number;
   align?: string;
   weight?: string;
   block?: boolean;
   variant?: 'body' | 'muted' | 'danger';
-}>(({ size, align, weight, block, variant = 'body', ...props }) =>
+  maxWidth?: number;
+}>(({ size, align, weight, block, variant = 'body', maxWidth, ...props }) =>
   css({
     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 : {}),
   })
 );