handle select of versions with css

Author: SaraVieira

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/VersionEntry/elements.js

@@ -7,6 +7,7 @@ export const Version = styled.div`
   position: absolute;
   right: ${props => (props.hovering ? (props.withSize ? 5 : 3.5) : 1)}rem;
   color: ${props => props.theme.background.lighten(2).clearer(0.5)};
+  display: ${props => (props.hovering ? 'none' : 'block')};
 `;
 
 export const MoreData = styled(EntryContainer)`
@@ -28,9 +29,10 @@ export const MoreData = styled(EntryContainer)`
 `;
 
 export const VersionSelect = styled(Select)`
+  visibility: ${props => (props.hovering ? 'visible' : 'hidden')};
   width: 60px;
   position: absolute;
-  right: ${props => (props.hovering ? (props.withSize ? 5 : 3.5) : 1)}rem;
+  right: 5rem;
   color: ${props => props.theme.background.lighten(2)};
   margin-top: -4px;
 `;

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/VersionEntry/index.js

@@ -136,27 +136,23 @@ export default class VersionEntry extends React.PureComponent {
           <Link href={`https://www.npmjs.com/package/${dependency}`}>
             {dependency}
           </Link>
-          {hovering ? (
-            <VersionSelect
-              withSize={!!size.size}
-              hovering={hovering}
-              onChange={e => {
-                this.props.onRefresh(dependency, e.target.value);
-                this.setState({ hovering: false });
-              }}
-            >
-              {versions.map(a => (
-                <option key={a} selected={a === dependencies[dependency]}>
-                  {a}
-                </option>
-              ))}
-            </VersionSelect>
-          ) : (
-            <Version withSize={!!size.size} hovering={hovering}>
-              {dependencies[dependency]}{' '}
-              {hovering && version && <span>({version})</span>}
-            </Version>
-          )}
+          <VersionSelect
+            hovering={hovering}
+            onChange={e => {
+              this.props.onRefresh(dependency, e.target.value);
+              this.setState({ hovering: false });
+            }}
+          >
+            {versions.map(a => (
+              <option key={a} selected={a === dependencies[dependency]}>
+                {a}
+              </option>
+            ))}
+          </VersionSelect>
+          <Version withSize={!!size.size} hovering={hovering}>
+            {dependencies[dependency]}{' '}
+            {hovering && version && <span>({version})</span>}
+          </Version>
 
           {hovering && (
             <IconArea>