From 3f0e226587d0710de13641f3541dc21dfb232fe4 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_git@ketrenos.com>
Date: Sun, 29 Jan 2023 14:37:12 -0800
Subject: [PATCH] Photo panel is now sized correctly

Signed-off-by: James Ketrenos <james_git@ketrenos.com>
---
 client/src/App.css | 23 +++++++++++++----------
 client/src/App.tsx | 37 +++++++++++++++++++++----------------
 2 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/client/src/App.css b/client/src/App.css
index 70c65b6..8f65385 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -134,14 +134,23 @@ button {
 .PhotoInfo,
 .FaceInfo {
   display: flex;
-  align-content: center;
-  align-items: center;
-  align-self: center;
-  text-align: center;
+  justify-content: space-around;
   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;
diff --git a/client/src/App.tsx b/client/src/App.tsx
index edd8907..0aec84e 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -205,33 +205,34 @@ const Photo = ({ photoId, onFaceClick }: any) => {
         alt={photo.filename}
         src={`${base}/../${photo.path}thumbs/scaled/${photo.filename}`.replace(/ /g, '%20')}/>
         { faces }
-      </div>
-      <div className="PhotoInfo">{
+    </div>
+    <div className="PhotoInfo">{
         moment(photo.taken).format('MMMM Do YYYY, h:mm:ss a') 
       }, {
           moment(photo.taken).fromNow() 
-      }.</div>
-        <div className="FaceInfo">
-          { faceInfo ? faceInfo : 'Hover over face for information.'}
-        </div>
-      <div className="Actions">
-        { photoSelected.length !== 0 && <Button onClick={forget}>
-          Forget Selected</Button> }
-        <Button onClick={selectAll}>Select All</Button>
-        <Button onClick={clearSelection}>Select None</Button>
-      </div>
+      }.
+    </div>
+    <div className="FaceInfo">
+      { faceInfo ? faceInfo : 'Hover over face for information.'}
+    </div>
+    <div className="Actions">
+      { photoSelected.length !== 0 && <Button onClick={forget}>
+        Forget Selected</Button> }
+      <Button onClick={selectAll}>Select All</Button>
+      <Button onClick={clearSelection}>Select None</Button>
+    </div>
       { photoSelected.length !== 0 && <div style={{ display: 'flex' }}>
         Selected faces (CTRL-CLICK to remove):
-      </div> }
-      <div className="PhotoFaces">
+    </div> }
+    <div className="PhotoFaces">
       { photoSelected.map(face =>
         <Face
           key={face.faceId}
           face={face}
           onFaceClick={(e: any) => faceClick(e, face)}/>
       ) }
-      </div>
     </div>
+  </div>
   );
 };
 
@@ -1056,7 +1057,11 @@ const App = () => {
               <div style={{ margin: '1rem' }}>Select image to view</div>
             }
             { image !== 0 && 
-              <Photo onFaceClick={onFaceClick} photoId={image}/> 
+              <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">