From cc54f35860a6f96b429db70c0ba502d1f0c6629e Mon Sep 17 00:00:00 2001
From: Thomas Zerr <thomas.zerr@cloudogu.com>
Date: Tue, 26 Aug 2025 13:15:42 +0200
Subject: [PATCH] Fix fetching of gravatar images getting blocked by COEP

Squash commits of branch bugfix/failing-to-load-gravatar:

- Fix line break if gravatar image could not be loaded

- Fix overlapping text inside the commit overview if the avatar alt text is shown

- Fetching of gravatar images getting blocked by Cross-Origin-Embedder-Policy

- Fix border-radius

- Fix outdated storyshots
---
 gradle/changelog/gravatar-changes.yaml        |  6 +++
 .../src/__snapshots__/storyshots.test.ts.snap | 42 ++++++++++++-------
 .../ui-components/src/avatar/AvatarImage.tsx  |  4 +-
 scm-ui/ui-components/src/layout/Footer.tsx    | 18 ++++----
 .../src/repos/changesets/SingleChangeset.tsx  |  1 +
 5 files changed, 43 insertions(+), 28 deletions(-)
 create mode 100644 gradle/changelog/gravatar-changes.yaml

diff --git a/gradle/changelog/gravatar-changes.yaml b/gradle/changelog/gravatar-changes.yaml
new file mode 100644
index 0000000000..6ab5b550d2
--- /dev/null
+++ b/gradle/changelog/gravatar-changes.yaml
@@ -0,0 +1,6 @@
+- type: fixed
+  description: Overlapping text inside the footer section if the alt text of an avatar is rendered
+- type: fixed
+  description: Overlapping text inside the commit overview if the alt text of an avatar is rendered
+- type: fixed
+  description: Fetching of gravatar images getting blocked by Cross-Origin-Embedder-Policy
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index df34b5a14a..ecc4629d29 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -1825,18 +1825,20 @@ exports[`Storyshots Footer Full 1`] = `
           className="has-text-weight-bold mb-2"
         >
           <div
+            className="is-flex"
             data-testid="trillian-mcmillian"
           >
-            <span
-              className="Footer__AvatarContainer-sc-k70cxq-1 kckyuz image is-rounded"
-            >
+            <div>
               <img
                 alt="trillian"
-                className="is-rounded Footer__VCenteredAvatar-sc-k70cxq-0 bGojWR"
+                className="is-rounded Footer__VCenteredAvatar-sc-k70cxq-0 gNPbnb"
+                crossOrigin="anonymous"
                 src="test-file-stub"
               />
-            </span>
-            Trillian McMillian
+            </div>
+            <div>
+              Trillian McMillian
+            </div>
           </div>
         </h2>
         <ul
@@ -2031,18 +2033,20 @@ exports[`Storyshots Footer With Avatar 1`] = `
           className="has-text-weight-bold mb-2"
         >
           <div
+            className="is-flex"
             data-testid="trillian-mcmillian"
           >
-            <span
-              className="Footer__AvatarContainer-sc-k70cxq-1 kckyuz image is-rounded"
-            >
+            <div>
               <img
                 alt="trillian"
-                className="is-rounded Footer__VCenteredAvatar-sc-k70cxq-0 bGojWR"
+                className="is-rounded Footer__VCenteredAvatar-sc-k70cxq-0 gNPbnb"
+                crossOrigin="anonymous"
                 src="test-file-stub"
               />
-            </span>
-            Trillian McMillian
+            </div>
+            <div>
+              Trillian McMillian
+            </div>
           </div>
         </h2>
         <ul
@@ -20086,6 +20090,7 @@ exports[`Storyshots Repositories/Annotate With Avatars 1`] = `
                 <img
                   alt="Arthur Dent"
                   className="has-rounded-border AuthorImage-sc-ygvjd8-0 dTapGF"
+                  crossOrigin="anonymous"
                   src="https://robohash.org/arthur.dent@hitchhiker.com.png"
                 />
                 Arthur Dent
@@ -20148,6 +20153,7 @@ exports[`Storyshots Repositories/Annotate With Avatars 1`] = `
                 <img
                   alt="Tricia Marie McMillan"
                   className="has-rounded-border AuthorImage-sc-ygvjd8-0 dTapGF"
+                  crossOrigin="anonymous"
                   src="https://robohash.org/trillian@hitchhiker.com.png"
                 />
                 Tricia Marie McMillan
@@ -20210,6 +20216,7 @@ exports[`Storyshots Repositories/Annotate With Avatars 1`] = `
                 <img
                   alt="Arthur Dent"
                   className="has-rounded-border AuthorImage-sc-ygvjd8-0 dTapGF"
+                  crossOrigin="anonymous"
                   src="https://robohash.org/arthur.dent@hitchhiker.com.png"
                 />
                 Arthur Dent
@@ -20254,6 +20261,7 @@ exports[`Storyshots Repositories/Annotate With Avatars 1`] = `
                 <img
                   alt="Ford Prefect"
                   className="has-rounded-border AuthorImage-sc-ygvjd8-0 dTapGF"
+                  crossOrigin="anonymous"
                   src="https://robohash.org/ford.prefect@hitchhiker.com.png"
                 />
                 Ford Prefect
