diff --git a/internal/web/ui/templates/face_gallery.html b/internal/web/ui/templates/face_gallery.html
index 6947758..51ca000 100644
--- a/internal/web/ui/templates/face_gallery.html
+++ b/internal/web/ui/templates/face_gallery.html
@@ -18,10 +18,10 @@
     </div>
   </div>
   {{if .FaceGalleryPersons}}
-  <div style="display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:12px">
+  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;margin-top:12px">
     {{range .FaceGalleryPersons}}
-    <div class="card" style="padding:8px">
-      <div class="photo-viewer" data-photos='[{{range $i,$p := .Photos}}{{if $i}},{{end}}"/ui/face-photo/{{$p}}"{{end}}]' style="width:100%;height:220px;background:var(--surface-soft);border-radius:var(--radius);overflow:hidden;position:relative">
+    <div class="card" style="padding:8px;max-width:200px">
+      <div class="photo-viewer" data-photos='[{{range $i,$p := .Photos}}{{if $i}},{{end}}"/ui/face-photo/{{$p}}"{{end}}]' style="width:100%;aspect-ratio:3/4;background:var(--surface-soft);border-radius:var(--radius);overflow:hidden;position:relative">
         {{if .Photos}}
         <img src="/ui/face-photo/{{index .Photos 0}}" style="width:100%;height:100%;object-fit:cover" id="img-{{.ID}}" />
         {{if gt .PhotoCount 1}}