From 1b01b733f77631647ee7686fe6b7c8267778cc8b Mon Sep 17 00:00:00 2001
From: Conrad Chan <conradchan@box.com>
Date: Mon, 4 Mar 2019 15:18:44 -0800
Subject: [PATCH] Chore: address PR comments

---
 src/lib/viewers/doc/_docBase.scss             | 22 +++++++++++--------
 .../document/Thumbnails.e2e.test.js           |  4 ++--
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/lib/viewers/doc/_docBase.scss b/src/lib/viewers/doc/_docBase.scss
index 0e6ee94a25..fca0e18d54 100644
--- a/src/lib/viewers/doc/_docBase.scss
+++ b/src/lib/viewers/doc/_docBase.scss
@@ -1,6 +1,7 @@
 @import '../../boxuiVariables';
 
 $thumbnail-border-radius: 4px;
+$thumbnail-sidebar-width: 201px;
 
 .bp {
     .bp-thumbnails-container {
@@ -8,15 +9,22 @@ $thumbnail-border-radius: 4px;
         bottom: 0;
         display: flex;
         flex: 0 0 auto;
-        left: -201px;
+        left: 0;
         position: absolute;
         top: 0;
-        transition: left 300ms cubic-bezier(.4, 0, .2, 1);
-        width: 201px; // Accounts for the 1px border on the right so the remaining width is actually 180
+        transform: translateX(-$thumbnail-sidebar-width);
+        transition: transform 300ms cubic-bezier(.4, 0, .2, 1);
+        width: $thumbnail-sidebar-width; // Accounts for the 1px border on the right so the remaining width is actually 180
     }
 
-    &.bp-thumbnails-open .bp-thumbnails-container {
-        left: 0;
+    &.bp-thumbnails-open {
+        .bp-thumbnails-container {
+            transform: translateX(0);
+        }
+
+        .bp-content {
+            left: $thumbnail-sidebar-width;
+        }
     }
 
     .bp-thumbnail {
@@ -59,10 +67,6 @@ $thumbnail-border-radius: 4px;
     .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-nav {
         border-color: $fours;
     }
-
-    &.bp-thumbnails-open .bp-content {
-        left: 201px;
-    }
 }
 
 .bp-theme-dark {
diff --git a/test/integration/document/Thumbnails.e2e.test.js b/test/integration/document/Thumbnails.e2e.test.js
index eb130dcb41..a8b3e1b5f0 100644
--- a/test/integration/document/Thumbnails.e2e.test.js
+++ b/test/integration/document/Thumbnails.e2e.test.js
@@ -44,9 +44,9 @@ describe('Preview Document Thumbnails', () => {
     it('Should render thumbnails when toggled', () => {
         showDocumentPreview({ enableThumbnailsSidebar: true });
 
-        toggleThumbnails().should('be.visible');
+        toggleThumbnails().should('have.css', 'transform', 'matrix(1, 0, 0, 1, 0, 0)'); // translateX(0)
 
-        toggleThumbnails().should('not.be.visible');
+        toggleThumbnails().should('have.css', 'transform', 'matrix(1, 0, 0, 1, -201, 0)'); // translateX(-201px)
     });
 
     it('Should be able to change page by clicking on the thumbnail', () => {