From 79740eeee74db4029761710112959d25cf604f10 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Tue, 15 Oct 2024 10:39:45 +0530
Subject: [PATCH] Avatar fit

---
 .../new/photos/components/PeopleList.tsx       | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/web/packages/new/photos/components/PeopleList.tsx b/web/packages/new/photos/components/PeopleList.tsx
index 2fb88b4983..d72af38787 100644
--- a/web/packages/new/photos/components/PeopleList.tsx
+++ b/web/packages/new/photos/components/PeopleList.tsx
@@ -211,12 +211,12 @@ export const SuggestionFaceList: React.FC<SuggestionFaceListProps> = ({
     return (
         <SuggestionFaceList_>
             {faces.map(({ file, faceID }) => (
-                <UnclusteredFace key={faceID}>
+                <SuggestionFace key={faceID}>
                     <FaceCropImageView
                         placeholderDimension={112}
                         {...{ file, faceID }}
                     />
-                </UnclusteredFace>
+                </SuggestionFace>
             ))}
         </SuggestionFaceList_>
     );
@@ -225,7 +225,19 @@ export const SuggestionFaceList: React.FC<SuggestionFaceListProps> = ({
 const SuggestionFaceList_ = styled("div")`
     display: flex;
     flex-wrap: wrap;
-    gap: 5px;
+    gap: 2px;
+    border: 1px solid tomato;
+`;
+
+const SuggestionFace = styled("div")`
+    width: 87px;
+    height: 87px;
+    border-radius: 50%;
+    overflow: hidden;
+    & > img {
+        width: 100%;
+        height: 100%;
+    }
 `;
 
 type FaceCropImageViewProps = PreviewableFace & {