Fix thumbnail scaling for small screens (#863)

src/directives/message_media.html

@@ -22,12 +22,12 @@
 
     <!-- Thumbnails -->
     <span class="in-view-indicator" ng-if="ctrl.type !== 'location'" in-view="ctrl.thumbnailInView($inview)"></span>
-    <div ng-if="ctrl.thumbnail"
+    <img ng-if="ctrl.thumbnail"
          class="preview-image"
-         ng-style="{'background-image': ctrl.thumbnail }"></div>
-    <div ng-if="!ctrl.thumbnail && ctrl.hasPreviewThumbnail()"
+         ng-src="{{ ctrl.thumbnail }}" />
+    <img ng-if="!ctrl.thumbnail && ctrl.hasPreviewThumbnail()"
          class="thumbnail-loader preview-image"
-         ng-style="{'background-image': ctrl.getThumbnailPreviewUriStyle() }"></div>
+         ng-src="{{ ctrl.getThumbnailPreviewUri() }}" />
     <div ng-if="!ctrl.thumbnail && !ctrl.hasPreviewThumbnail()" class="circle">
         <i ng-if="ctrl.type === 'image' || ctrl.isGif" class="material-icons md-24">photo</i>
         <i ng-if="ctrl.type === 'video'" class="material-icons md-24">movie</i>

src/directives/message_media.ts

@@ -175,11 +175,11 @@ export default [
                         } else {
                             if (this.thumbnail === null) {
                                 const setThumbnail = (buf: ArrayBuffer) => {
-                                    this.thumbnail = `url(${bufferToUrl(
+                                    this.thumbnail = bufferToUrl(
                                         buf,
                                         webClientService.appCapabilities.imageFormat.thumbnail,
                                         log,
-                                    )})`;
+                                    );
                                 };
 
                                 if (message.thumbnail.img !== undefined) {

src/sass/components/_message_media.scss

@@ -65,6 +65,13 @@ $loading-ring-thickness: 5px;
         height: $circle-size - (2 * $loading-ring-thickness);
     }
 
+    .animgif {
+        img {
+            max-width: 100%;
+            max-height: 100%;
+        }
+    }
+
     // Thumbnails
     .thumbnail {
         position: relative;
@@ -82,9 +89,8 @@ $loading-ring-thickness: 5px;
         }
 
         .preview-image {
-            background-size: cover;
-            width: 100%;
-            height: 100%;
+            max-width: 100%;
+            max-height: 100%;
         }
 
         // Styling of loader

src/sass/layout/_main.scss

@@ -16,6 +16,7 @@
 #main-wrapper {
     margin: 0 auto;
     width: 98vw;
+    min-width: 350px;
     max-width: 450px;
     height: calc(
         100vh - #{$header-height} - #{$footer-height} - #{$main-padding} * 2 - #{$main-border-top});