Squatting the series information to a single line if there is no series description to display

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

@@ -17,6 +17,10 @@
   transition($sidebarTransition)
   width: 217px
 
+  -moz-background-clip: padding
+  -webkit-background-clip: padding
+  background-clip: padding-box
+
 .imageThumbnailClone
   margin: 0 !important
 

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

@@ -1,24 +1,30 @@
 <template name="thumbnailEntry">
-    <div class="thumbnailEntry noselect m-t-1 m-b-2 {{draggableClass}} {{#if isDisplaySetActive this.thumbnail.stack.displaySetInstanceUid viewportIndex}}active{{/if}}">
-        <div class="p-x-1">
-            {{>imageThumbnail (clone this)}}
-        </div>
-        <div class="seriesDetails clearfix m-x-1">
-            <div class="seriesDescription">
-                {{this.thumbnail.stack.seriesDescription}}
+    {{#let stack=this.thumbnail.stack}}
+        <div class="thumbnailEntry noselect m-t-1 m-b-2 {{draggableClass}} {{#if isDisplaySetActive stack.displaySetInstanceUid viewportIndex}}active{{/if}}">
+            <div class="p-x-1">
+                {{>imageThumbnail (clone this)}}
             </div>
-            <div class="seriesInformation">
-                <div class="seriesInformationNumbers">
-                    <div>{{this.thumbnail.stack.seriesNumber}}</div>
-                    {{#unless isUndefined instanceNumber}}<div>{{instanceNumber}}</div>{{/unless}}
-                    <div>{{this.thumbnail.stack.numImageFrames}}</div>
+            <div class="seriesDetails clearfix m-x-1 {{#unless stack.seriesDescription}}info-only{{/unless}}">
+                <div class="seriesDescription">
+                    {{stack.seriesDescription}}
                 </div>
-                <div class="seriesInformationIcons">
-                    <strong>S:</strong>
-                    {{#unless isUndefined instanceNumber}}<strong>I:</strong>{{/unless}}
-                    <div></div>
+                <div class="seriesInformation">
+                    <div class="item item-series clearfix">
+                        <div class="icon">S:</div>
+                        <div class="value">{{stack.seriesNumber}}</div>
+                    </div>
+                    {{#unless isUndefined instanceNumber}}
+                        <div class="item item-series clearfix">
+                            <div class="icon">I:</div>
+                            <div class="value">{{instanceNumber}}</div>
+                        </div>
+                    {{/unless}}
+                    <div class="item item-frames clearfix">
+                        <div class="icon"><div></div></div>
+                        <div class="value">{{stack.numImageFrames}}</div>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
+    {{/let}}
 </template>

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

@@ -16,37 +16,66 @@ $seriesCountBackgroundColor = #678696
     color: $textPrimaryColor
     font-size: 14px
     line-height: 1.3em
+    margin-top: 5px
+    max-width: 217px
     min-height: 36px
     position: relative
     word-wrap: break-word
 
+    &.info-only
+      min-height: auto
+
+      .seriesDescription
+        display: none
+
+      .seriesInformation
+        display: flex
+        float: none
+        max-width: none
+        padding-right: none
+
+        .item
+          flex: 1
+          text-align: center
+
+          .icon, .value
+            display: inline
+            float: none
+            line-height: 25px
+
+          .value
+            margin-left: 0
+            width: auto
+
   .seriesDescription
     float: left
-    margin-right: 54px
     width: calc(100% - 50px)
 
   .seriesInformation
+    display: table
     float: right
-    width: 50px
+    padding-right: 4px
+    max-width: 50px
 
-    .seriesInformationNumbers
-    .seriesInformationIcons
-      margin-right: 4px
+    .item-frames .icon
+      height: 18px
 
-    .seriesInformationNumbers
+    .value
       color: $textSecondaryColor
+      display: inline-block
       float: right
       font-size: 12px
+      margin-left: 4px
+      width: calc(100% - 15px)
 
-    .seriesInformationIcons
-      float: right
+    .icon
+      color: $activeColor
+      display: inline-block
+      float: left
+      font-size: 10px
+      font-weight: 900
       text-align: right
-
-      strong
-        color: $activeColor
-        display: block
-        font-size: 10px
-        font-weight: 900
+      width: 11px
 
       div
         background-color: $seriesCountBackgroundColor
@@ -64,6 +93,6 @@ $seriesCountBackgroundColor = #678696
         &:after
           border: 1px solid $primaryBackgroundColor
           content: ''
-          display: block
+          display: inline-block
           height: 11px
           width: 11px