@metropolle/design-system 1.2026.0-1.24.2224 → 1.2026.0-1.24.2327

package/dist/css/components.css

@@ -4041,6 +4041,16 @@ html[data-theme="light"] .mds-profile-card__info-dot.active {
     transform: none;
     justify-content: center;
     margin-top: 16px;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+  }
+
+  /* Info dots: horizontal on mobile */
+  .mds-profile-card__info-dots {
+    flex-direction: row;
+    gap: 8px;
+    margin-top: 8px;
   }
 
   .mds-profile-card__social {
@@ -4087,11 +4097,11 @@ html[data-theme="light"] .mds-profile-card__info-dot.active {
 .mds-profile-card__photo-modal {
   position: fixed;
   inset: 0;
-  z-index: 9999;
+  z-index: 99999; /* Higher z-index to cover everything including header */
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 24px;
+  padding: 16px;
   cursor: pointer;
   animation: mds-photo-modal-fade-in 0.25s ease-out;
 }
@@ -4106,17 +4116,18 @@ html[data-theme="light"] .mds-profile-card__info-dot.active {
 }
 
 .mds-profile-card__photo-modal-backdrop {
-  position: absolute;
+  position: fixed;
   inset: 0;
-  background: rgba(10, 10, 15, 0.6);
-  backdrop-filter: blur(20px) saturate(120%);
-  -webkit-backdrop-filter: blur(20px) saturate(120%);
+  /* Stronger blur to cover entire page including header */
+  background: rgba(0, 0, 0, 0.75);
+  backdrop-filter: blur(30px) saturate(100%);
+  -webkit-backdrop-filter: blur(30px) saturate(100%);
 }
 
 html[data-theme="light"] .mds-profile-card__photo-modal-backdrop {
-  background: rgba(255, 255, 255, 0.5);
-  backdrop-filter: blur(20px) saturate(140%);
-  -webkit-backdrop-filter: blur(20px) saturate(140%);
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(30px) saturate(120%);
+  -webkit-backdrop-filter: blur(30px) saturate(120%);
 }
 
 .mds-profile-card__photo-modal-content {
@@ -4124,8 +4135,11 @@ html[data-theme="light"] .mds-profile-card__photo-modal-backdrop {
   display: flex;
   align-items: center;
   justify-content: center;
+  /* Desktop: 90% of viewport */
   max-width: 90vw;
   max-height: 90vh;
+  width: auto;
+  height: auto;
   animation: mds-photo-modal-scale-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
@@ -4141,29 +4155,50 @@ html[data-theme="light"] .mds-profile-card__photo-modal-backdrop {
 }
 
 .mds-profile-card__photo-modal-image {
-  max-width: 100%;
-  max-height: 90vh;
+  /* Fill available space while maintaining aspect ratio */
+  width: auto;
+  height: auto;
+  max-width: 90vw;
+  max-height: 85vh;
   -o-object-fit: contain;
      object-fit: contain;
-  border-radius: 20px;
+  border-radius: 16px;
   /* Liquid Glass frame */
   background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.15);
   box-shadow:
-    0 25px 80px rgba(0, 0, 0, 0.4),
-    0 10px 30px rgba(0, 0, 0, 0.2),
+    0 25px 80px rgba(0, 0, 0, 0.5),
+    0 10px 30px rgba(0, 0, 0, 0.3),
     inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 html[data-theme="light"] .mds-profile-card__photo-modal-image {
   background: rgba(255, 255, 255, 0.1);
-  border-color: rgba(255, 255, 255, 0.8);
+  border-color: rgba(0, 0, 0, 0.1);
   box-shadow:
-    0 25px 80px rgba(0, 0, 0, 0.15),
-    0 10px 30px rgba(0, 0, 0, 0.08),
+    0 25px 80px rgba(0, 0, 0, 0.2),
+    0 10px 30px rgba(0, 0, 0, 0.1),
     inset 0 1px 0 rgba(255, 255, 255, 1);
 }
 
+/* Mobile: Photo expands to fill screen width */
+@media (max-width: 700px) {
+  .mds-profile-card__photo-modal {
+    padding: 12px;
+  }
+
+  .mds-profile-card__photo-modal-content {
+    max-width: 96vw;
+    max-height: 85vh;
+  }
+
+  .mds-profile-card__photo-modal-image {
+    max-width: 96vw;
+    max-height: 80vh;
+    border-radius: 12px;
+  }
+}
+
 /* =============================================================================
    FEAT-090: Verification Score Components (Settings Page)
    ============================================================================= */

package/dist/react/components/react/ProfileCard/ProfileCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/ProfileCard/ProfileCard.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAyB,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAOhF,MAAM,WAAW,eAAe;IAE9B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IAGjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAG/B,WAAW,CAAC,EAAE,OAAO,CAAC;IAGtB,kBAAkB,CAAC,EAAE,iBAAiB,CAAC;CACxC;AAGD,YAAY,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,MAAM,EAAE,iBAAiB,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,IAAI,EAAE,eAAe,CAAC;IAEtB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE7B,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,gCAAgC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,8BAA8B;IAC9B,WAAW,CAAC,EAAE;QACZ,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,CAAC,CAAC,EAAE,MAAM,CAAC;QACX,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IAEF,8BAA8B;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAyID,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAgB,EAChB,UAAU,EACV,UAAkB,EAClB,WAAW,EACX,gBAAwB,EACxB,SAAS,EACT,SAAc,EACd,aAAa,GACd,EAAE,gBAAgB,2CA2TlB;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ProfileCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/ProfileCard/ProfileCard.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAyB,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAOhF,MAAM,WAAW,eAAe;IAE9B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IAGjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAG/B,WAAW,CAAC,EAAE,OAAO,CAAC;IAGtB,kBAAkB,CAAC,EAAE,iBAAiB,CAAC;CACxC;AAGD,YAAY,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,MAAM,EAAE,iBAAiB,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,IAAI,EAAE,eAAe,CAAC;IAEtB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE7B,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,gCAAgC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,8BAA8B;IAC9B,WAAW,CAAC,EAAE;QACZ,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,CAAC,CAAC,EAAE,MAAM,CAAC;QACX,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IAEF,8BAA8B;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAyID,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAgB,EAChB,UAAU,EACV,UAAkB,EAClB,WAAW,EACX,gBAAwB,EACxB,SAAS,EACT,SAAc,EACd,aAAa,GACd,EAAE,gBAAgB,2CA4TlB;AAED,eAAe,WAAW,CAAC"}

package/dist/react/index.esm.js

@@ -1625,7 +1625,7 @@ function ProfileCard({ user, variant = 'full', photoWidth, showSocial = false, s
     // Full size photo for modal (prioritize full, then medium)
     const photoUrlFull = user.photo_url_full || user.photo_url_medium;
     const hasRealPhoto = !!(user.photo_url_medium || user.photo_url_full);
-    return (jsxRuntimeExports.jsxs("article", { className: `mds-profile-card ${className}`, style: { '--mds-profile-card-photo-width': `${computedPhotoWidth}px` }, children: [jsxRuntimeExports.jsx("div", { className: "mds-profile-card__grain" }), jsxRuntimeExports.jsx("div", { className: "mds-profile-card__photo", children: photoSlot ? (jsxRuntimeExports.jsx("div", { className: "mds-profile-card__photo-slot", children: photoSlot })) : (jsxRuntimeExports.jsx("img", { src: photoUrl, alt: displayName, className: `mds-profile-card__avatar ${hasRealPhoto ? 'mds-profile-card__avatar--clickable' : ''}`, onClick: hasRealPhoto ? () => setShowPhotoModal(true) : undefined, role: hasRealPhoto ? 'button' : undefined, tabIndex: hasRealPhoto ? 0 : undefined, onKeyDown: hasRealPhoto ? (e) => e.key === 'Enter' && setShowPhotoModal(true) : undefined })) }), showPhotoModal && photoUrlFull && (jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__photo-modal", onClick: () => setShowPhotoModal(false), role: "dialog", "aria-modal": "true", "aria-label": "Enlarged photo - click anywhere to close", children: [jsxRuntimeExports.jsx("div", { className: "mds-profile-card__photo-modal-backdrop" }), jsxRuntimeExports.jsx("div", { className: "mds-profile-card__photo-modal-content", children: jsxRuntimeExports.jsx("img", { src: photoUrlFull, alt: displayName, className: "mds-profile-card__photo-modal-image" }) })] })), jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__content", children: [jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__identity", children: [jsxRuntimeExports.jsx("h1", { className: "mds-profile-card__name", children: displayName.toUpperCase() }), variant === 'full' && profession && (jsxRuntimeExports.jsx("p", { className: "mds-profile-card__profession", children: profession.toUpperCase() })), variant === 'compact' && (jsxRuntimeExports.jsx(UsernameLinks, { username: user.username, className: "mds-profile-card__username" }))] }), jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__details", children: [variant === 'full' && getLocation() && (jsxRuntimeExports.jsx("p", { className: "mds-profile-card__location", children: getLocation() })), variant === 'full' && (jsxRuntimeExports.jsx(UsernameLinks, { username: user.username, className: "mds-profile-card__username-detail" })), variant === 'compact' && user.email && (jsxRuntimeExports.jsx("p", { className: "mds-profile-card__email", children: user.email })), variant === 'compact' && (jsxRuntimeExports.jsxs("span", { className: "mds-profile-card__member", children: ["Member since ", memberSince] }))] }), variant === 'compact' && (jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__verification", children: [jsxRuntimeExports.jsxs("button", { className: "mds-profile-card__verified-badge", title: user.verification_score
+    return (jsxRuntimeExports.jsxs("article", { className: `mds-profile-card ${className}`, style: { '--mds-profile-card-photo-width': `${computedPhotoWidth}px` }, children: [jsxRuntimeExports.jsx("div", { className: "mds-profile-card__grain" }), jsxRuntimeExports.jsx("div", { className: "mds-profile-card__photo", children: photoSlot ? (jsxRuntimeExports.jsx("div", { className: "mds-profile-card__photo-slot", children: photoSlot })) : (jsxRuntimeExports.jsx("img", { src: photoUrl, alt: displayName, className: `mds-profile-card__avatar ${hasRealPhoto ? 'mds-profile-card__avatar--clickable' : ''}`, onClick: hasRealPhoto ? () => setShowPhotoModal(true) : undefined, role: hasRealPhoto ? 'button' : undefined, tabIndex: hasRealPhoto ? 0 : undefined, onKeyDown: hasRealPhoto ? (e) => e.key === 'Enter' && setShowPhotoModal(true) : undefined })) }), showPhotoModal && photoUrlFull && typeof document !== 'undefined' && createPortal(jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__photo-modal", onClick: () => setShowPhotoModal(false), role: "dialog", "aria-modal": "true", "aria-label": "Enlarged photo - click anywhere to close", children: [jsxRuntimeExports.jsx("div", { className: "mds-profile-card__photo-modal-backdrop" }), jsxRuntimeExports.jsx("div", { className: "mds-profile-card__photo-modal-content", children: jsxRuntimeExports.jsx("img", { src: photoUrlFull, alt: displayName, className: "mds-profile-card__photo-modal-image" }) })] }), document.body), jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__content", children: [jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__identity", children: [jsxRuntimeExports.jsx("h1", { className: "mds-profile-card__name", children: displayName.toUpperCase() }), variant === 'full' && profession && (jsxRuntimeExports.jsx("p", { className: "mds-profile-card__profession", children: profession.toUpperCase() })), variant === 'compact' && (jsxRuntimeExports.jsx(UsernameLinks, { username: user.username, className: "mds-profile-card__username" }))] }), jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__details", children: [variant === 'full' && getLocation() && (jsxRuntimeExports.jsx("p", { className: "mds-profile-card__location", children: getLocation() })), variant === 'full' && (jsxRuntimeExports.jsx(UsernameLinks, { username: user.username, className: "mds-profile-card__username-detail" })), variant === 'compact' && user.email && (jsxRuntimeExports.jsx("p", { className: "mds-profile-card__email", children: user.email })), variant === 'compact' && (jsxRuntimeExports.jsxs("span", { className: "mds-profile-card__member", children: ["Member since ", memberSince] }))] }), variant === 'compact' && (jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__verification", children: [jsxRuntimeExports.jsxs("button", { className: "mds-profile-card__verified-badge", title: user.verification_score
                                     ? `Verification Score: ${user.verification_score.score}`
                                     : `Verification Level ${user.verified}`, onClick: (e) => {
                                     e.stopPropagation();