From db0c91fee54db24970b83342b770b744ffbadbd7 Mon Sep 17 00:00:00 2001
From: Vid Smole <vid.smole@gmail.com>
Date: Mon, 21 Aug 2023 18:18:41 +0200
Subject: [PATCH 1/2] Fix image sizing when image is very tall

---
 client/components/cards/attachments.css | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/client/components/cards/attachments.css b/client/components/cards/attachments.css
index 95820e06e..2bf8f8899 100644
--- a/client/components/cards/attachments.css
+++ b/client/components/cards/attachments.css
@@ -78,7 +78,7 @@
   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);
@@ -116,21 +116,28 @@
   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 */
-  max-width: 100%;
-  max-height: 100%;
+      max-width: 100%;
+      max-height: 100%;
 }
 #pdf-viewer {
   width: 40vw;
-  height: 100vh;
+  height: 100%;
 }
 #txt-viewer{
   background-color: white;
   width: 40vw;
-  height: 100vh;
+  height: 100%;
 }
 .pdf-preview-error {
   margin-top: 20vh;

From cb2a683f0a242af989910e2ce0c964ba2d52fcff Mon Sep 17 00:00:00 2001
From: Vid Smole <vid.smole@gmail.com>
Date: Mon, 21 Aug 2023 18:22:14 +0200
Subject: [PATCH 2/2] Reformat file

---
 client/components/cards/attachments.css | 36 ++++++++++++++-----------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/client/components/cards/attachments.css b/client/components/cards/attachments.css
index 2bf8f8899..4ca226d42 100644
--- a/client/components/cards/attachments.css
+++ b/client/components/cards/attachments.css
@@ -24,7 +24,6 @@
   min-width: 150px;
   max-height: 150px;
   padding-right: 16px;
-
 }
 .attachment-thumbnail {
   max-width: 150px;
@@ -81,7 +80,7 @@
   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,7 +112,7 @@
 }
 .attachment-arrow {
   font-size: 4em;
-  color:white;
+  color: white;
   cursor: pointer;
   align-self: center;
   margin: 0 20px;
@@ -124,17 +125,16 @@
   height: calc(100% - 50px);
 }
 #image-viewer {
-  background:
-    repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%)
-      50% / 20px 20px; /* Checkerboard background for transparent images */
-      max-width: 100%;
-      max-height: 100%;
+  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: 100%;
 }
-#txt-viewer{
+#txt-viewer {
   background-color: white;
   width: 40vw;
   height: 100%;
@@ -156,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%;