fix: Allow wrapping in Banner component. (#31532)

* fix: Allow wrapping in `Banner` component.

* chore: Remove translations from stories, update snapshot.

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

@@ -27,8 +27,6 @@
     padding: var(--cpd-space-4x);
 
     border-top: 1px solid var(--cpd-color-gray-400);
-
-    white-space: nowrap;
 }
 
 .banner[data-type="success"] {
@@ -90,4 +88,6 @@
     flex-direction: row;
     gap: var(--cpd-space-1x);
     align-self: center;
+
+    white-space: nowrap;
 }

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

@@ -11,7 +11,6 @@ import { type Meta, type StoryObj } from "@storybook/react-vite";
 import { Button } from "@vector-im/compound-web";
 
 import { Banner } from "./Banner";
-import { _t } from "../../utils/i18n";
 
 const meta = {
     title: "room/Banner",
@@ -46,17 +45,14 @@ export const WithAction: Story = {
     args: {
         children: (
             <p>
-                {_t(
+                Alice's (<b>@alice:example.com</b>) identity was reset. <a href="https://example.org">Learn more</a>
-                    "encryption|pinned_identity_changed",
-                    { displayName: "Alice", userId: "@alice:example.org" },
-                    {
-                        a: (sub) => <a href="https://example.org">{sub}</a>,
-                        b: (sub) => <b>{sub}</b>,
-                    },
-                )}
             </p>
         ),
-        actions: <Button kind="primary">{_t("encryption|withdraw_verification_action")}</Button>,
+        actions: (
+            <Button kind="primary" size="sm">
+                Withdraw verification
+            </Button>
+        ),
     },
 };
 
@@ -71,3 +67,19 @@ export const WithoutClose: Story = {
         onClose: undefined,
     },
 };
+
+export const WithLoadsOfContent: Story = {
+    args: {
+        type: "info",
+        children: (
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis massa facilisis, venenatis risus
+                consectetur, sagittis libero. Aenean et scelerisque justo. Nunc luctus, mi sed facilisis suscipit, magna
+                ante pharetra sem, eu rutrum purus quam quis arcu. Sed eleifend arcu vitae magna sodales, sit amet
+                fermentum urna dictum. Mauris vel velit pulvinar enim mollis tincidunt. Vivamus egestas rhoncus
+                sagittis. Curabitur auctor vehicula massa, et cursus lacus laoreet a. Maecenas et sollicitudin lectus,
+                in ligula.
+            </p>
+        ),
+    },
+};

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

@@ -79,7 +79,7 @@ export function Banner({
     return (
         <div {...props} className={classes} data-type={type}>
             <div className={styles.icon}>{avatar ?? icon}</div>
-            <span className={styles.content}>{children}</span>
+            <div className={styles.content}>{children}</div>
             <div className={styles.actions}>
                 {actions}
                 {onClose && (

packages/shared-components/src/composer/Banner/__snapshots__/Banner.test.tsx.snap

@@ -26,24 +26,33 @@ exports[`AvatarWithDetails renders a banner with an action 1`] = `
         />
       </svg>
     </div>
-    <span
+    <div
       class="content"
     >
       <p>
-        encryption|pinned_identity_changed
+        Alice's (
+        <b>
+          @alice:example.com
+        </b>
+        ) identity was reset. 
+        <a
+          href="https://example.org"
+        >
+          Learn more
+        </a>
       </p>
-    </span>
+    </div>
     <div
       class="actions"
     >
       <button
         class="_button_187yx_8"
         data-kind="primary"
-        data-size="lg"
+        data-size="sm"
         role="button"
         tabindex="0"
       >
-        encryption|withdraw_verification_action
+        Withdraw verification
       </button>
       <button
         class="_button_187yx_8"
@@ -72,13 +81,13 @@ exports[`AvatarWithDetails renders a banner with an avatar iamge 1`] = `
         src="https://picsum.photos/32/32"
       />
     </div>
-    <span
+    <div
       class="content"
     >
       <p>
         Hello! This is a status banner.
       </p>
-    </span>
+    </div>
     <div
       class="actions"
     >
@@ -118,13 +127,13 @@ exports[`AvatarWithDetails renders a critical banner 1`] = `
         />
       </svg>
     </div>
-    <span
+    <div
       class="content"
     >
       <p>
         Hello! This is a status banner.
       </p>
-    </span>
+    </div>
     <div
       class="actions"
     >
@@ -168,13 +177,13 @@ exports[`AvatarWithDetails renders a default banner 1`] = `
         />
       </svg>
     </div>
-    <span
+    <div
       class="content"
     >
       <p>
         Hello! This is a status banner.
       </p>
-    </span>
+    </div>
     <div
       class="actions"
     >
@@ -219,13 +228,13 @@ exports[`AvatarWithDetails renders a info banner 1`] = `
         />
       </svg>
     </div>
-    <span
+    <div
       class="content"
     >
       <p>
         Hello! This is a status banner.
       </p>
-    </span>
+    </div>
     <div
       class="actions"
     >
@@ -265,13 +274,13 @@ exports[`AvatarWithDetails renders a success banner 1`] = `
         />
       </svg>
     </div>
-    <span
+    <div
       class="content"
     >
       <p>
         Hello! This is a status banner.
       </p>
-    </span>
+    </div>
     <div
       class="actions"
     >

packages/shared-components/src/composer/HistoryVisibleBannerView/__snapshots__/HistoryVisibleBannerView.test.tsx.snap

@@ -27,7 +27,7 @@ exports[`HistoryVisibleBannerView renders a history visible banner 1`] = `
         />
       </svg>
     </div>
-    <span
+    <div
       class="content"
     >
       <span>
@@ -43,7 +43,7 @@ exports[`HistoryVisibleBannerView renders a history visible banner 1`] = `
           Learn More
         </a>
       </span>
-    </span>
+    </div>
     <div
       class="actions"
     >