@@ -20298,6 +20306,7 @@ exports[`Storyshots Repositories/Annotate With Avatars 1`] = `
                 <img
                   alt="Arthur Dent"
                   className="has-rounded-border AuthorImage-sc-ygvjd8-0 dTapGF"
+                  crossOrigin="anonymous"
                   src="https://robohash.org/arthur.dent@hitchhiker.com.png"
                 />
                 Arthur Dent
@@ -20380,11 +20389,12 @@ exports[`Storyshots Repositories/Changesets Co-Authors with avatar 1`] = `
                 className="media-left mt-2 mr-2"
               >
                 <div
-                  className="SingleChangeset__FixedSizedAvatar-sc-ytpqp9-0 cDjLjl image"
+                  className="SingleChangeset__FixedSizedAvatar-sc-ytpqp9-0 dLAXC image"
                 >
                   <img
                     alt="SCM Administrator"
                     className="has-rounded-border"
+                    crossOrigin="anonymous"
                     src="https://robohash.org/scm-admin@scm-manager.org"
                   />
                 </div>
@@ -20554,11 +20564,12 @@ exports[`Storyshots Repositories/Changesets Commiter and Co-Authors with avatar
                 className="media-left mt-2 mr-2"
               >
                 <div
-                  className="SingleChangeset__FixedSizedAvatar-sc-ytpqp9-0 cDjLjl image"
+                  className="SingleChangeset__FixedSizedAvatar-sc-ytpqp9-0 dLAXC image"
                 >
                   <img
                     alt="SCM Administrator"
                     className="has-rounded-border"
+                    crossOrigin="anonymous"
                     src="https://robohash.org/scm-admin@scm-manager.org"
                   />
                 </div>
@@ -21626,11 +21637,12 @@ exports[`Storyshots Repositories/Changesets With avatar 1`] = `
                 className="media-left mt-2 mr-2"
               >
                 <div
-                  className="SingleChangeset__FixedSizedAvatar-sc-ytpqp9-0 cDjLjl image"
+                  className="SingleChangeset__FixedSizedAvatar-sc-ytpqp9-0 dLAXC image"
                 >
                   <img
                     alt="SCM Administrator"
                     className="has-rounded-border"
+                    crossOrigin="anonymous"
                     src="test-file-stub"
                   />
                 </div>
diff --git a/scm-ui/ui-components/src/avatar/AvatarImage.tsx b/scm-ui/ui-components/src/avatar/AvatarImage.tsx
index 6fa5e68045..9815687465 100644
--- a/scm-ui/ui-components/src/avatar/AvatarImage.tsx
+++ b/scm-ui/ui-components/src/avatar/AvatarImage.tsx
@@ -15,7 +15,7 @@
  */
 
 import React, { FC } from "react";
-import { Image } from "..";
+import { Image } from "@scm-manager/ui-core";
 import { EXTENSION_POINT, Person } from "./Avatar";
 import { useBinder } from "@scm-manager/ui-extensions";
 
@@ -36,7 +36,7 @@ const AvatarImage: FC<Props> = ({ person, representation = "rounded-border", cla
       classes += " " + className;
     }
 
-    return <Image className={classes} src={avatar} alt={person.name} />;
+    return <Image className={classes} src={avatar} alt={person.name} crossOrigin="anonymous" />;
   }
 
   return null;
diff --git a/scm-ui/ui-components/src/layout/Footer.tsx b/scm-ui/ui-components/src/layout/Footer.tsx
index b1f35fbf75..61d1089b90 100644
--- a/scm-ui/ui-components/src/layout/Footer.tsx
+++ b/scm-ui/ui-components/src/layout/Footer.tsx
@@ -51,23 +51,19 @@ type TitleWithAvatarProps = {
 };
 
 const VCenteredAvatar = styled(AvatarImage)`
-  vertical-align: middle;
-`;
-
-const AvatarContainer = styled.span`
-  float: left;
+  width: 1rem !important;
+  height: 1rem !important;
   margin-right: 0.3em;
   padding-top: 0.2em;
-  width: 1em;
-  height: 1em;
+  border-radius: 100%;
 `;
 
 const TitleWithAvatar: FC<TitleWithAvatarProps> = ({ me }) => (
-  <div {...createAttributesForTesting(me.displayName)}>
-    <AvatarContainer className="image is-rounded">
+  <div {...createAttributesForTesting(me.displayName)} className="is-flex">
+    <div>
       <VCenteredAvatar person={me} representation="rounded" />
-    </AvatarContainer>
-    {me.displayName}
+    </div>
+    <div>{me.displayName}</div>
   </div>
 );
 
diff --git a/scm-ui/ui-components/src/repos/changesets/SingleChangeset.tsx b/scm-ui/ui-components/src/repos/changesets/SingleChangeset.tsx
index 46b3730782..b7319801a4 100644
--- a/scm-ui/ui-components/src/repos/changesets/SingleChangeset.tsx
+++ b/scm-ui/ui-components/src/repos/changesets/SingleChangeset.tsx
@@ -37,6 +37,7 @@ type Props = {
 const FixedSizedAvatar = styled.div`
   width: 35px;
   height: 35px;
+  min-width: fit-content;
 `;
 
 const FullWidthDiv = styled.div`