diff --git a/frontend/src/utils/hide-columns/hide-columns.js b/frontend/src/utils/hide-columns/hide-columns.js
index 766277170..1901130c6 100644
--- a/frontend/src/utils/hide-columns/hide-columns.js
+++ b/frontend/src/utils/hide-columns/hide-columns.js
@@ -123,15 +123,15 @@ export class HideColumns {
     // reposition hider on each window resize event
     window.addEventListener('resize', () => this.repositionHider(hider));
 
+    this.updateColumnDisplay(th.cellIndex, preHidden);
+    this.updateHider(hider, preHidden);
+
     if (preHidden) {
       this._tableUtilContainer.appendChild(hider);
     } else {
       this.hideHiderBehindHeader(hider);
     }
 
-    this.updateColumnDisplay(th.cellIndex, preHidden);
-    this.updateHider(hider, preHidden);
-
     this._tableHiderContainer.children.forEach(hider => this.repositionHider(hider));
   }
 
diff --git a/frontend/src/utils/hide-columns/hide-columns.scss b/frontend/src/utils/hide-columns/hide-columns.scss
index d3df5addc..77a73bee3 100644
--- a/frontend/src/utils/hide-columns/hide-columns.scss
+++ b/frontend/src/utils/hide-columns/hide-columns.scss
@@ -10,8 +10,7 @@
     box-shadow: 0 0 2px 0 rgba(0,0,0,0.6);
     position: absolute;
     overflow: hidden;
-
-    /* transition: transform .2s ease; */
+    transition: transform .2s ease;
     transform: scaleY(0);
     transform-origin: top;
 
@@ -57,7 +56,7 @@
     float: left;
     color: #fff;
     padding: 10px;
-    border-radius: 20px 20px 20px 20px / 50% 50% 50% 50%;
+    border-radius: 20px / 50%;
     margin-right: 20px;
     margin-bottom: 10px;
     cursor: pointer;