From 4680fbb378dfa023545f7d5ab6705e9954aae11b Mon Sep 17 00:00:00 2001
From: Ravi Gulhane <>
Date: Wed, 19 Aug 2026 09:37:17 +0530
Subject: [PATCH] Apply presenter photo shape styles on the Photo Wall present
 page.

Honor rect, rounded, and circle from the wall config with clipping overflow.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/lib/api.ts                     |  1 +
 src/pages/PhotoWallPresentPage.tsx | 47 +++++++++++++++++++++++++-----
 2 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/lib/api.ts b/src/lib/api.ts
index ddc0afa..9d29014 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -1040,6 +1040,7 @@ export type PhotoWallPresentData = {
   presentMarginTopPx?: number;
   presentMarginLeftPx?: number;
   presentMarginRightPx?: number;
+  presentPhotoShape?: "rect" | "rounded" | "circle";
   showUploaderNameOnWall?: boolean;
   frameEnabled?: boolean;
   frameCanvasWidth?: number;
diff --git a/src/pages/PhotoWallPresentPage.tsx b/src/pages/PhotoWallPresentPage.tsx
index 7654777..eaf2b5e 100644
--- a/src/pages/PhotoWallPresentPage.tsx
+++ b/src/pages/PhotoWallPresentPage.tsx
@@ -5,6 +5,25 @@ import { PhotoWallEventHeader } from "../components/PhotoWallEventHeader";
 
 const POLL_MS = 4000;
 
+function presentShapeStyles(
+  shape: PhotoWallPresentData["presentPhotoShape"],
+  maxW: number,
+  maxH: number,
+  frameEnabled: boolean,
+  frameW: number,
+  frameH: number,
+) {
+  const normalized = shape === "rect" || shape === "circle" || shape === "rounded" ? shape : "rounded";
+  const borderRadius = normalized === "rect" ? 0 : normalized === "circle" ? "50%" : 16;
+  const aspectRatio =
+    normalized === "circle"
+      ? "1 / 1"
+      : frameEnabled
+        ? `${frameW} / ${frameH}`
+        : `${maxW} / ${maxH}`;
+  return { borderRadius, aspectRatio, shape: normalized };
+}
+
 export function PhotoWallPresentPage() {
   const { presentToken } = useParams<{ presentToken: string }>();
   const [data, setData] = useState<PhotoWallPresentData | null>(null);
@@ -59,7 +78,14 @@ export function PhotoWallPresentPage() {
   const frameEnabled = Boolean(data.frameEnabled);
   const frameW = data.frameCanvasWidth || 1080;
   const frameH = data.frameCanvasHeight || 1080;
-  const aspectRatio = frameEnabled ? `${frameW} / ${frameH}` : `${maxW} / ${maxH}`;
+  const { borderRadius, aspectRatio } = presentShapeStyles(
+    data.presentPhotoShape,
+    maxW,
+    maxH,
+    frameEnabled,
+    frameW,
+    frameH,
+  );
 
   return (
     <div className="eb-gradient-auth min-h-dvh text-white">
@@ -101,20 +127,25 @@ export function PhotoWallPresentPage() {
           {data.photos.map((p) => (
             <div
               key={p._id}
-              className="flex w-full flex-col items-center rounded-xl bg-[var(--theme-card-color)]/50"
+              className="flex w-full flex-col items-center bg-[var(--theme-card-color)]/50"
               style={{ maxWidth: maxW }}
             >
-              <img
-                src={p.url}
-                alt={p.displayName || "Photo Wall"}
-                className="relative z-1 w-full object-cover shadow-lg"
+              <div
+                className="relative z-1 w-full overflow-hidden shadow-lg"
                 style={{
                   maxWidth: maxW,
                   maxHeight: maxH,
                   aspectRatio,
-                  objectFit: "cover",
+                  borderRadius,
                 }}
-              />
+              >
+                <img
+                  src={p.url}
+                  alt={p.displayName || "Photo Wall"}
+                  className="h-full w-full object-cover"
+                  style={{ objectFit: "cover" }}
+                />
+              </div>
               {showNames && p.displayName ? (
                 <p
                   className="mt-1 w-full truncate rounded-md p-2 text-center text-sm font-bold text-[var(--theme-card-text-color)]/90"