Set fixed height of tile in photos stream, fix #6809

app/assets/stylesheets/stream_element.scss

@@ -18,7 +18,6 @@
       overflow: inherit;
       > .control-icons {
         border-radius: 4px;
-        padding-left: 5px;
         position: absolute;
         right: 6px;
         text-align: center;
@@ -28,12 +27,37 @@
     &:hover > .bd > .control-icons { background: $white; }
   }
   .thumbnail {
-    padding: 10px;
-    margin: 0 0 15px;
     background: $white;
     border-radius: 0;
     box-shadow: $card-shadow;
-    img.big_photo { max-height: 200px; }
+    height: 240px;
+    margin: 0 0 15px;
+    padding: 10px;
+
+    // Vertically align the image
+    text-align: center;
+    white-space: nowrap;
+
+    &:hover,
+    &:focus,
+    &:active {
+      border-color: $light-grey;
+      text-decoration: none;
+    }
+
+    &::before {
+      content: '';
+      display: inline-block;
+      height: 100%;
+      vertical-align: middle;
+    }
+
+    .big-photo {
+      display: inline;
+      margin-left: -4px;
+      max-height: 200px;
+      vertical-align: middle;
+    }
   }
 }
 

app/assets/templates/photo_tpl.jst.hbs

@@ -20,12 +20,10 @@
       </div>
     {{/if}}
 
-    <div class="thumbnail img-thumbnail">
-      <a href="{{sizes.large}}" class="photo-link gallery-picture">
-        <img src="{{sizes.large}}" class="photo big_photo">
+    <a href="{{sizes.large}}" class="thumbnail img-thumbnail photo-link gallery-picture">
+      <img src="{{sizes.large}}" class="photo big-photo">
     </a>
   </div>
-  </div>
   <div class="card-footer">
     <div class="footer-container">
       {{#if status_message}}