Displaying 'I: ' in addition to 's: ' on thumbnail entries

Packages/design/styles/common/global.styl

@@ -4,7 +4,7 @@ html body
   font-family: 'Roboto', 'OpenSans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif
   // Try to fix LT-273, need a monitor to test on though.
   //text-rendering: optimizeLegibility
-  
+
 html hr
   border-top: 1px solid $uiBorderColor
 
@@ -38,4 +38,3 @@ html hr
 
     .modal-header, .modal-footer
       border-color: $uiBorderColor
-

Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.html

@@ -3,19 +3,21 @@
         <div class="p-x-1">
             {{>imageThumbnail (clone this)}}
         </div>
-        <div class="seriesDetails m-a-1">
+        <div class="seriesDetails clearfix m-x-1">
             <div class="seriesDescription">
                 {{this.thumbnail.stack.seriesDescription}}
             </div>
             <div class="seriesInformation">
-                <div class="seriesInformationIcons">
-                    <strong>S:</strong>
-                    <div></div>
-                </div>
                 <div class="seriesInformationNumbers">
                     <div>{{this.thumbnail.stack.seriesNumber}}</div>
+                    {{#unless isUndefined instanceNumber}}<div>{{instanceNumber}}</div>{{/unless}}
                     <div>{{this.thumbnail.stack.numImageFrames}}</div>
                 </div>
+                <div class="seriesInformationIcons">
+                    <strong>S:</strong>
+                    {{#unless isUndefined instanceNumber}}<strong>I:</strong>{{/unless}}
+                    <div></div>
+                </div>
             </div>
         </div>
     </div>

Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.js

@@ -248,5 +248,8 @@ Template.thumbnailEntry.events({
 Template.thumbnailEntry.helpers({
     draggableClass() {
         return Template.instance().isDragAndDrop ? 'draggable' : '';
+    },
+    instanceNumber() {
+        return Template.instance().data.thumbnail.stack.images[0].instanceNumber;
     }
 });

Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.styl

@@ -21,12 +21,13 @@ $seriesCountBackgroundColor = #678696
     word-wrap: break-word
 
   .seriesDescription
+    float: left
     margin-right: 54px
+    width: calc(100% - 50px)
 
   .seriesInformation
-    position: absolute
-    right: 0
-    top: 0
+    float: right
+    width: 50px
 
     .seriesInformationNumbers
     .seriesInformationIcons
@@ -34,15 +35,16 @@ $seriesCountBackgroundColor = #678696
 
     .seriesInformationNumbers
       color: $textSecondaryColor
-      float: left
+      float: right
       font-size: 12px
 
     .seriesInformationIcons
-      float: left
+      float: right
       text-align: right
 
       strong
         color: $activeColor
+        display: block
         font-size: 10px
         font-weight: 900