@scm-manager/ui-components 3.10.1-20250720-083819 → 3.10.1-20250726-115425

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "3.10.1-20250720-083819",
+  "version": "3.10.1-20250726-115425",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -32,8 +32,8 @@
     "react-query": "^3.39.2"
   },
   "devDependencies": {
-    "@scm-manager/ui-tests": "3.10.1-20250720-083819",
-    "@scm-manager/ui-types": "3.10.1-20250720-083819",
+    "@scm-manager/ui-tests": "3.10.1-20250726-115425",
+    "@scm-manager/ui-types": "3.10.1-20250726-115425",
     "@types/fetch-mock": "^7.3.1",
     "@types/react-select": "^2.0.19",
     "@types/unist": "^2.0.3",
@@ -68,17 +68,17 @@
     "@scm-manager/jest-preset": "^2.14.1",
     "@scm-manager/prettier-config": "^2.12.0",
     "@scm-manager/tsconfig": "^2.13.0",
-    "@scm-manager/ui-syntaxhighlighting": "3.10.1-20250720-083819",
-    "@scm-manager/ui-shortcuts": "3.10.1-20250720-083819",
-    "@scm-manager/ui-text": "3.10.1-20250720-083819"
+    "@scm-manager/ui-syntaxhighlighting": "3.10.1-20250726-115425",
+    "@scm-manager/ui-shortcuts": "3.10.1-20250726-115425",
+    "@scm-manager/ui-text": "3.10.1-20250726-115425"
   },
   "dependencies": {
-    "@scm-manager/ui-core": "3.10.1-20250720-083819",
-    "@scm-manager/ui-overlays": "3.10.1-20250720-083819",
-    "@scm-manager/ui-layout": "3.10.1-20250720-083819",
-    "@scm-manager/ui-buttons": "3.10.1-20250720-083819",
-    "@scm-manager/ui-api": "3.10.1-20250720-083819",
-    "@scm-manager/ui-extensions": "3.10.1-20250720-083819",
+    "@scm-manager/ui-core": "3.10.1-20250726-115425",
+    "@scm-manager/ui-overlays": "3.10.1-20250726-115425",
+    "@scm-manager/ui-layout": "3.10.1-20250726-115425",
+    "@scm-manager/ui-buttons": "3.10.1-20250726-115425",
+    "@scm-manager/ui-api": "3.10.1-20250726-115425",
+    "@scm-manager/ui-extensions": "3.10.1-20250726-115425",
     "deepmerge": "^4.2.2",
     "hast-util-sanitize": "^3.0.2",
     "react-diff-view": "^2.4.10",

package/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>

package/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;

package/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>
 );
 

package/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`