Photo panel is now sized correctly

Signed-off-by: James Ketrenos <james_git@ketrenos.com>

client/src/App.css

@@ -134,14 +134,23 @@ button {
 .PhotoInfo,
 .FaceInfo {
   display: flex;
-  align-content: center;
+  justify-content: space-around;
-  align-items: center;
-  align-self: center;
-  text-align: center;
   width: 100%;
+}
+
+.Photo {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  max-height: 60vh;
   flex-grow: 1;
 }
 
+.spacer {
+  display: flex;
+  flex-shrink: 1;
+}
+
 .Photo .FaceBox {
   border: 1px solid red;
   position: absolute;
@@ -152,12 +161,6 @@ button {
   box-shadow: 0px 0px 10px black;
 }
 
-.Photo {
-  display: flex;
-  position: relative;
-  flex-direction: column;
-}
-
 .PhotoFaces .UnknownFace,
 .Identities .UnknownFace {
   font-size: 2rem;

client/src/App.tsx

@@ -210,7 +210,8 @@ const Photo = ({ photoId, onFaceClick }: any) => {
         moment(photo.taken).format('MMMM Do YYYY, h:mm:ss a') 
       }, {
           moment(photo.taken).fromNow() 
-      }.</div>
+      }.
+    </div>
     <div className="FaceInfo">
       { faceInfo ? faceInfo : 'Hover over face for information.'}
     </div>
@@ -1056,7 +1057,11 @@ const App = () => {
               <div style={{ margin: '1rem' }}>Select image to view</div>
             }
             { image !== 0 && 
+              <div style={{ display: 'flex', flexDirection: 'row' }}>
+                <div className="spacer"></div>
                 <Photo onFaceClick={onFaceClick} photoId={image}/> 
+                <div className="spacer"></div>
+              </div>
             }
             { guess !== undefined && guess.identity && <div 
               className="Guess">