fix(desktop): clamp HDR avatar images to SDR range (#1642)

Signed-off-by: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
Co-authored-by: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>

desktop/src/shared/styles/globals/utilities.css

@@ -87,4 +87,18 @@
       )
     );
   }
+
+  /*
+   * Clamp HDR (gain-map) images to the standard SDR range. Some uploaded
+   * avatars carry HDR gain maps, which capable displays render brighter than
+   * SDR white — making the avatar glow relative to the rest of the UI. This
+   * pins their luminance to the SDR envelope so they sit at the same level as
+   * everything else. `dynamic-range-limit` is the purpose-built CSS property
+   * (Chromium 133+, WebKit/Safari 26+); on engines that don't support it the
+   * declaration is simply ignored (avatars render as before), so it's a safe
+   * progressive enhancement.
+   */
+  .avatar-sdr-clamp {
+    dynamic-range-limit: standard;
+  }
 }

desktop/src/shared/ui/avatar.tsx

@@ -24,7 +24,7 @@ const AvatarImage = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Image
     ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
+    className={cn("aspect-square h-full w-full avatar-sdr-clamp", className)}
     decoding="async"
     loading="lazy"
     {...props}