Merge pull request #5097 from VidVidex/master

Correctly display preview for very tall images

client/components/cards/attachments.css

@@ -24,7 +24,6 @@
   min-width: 150px;
   max-height: 150px;
   padding-right: 16px;
-
 }
 .attachment-thumbnail {
   max-width: 150px;
@@ -78,10 +77,10 @@
   width: 100%;
   height: 100vh;
   position: fixed;
-  top: 48px;  /* height of the navbar */
+  top: 0;
   left: 0;
   z-index: 9999 !important;
-  background: rgba(13,13,13,0.95);
+  background: rgba(13, 13, 13, 0.95);
 }
 #viewer-container {
   display: flex;
@@ -99,10 +98,12 @@
 #attachment-name {
   color: white;
   font-size: 1.5em;
-  max-width: calc(100% - 50px); /* Make sure the name does not overlap the close button */
+  max-width: calc(
+    100% - 50px
+  ); /* Make sure the name does not overlap the close button */
 }
 #viewer-close {
-  color:white;
+  color: white;
   cursor: pointer;
   font-size: 4em;
   top: 0;
@@ -111,26 +112,32 @@
 }
 .attachment-arrow {
   font-size: 4em;
-  color:white;
+  color: white;
   cursor: pointer;
   align-self: center;
   margin: 0 20px;
 }
+#viewer-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: calc(100% - 50px);
+}
 #image-viewer {
-  background:
-    repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%)
-      50% / 20px 20px; /* Checkerboard background for transparent images */
+  background: repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%) 50% /
+    20px 20px; /* Checkerboard background for transparent images */
   max-width: 100%;
   max-height: 100%;
 }
 #pdf-viewer {
   width: 40vw;
-  height: 100vh;
+  height: 100%;
 }
-#txt-viewer{
+#txt-viewer {
   background-color: white;
   width: 40vw;
-  height: 100vh;
+  height: 100%;
 }
 .pdf-preview-error {
   margin-top: 20vh;
@@ -149,25 +156,29 @@
   #viewer-container {
     display: block;
   }
-  .attachment-arrow{
+  .attachment-arrow {
     position: absolute;
     bottom: 2.2em;
     font-size: 1.6em;
     padding: 16px;
   }
-  #prev-attachment{
+  #prev-attachment {
     left: 0;
   }
-  #next-attachment{
+  #next-attachment {
     right: 0;
   }
   #pdf-viewer {
     width: 100%;
-    height: calc(100vh - 155px);  /* Full height - height of top and bottom bars */
+    height: calc(
+      100vh - 155px
+    ); /* Full height - height of top and bottom bars */
   }
   #txt-viewer {
     width: 100%;
-    height: calc(100vh - 155px);  /* Full height - height of top and bottom bars */
+    height: calc(
+      100vh - 155px
+    ); /* Full height - height of top and bottom bars */
   }
   #audio-viewer {
     margin-top: 20%;