Fixing studylist highlighting on IE11

LesionTracker/client/components/viewerSection/viewerSection.styl

@@ -1,11 +1,11 @@
-@import "{ohif:design}/app"
+@require '{ohif:design}/app'
 
 .viewerSection
   display: flex
   flex: 1
   flex-flow: row nowrap
   align-items: stretch
-  height: 'calc(100% - %s)' % ($toolbarHeight + $topBarHeight)
+  height: 'calc(100vh - %s)' % ($toolbarHeight + $topBarHeight)
   width: 100%
 
   .sidebarMenu
@@ -38,11 +38,11 @@
 
   .mainContent
     flex: 1
-    order: 2
-    width: 100%
     height: 100%
+    order: 2
     overflow: hidden
     transition($sidebarTransition)
+    width: 100%
 
   .sidebar-right
     flex: 1

OHIFViewer/client/components/flexboxLayout/flexboxLayout.styl

@@ -7,7 +7,7 @@ $lesionsSidebarMenuWidth = 450px
   flex: 1
   flex-flow: row nowrap
   align-items: stretch
-  height: 'calc(100% - %s)' % ($toolbarHeight + $topBarHeight)
+  height: 'calc(100vh - %s)' % ($toolbarHeight + $topBarHeight)
   width: 100%
 
   .sidebarMenu
@@ -38,11 +38,11 @@ $lesionsSidebarMenuWidth = 450px
 
   .mainContent
     flex: 1
-    order: 2
-    width: 100%
     height: 100%
+    order: 2
     overflow: hidden
     transition($sidebarTransition)
+    width: 100%
 
   .sidebar-right
     flex: 1

Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.styl

@@ -7,14 +7,16 @@
   padding-right: 12px
 
 .mainContent
+  theme('background-color', '$primaryBackgroundColor')
+
   &.sidebar-right-open
     #imageViewerViewports
       padding-right: 7px
-    
+
   &.sidebar-left-open:not(.sidebar-right-open)
     #imageViewerViewports
       padding-right: 13px
-  
+
   &.sidebar-left-open.sidebar-right-open
     #imageViewerViewports
-      padding-right: 8px
+      padding-right: 8px

Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepointBrowser.html

@@ -5,7 +5,7 @@
                 {{>roundedButtonGroup viewTypeButtonGroupData}}
             </div>
             <div class="studyTimepointScrollArea">
-                <div class="p-l-1">
+                <div class="p-x-1">
                     {{#if timepointList.length}}
                         {{#each timepoint in timepointList}}
                             <div class="timepointEntry p-y-2">

Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepointBrowser.styl

@@ -1,4 +1,4 @@
-@import "{ohif:design}/app"
+@require '{ohif:design}/app'
 
 $timepointButtonHeight = 55px
 
@@ -80,25 +80,9 @@ $timepointButtonHeight = 55px
     height: 100%
     overflow-x: hidden
     overflow-y: auto
-    margin-right: -22px
+    margin-right: -36px
     padding-bottom: 20px
-    padding-right: 16px
+    padding-right: 36px
 
     &::-webkit-scrollbar
       display: none
-
-    hr, .timepointHeader, .studyItem, .studyModality.additional
-      margin-right: 16px
-
-  .studySidebarTimepoint .thumbnailEntry.active:before
-    theme('background-color', '$activeColor')
-    border-top-right-radius: 7px
-    border-bottom-right-radius: 7px
-    content: ''
-    display: block
-    height: 91px
-    pointer-events: none
-    position: fixed
-    right: 0
-    top: 0
-    width: 5px

StandaloneViewer/StandaloneViewer/client/components/flexboxLayout/flexboxLayout.styl

@@ -7,7 +7,7 @@ $lesionsSidebarMenuWidth = 450px
   flex: 1
   flex-flow: row nowrap
   align-items: stretch
-  height: 'calc(100% - %s)' % ($toolbarHeight + $topBarHeight)
+  height: 'calc(100vh - %s)' % ($toolbarHeight + $topBarHeight)
   width: 100%
 
   .sidebarMenu
@@ -38,11 +38,11 @@ $lesionsSidebarMenuWidth = 450px
 
   .mainContent
     flex: 1
-    order: 2
-    width: 100%
     height: 100%
+    order: 2
     overflow: hidden
     transition($sidebarTransition)
+    width: 100%
 
   .sidebar-right
     flex: 1