Fix flaky test src/room/composer/Banner/Banner.stories.tsx > With Avatar Image (#33275)

* Fix flaky test `src/room/composer/Banner/Banner.stories.tsx > With Avatar Image`

it was previously loading an external (slow) image which was random (!) by design

Fixes #33273

* Fix styling

* Iterate

* Update snapshot

Author: t3chguy

apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap

@@ -213,12 +213,12 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
       </div>
       <div
         aria-labelledby="_r_1c3_"
-        class="_banner_193k4_8"
+        class="_banner_n7ud0_8"
         data-type="critical"
         role="status"
       >
         <div
-          class="_icon_193k4_50"
+          class="_icon_n7ud0_50"
         >
           <svg
             fill="currentColor"
@@ -234,7 +234,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
           </svg>
         </div>
         <div
-          class="_content_193k4_38"
+          class="_content_n7ud0_38"
         >
           <p
             class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _title_1xryk_24"
@@ -244,7 +244,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
           </p>
         </div>
         <div
-          class="_actions_193k4_60"
+          class="_actions_n7ud0_61"
         >
           <button
             class="_button_13vu4_8 _primaryAction_1xryk_20 _has-icon_13vu4_60"

packages/shared-components/__vis__/linux/__baselines__/room/composer/Banner/Banner.stories.tsx/with-avatar-image-auto.png

@@ -48,12 +48,13 @@
 }
 
 .icon {
-    width: 24px;
     display: flex;
     align-items: flex-start;
 }
 
 .icon img {
+    height: 24px;
+    aspect-ratio: auto;
     border-radius: 50%;
 }
 

packages/shared-components/src/room/composer/Banner/Banner.module.css

@@ -11,6 +11,7 @@ import { type Meta, type StoryObj } from "@storybook/react-vite";
 import { Button } from "@vector-im/compound-web";
 
 import { Banner } from "./Banner";
+import avatarImage from "../../../../static/element.png";
 
 const meta = {
     title: "room/Banner",
@@ -58,7 +59,7 @@ export const WithAction: Story = {
 
 export const WithAvatarImage: Story = {
     args: {
-        avatar: <img alt="Example" src="https://picsum.photos/32/32" />,
+        avatar: <img alt="Example" src={avatarImage} />,
     },
 };
 

packages/shared-components/src/room/composer/Banner/Banner.stories.tsx

@@ -78,7 +78,7 @@ exports[`AvatarWithDetails > renders a banner with an avatar iamge 1`] = `
     >
       <img
         alt="Example"
-        src="https://picsum.photos/32/32"
+        src="/static/element.png"
       />
     </div>
     <div