Arduino-qd17
diff --git a/‎client/modules/IDE/components/AssetList.jsx
Lines changed: 8 additions & 6 deletions b/‎client/modules/IDE/components/AssetList.jsx
Lines changed: 8 additions & 6 deletions
diff --git a/‎client/modules/IDE/components/CopyableInput.jsx
Lines changed: 11 additions & 9 deletions b/‎client/modules/IDE/components/CopyableInput.jsx
Lines changed: 11 additions & 9 deletions
diff --git a/‎client/styles/components/_copyable-input.scss
Lines changed: 18 additions & 14 deletions b/‎client/styles/components/_copyable-input.scss
Lines changed: 18 additions & 14 deletions
@@ -44,12 +44,14 @@ class AssetList extends React.Component {
             </thead>
             <tbody>
               {this.props.assets.map(asset =>
-                (<tr className="asset-table__row" key={asset.key}>
-                  <td>{asset.name}</td>
-                  <td>{prettyBytes(asset.size)}</td>
-                  <td><Link to={asset.url} target="_blank">View</Link></td>
-                  <td><Link to={`/${this.props.username}/sketches/${asset.sketchId}`}>{asset.sketchName}</Link></td>
-                </tr>))}
+                (
+                  <tr className="asset-table__row" key={asset.key}>
+                    <td>{asset.name}</td>
+                    <td>{prettyBytes(asset.size)}</td>
+                    <td><Link to={asset.url} target="_blank">View</Link></td>
+                    <td><Link to={`/${this.props.username}/sketches/${asset.sketchId}`}>{asset.sketchName}</Link></td>
+                  </tr>
+                ))}
             </tbody>
           </table>}
       </div>
 
@@ -35,21 +35,23 @@ class CopyableInput extends React.Component {
     } = this.props;
     return (
       <div className="copyable-input">
-        <label className="copyable-input__label" htmlFor="copyable-input__value">{label}</label>
         <div
           className="copyable-input__value-container tooltipped-no-delay"
           aria-label="Copied to Clipboard!"
           ref={(element) => { this.tooltip = element; }}
           onMouseLeave={this.onMouseLeaveHandler}
         >
-          <input
-            type="text"
-            className="copyable-input__value"
-            id="copyable-input__value"
-            value={value}
-            ref={(element) => { this.input = element; }}
-            readOnly
-          />
+          <label className="copyable-input__label" htmlFor="copyable-input__value">
+            {label}
+            <input
+              type="text"
+              className="copyable-input__value"
+              id="copyable-input__value"
+              value={value}
+              ref={(element) => { this.input = element; }}
+              readOnly
+            />
+          </label>
         </div>
       </div>
     );
 
@@ -13,12 +13,12 @@
 .copyable-input__value {
   width: 100%;
   font-size: #{16 / $base-font-size}rem;
+  margin-top: #{5 / $base-font-size}rem;
 }
 
 .copyable-input__label {
   width: 100%;
   font-size: #{12 / $base-font-size}rem;
-  padding-bottom: #{5 / $base-font-size}rem;
   @include themify() {
     color: getThemifyVariable('inactive-text-color');
   }
@@ -34,20 +34,24 @@
   width: 100%;
 }
 
-.tooltipped::after {
-  @include themify() {
-    background-color: getThemifyVariable('button-background-hover-color');
-    color: getThemifyVariable('button-hover-color');
+.copyable-input {
+  .tooltipped::after {
+    @include themify() {
+      background-color: getThemifyVariable('button-background-hover-color');
+      color: getThemifyVariable('button-hover-color');
+    }
+    font-family: Montserrat, sans-serif;
+    font-size: #{12 / $base-font-size}rem;
+    bottom: #{41 / $base-font-size}rem;
   }
-  font-family: Montserrat, sans-serif;
-  font-size: #{12 / $base-font-size}rem;
-}
 
-.tooltipped-n::before,
-.tooltipped::before,
- {
-  @include themify() {
-    color: getThemifyVariable('button-background-hover-color');
-    border-top-color: getThemifyVariable('button-background-hover-color');
+  .tooltipped-n::before,
+  .tooltipped::before,
+  {
+    @include themify() {
+      color: getThemifyVariable('button-background-hover-color');
+      border-top-color: getThemifyVariable('button-background-hover-color');
+    }
+    top: #{14 / $base-font-size}rem;
   }
 }