properly fit photo on screen

frontend/src/Photos/Overview.scss

@@ -1,31 +1,55 @@
 @import "~@blueprintjs/core/lib/scss/variables";
 
+:root {
+    --photoOverlayDrawerWidth: 5rem;
+}
+
 #photoOverlayContainer {
     width: 100%;
     height: 100%;
-    display: flex;
     align-items: center;
     justify-content: center;
     transition: 0.3s;
 
     #photo {
+        width: calc(100vw - var(--photoOverlayDrawerWidth));
         height: 100%;
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
 
-        img {
+        #photoView {
-            box-shadow: $pt-elevation-shadow-4;
+            height: 100%;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            #photoImg {
+                object-fit: contain;
+                max-height: 100%;
+                max-width: 100%;
+                width: auto;
+                height: auto;
+                box-shadow: $pt-elevation-shadow-4;
+                transition: all 0.3s;
+
+                &.notLoaded {
+                    opacity: 0;
+                }
+
+                &.loaded {
+                    opacity: 1;
+                }
+            }
+
         }
-
-        transition: all 0.3s;
     }
 
+
     #photoOverlayDrawer {
-        height: 100%;
+        position: absolute;
-        align-self: flex-end;
+        top: 0;
-        justify-self: flex-end;
+        right: 0;
+        width: var(--photoOverlayDrawerWidth);
+        height: 100vh;
         margin-left: auto;
         display: flex;
         flex-direction: row;
@@ -42,7 +66,7 @@
 .bp3-overlay-appear {
     opacity: 0;
 
-    #photo {
+    #photoImg {
         transform: scale(0.95, 0.95);
     }
 
@@ -55,7 +79,7 @@
 .bp3-overlay-appear-active {
     opacity: 1;
 
-    #photo {
+    #photoImg {
         transform: scale(1, 1);
     }
 
@@ -68,7 +92,7 @@
 .bp3-overlay-exit {
     opacity: 1;
 
-    #photo {
+    #photoImg {
         transform: scale(1, 1);
     }
 
@@ -80,7 +104,7 @@
 .bp3-overlay-exit-active {
     opacity: 0;
 
-    #photo {
+    #photoImg {
         transform: scale(0.95, 0.95);
     }
 

frontend/src/Photos/Photo.scss

@@ -1,25 +1,6 @@
 @import "~@blueprintjs/core/lib/scss/variables";
 
-#photoView {
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    align-items: center;
 
-    #photo {
-        max-height: 100%;
-        max-width: 100%;
-
-        &.notLoaded {
-            opacity: 0;
-        }
-
-        &.loaded {
-            opacity: 1;
-        }
-    }
-
-}
 
 .bp3-dark {
     #photoView {}

frontend/src/Photos/Photo.tsx

@@ -36,7 +36,7 @@ export const PhotoComponent: React.FunctionComponent<IPhotoComponentProps> = (
             {fileExists ? (
                 <div id="photoView">
                     <img
-                        id="photo"
+                        id="photoImg"
                         loading="lazy"
                         className={loaded ? "loaded" : "notLoaded"}
                         onLoad={() => setLoaded(true)}

package.json

@@ -89,4 +89,4 @@
       "pre-commit": "npm run lint-all && npm run prettier-check"
     }
   }
-}
+}