diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx
index 65974298..a79166b3 100644
--- a/client/modules/IDE/components/SketchList.jsx
+++ b/client/modules/IDE/components/SketchList.jsx
@@ -14,10 +14,10 @@ class SketchList extends React.Component {
   constructor(props) {
     super(props);
     this.closeSketchList = this.closeSketchList.bind(this);
+    this.props.getProjects(this.props.username);
   }
 
   componentDidMount() {
-    this.props.getProjects(this.props.username);
     document.getElementById('sketchlist').focus();
   }
 
@@ -48,7 +48,7 @@ class SketchList extends React.Component {
             <tbody>
               {this.props.sketches.map(sketch =>
                 <tr className="sketches-table__row visibility-toggle" key={sketch.id}>
-                  <td>
+                  <td className="sketch-list__trash-column">
                   {(() => { // eslint-disable-line
                     if (this.props.username === this.props.user.username || this.props.username === undefined) {
                       return (
diff --git a/client/styles/components/_sketch-list.scss b/client/styles/components/_sketch-list.scss
index 3eddc8c6..76fb82a4 100644
--- a/client/styles/components/_sketch-list.scss
+++ b/client/styles/components/_sketch-list.scss
@@ -28,7 +28,7 @@
   max-height: 100%;
   border-spacing: 0;
   & .sketch-list__trash-column {
-    width: #{22 / $base-font-size}rem;
+    width: #{23 / $base-font-size}rem;
   }
 }
 
@@ -75,6 +75,8 @@
 
 .visibility-toggle .sketch-list__trash-button {
   @extend %hidden-element;
+  width:#{20 / $base-font-size}rem;
+  height:#{20 / $base-font-size}rem;
 }
 
 .visibility-toggle:hover .sketch-list__trash-button {
@@ -86,8 +88,6 @@
     position: initial;
     left: 0;
     top: 0;
-    width:#{20 / $base-font-size}rem;
-    height:#{20 / $base-font-size}rem;
       & g {
         opacity: 1;
         fill: getThemifyVariable('icon-hover-color');