fix(private-room): refine locked post layout

src/app/private-room/components/private-album-card.tsx

@@ -91,6 +91,7 @@ export function PrivateAlbumCard({
             ) : null}
             <span className={styles.lockedPreviewScrim} />
           </div>
+          <div className={styles.lockedPreviewPanel}>
             <span className={styles.lockedCollectionIcon} aria-hidden="true">
               <Copy size={17} strokeWidth={2} />
             </span>
@@ -104,11 +105,11 @@ export function PrivateAlbumCard({
                 src={avatarUrl}
                 alt=""
                 size="100%"
-              imageSize={96}
+                imageSize={72}
                 className={styles.lockedPreviewAvatar}
               />
               <span className={styles.lockedAvatarBadge} aria-hidden="true">
-              <LockKeyhole size={18} strokeWidth={2.2} />
+                <LockKeyhole size={15} strokeWidth={2.2} />
               </span>
             </div>
 
@@ -131,6 +132,7 @@ export function PrivateAlbumCard({
               </button>
             </div>
           </div>
+        </div>
       ) : previewImages.length > 0 ? (
         <div
           className={`${styles.mediaGrid} ${gridLayoutClassName}`}

src/app/private-room/private-room-screen.module.css

@@ -287,21 +287,18 @@
 
 .lockedPreview {
   position: relative;
-  display: flex;
   width: 100%;
-  min-height: clamp(230px, 56vw, 280px);
+  aspect-ratio: 4 / 5;
-  align-items: center;
+  margin-top: 14px;
-  justify-content: center;
-  margin-top: clamp(54px, 13.333vw, 68px);
-  padding: clamp(66px, 16.296vw, 82px) clamp(18px, 4.63vw, 25px)
-    clamp(22px, 5.556vw, 30px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: clamp(20px, 5.185vw, 26px);
   background:
-    radial-gradient(circle at 74% 12%, rgba(255, 178, 115, 0.28), transparent 42%),
+    radial-gradient(circle at 72% 18%, rgba(184, 141, 113, 0.72), transparent 42%),
-    linear-gradient(145deg, #47434d, #29262d);
+    radial-gradient(circle at 18% 32%, rgba(79, 78, 105, 0.78), transparent 48%),
+    linear-gradient(160deg, #615d6d 0%, #6c5b50 48%, #c5c0b6 100%);
   color: #ffffff;
   isolation: isolate;
+  overflow: hidden;
   text-align: center;
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.12),
@@ -312,24 +309,13 @@
   position: absolute;
   inset: 0;
   z-index: 0;
-  overflow: hidden;
-  border-radius: inherit;
-}
-
-.lockedPreviewContent {
-  position: relative;
-  z-index: 3;
-  display: flex;
-  width: min(100%, 300px);
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
 }
 
 .lockedCoverImage {
   object-fit: cover;
-  filter: blur(16px) saturate(0.78);
+  object-position: center;
-  transform: scale(1.12);
+  filter: blur(13px) saturate(0.8);
+  transform: scale(1.05);
 }
 
 .lockedPreviewScrim {
@@ -337,8 +323,35 @@
   inset: 0;
   z-index: 1;
   background:
-    linear-gradient(180deg, rgba(18, 17, 21, 0.3), rgba(18, 17, 21, 0.68)),
+    linear-gradient(180deg, rgba(23, 21, 25, 0.12), rgba(28, 25, 27, 0.18) 48%, rgba(36, 31, 30, 0.3)),
-    rgba(31, 28, 34, 0.34);
+    rgba(32, 29, 34, 0.14);
+}
+
+.lockedPreviewPanel {
+  position: absolute;
+  top: 40%;
+  right: clamp(8px, 2.593vw, 14px);
+  left: clamp(8px, 2.593vw, 14px);
+  z-index: 2;
+  min-height: clamp(190px, 48vw, 226px);
+  padding: clamp(48px, 12.222vw, 60px) clamp(18px, 4.63vw, 25px)
+    clamp(20px, 5.185vw, 28px);
+  border: 1px solid rgba(255, 255, 255, 0.13);
+  border-radius: clamp(18px, 4.815vw, 25px);
+  background: rgba(32, 30, 35, 0.62);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    0 14px 32px rgba(19, 16, 18, 0.2);
+  backdrop-filter: blur(14px);
+}
+
+.lockedPreviewContent {
+  display: flex;
+  width: min(100%, 300px);
+  margin-inline: auto;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
 }
 
 .lockedCollectionIcon {
@@ -360,11 +373,11 @@
 
 .lockedPreviewAvatarFrame {
   position: absolute;
-  top: clamp(-45px, -9.259vw, -36px);
+  top: clamp(-36px, -8.148vw, -31px);
   left: 50%;
   z-index: 4;
-  width: clamp(82px, 20.741vw, 100px);
+  width: clamp(62px, 17.037vw, 72px);
-  height: clamp(82px, 20.741vw, 100px);
+  height: clamp(62px, 17.037vw, 72px);
   border: 3px solid rgba(255, 255, 255, 0.94);
   border-radius: 999px;
   background: #ffffff;
@@ -381,10 +394,10 @@
   right: -3px;
   bottom: 0;
   display: grid;
-  width: clamp(30px, 7.778vw, 38px);
+  width: clamp(24px, 6.296vw, 28px);
-  height: clamp(30px, 7.778vw, 38px);
+  height: clamp(24px, 6.296vw, 28px);
   place-items: center;
-  border: 3px solid rgba(255, 255, 255, 0.94);
+  border: 2px solid rgba(255, 255, 255, 0.94);
   border-radius: 999px;
   background: #ffffff;
   color: #29262d;
@@ -413,7 +426,7 @@
 .lockedPreviewCta {
   min-width: min(100%, 178px);
   min-height: 46px;
-  margin-top: 22px;
+  margin-top: clamp(16px, 4.074vw, 22px);
   padding: 0 24px;
   border: 0;
   border-radius: 999px;