Keep activities from overlapping when the host styles section as a flex item

CHANGELOG.md

@@ -62,6 +62,7 @@ Legends:
 - Fixed the "Positive" card action button having less than 4.5:1 color contrast, fixes [#5713](https://github.com/microsoft/BotFramework-WebChat/issues/5713), in PR [#5905](https://github.com/microsoft/BotFramework-WebChat/pull/5905), by [@OEvgeny](https://github.com/OEvgeny)
 - Fixed screen readers announcing a single audio, video, or animation in a card as a list item, such as "1 of 1", fixes [#5722](https://github.com/microsoft/BotFramework-WebChat/issues/5722), in PR [#5903](https://github.com/microsoft/BotFramework-WebChat/pull/5903), by [@OEvgeny](https://github.com/OEvgeny)
 - Fixed video and animation cards disappearing in production builds when the video URL is relative or invalid, in PR [#5889](https://github.com/microsoft/BotFramework-WebChat/pull/5889), by [@OEvgeny](https://github.com/OEvgeny)
+- Fixed activities overlapping in the default theme when the host page styles `section` as a flex item, in PR [#5919](https://github.com/microsoft/BotFramework-WebChat/pull/5919), by [@OEvgeny](https://github.com/OEvgeny)
 - Fixed timestamps always using the 12-hour clock, such as "4:41 PM" instead of "16:41" in German, in PR [#5920](https://github.com/microsoft/BotFramework-WebChat/pull/5920), by [@OEvgeny](https://github.com/OEvgeny)
 
 ## [4.19.2] - 2026-10-08

__tests__/html2/transcript/hostSectionStyle.html

@@ -0,0 +1,109 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <style type="text/css">
+      /* Emulates a host page with a type selector, which also matches the <section> of the activity list in Web Chat. */
+      section {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "@testduet/wait-for": "https://esm.sh/@testduet/wait-for",
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/": "/__dist__/packages/bundle/static/botframework-webchat/",
+          "react": "/__dist__/packages/bundle/static/react.js",
+          "react-dom": "/__dist__/packages/bundle/static/react-dom.js",
+          "react-dom/client": "/__dist__/packages/bundle/static/react-dom/client.js"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, ReactWebChat } from 'botframework-webchat';
+      import { createElement } from 'react';
+      import { createRoot } from 'react-dom/client';
+
+      // TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
+      window.WebChat = { createStoreWithOptions };
+
+      run(async function () {
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        createRoot(document.getElementById('webchat')).render(
+          createElement(ReactWebChat, { directLine, store, styleOptions: { hideSendBox: true } })
+        );
+
+        await pageConditions.uiConnected();
+
+        // GIVEN: The bot sends a video card, followed by an animation card, taller than the transcript together.
+        await directLine.emulateIncomingActivity({
+          attachments: [
+            {
+              content: {
+                // `VideoContent` parses the URL with `new URL()`, so it must be absolute.
+                media: [{ profile: 'videocard', url: new URL('/assets/dark-green-video.webm', location.href).href }],
+                subtitle: 'Video test',
+                text: 'No buttons, no image.',
+                title: 'Dark green video'
+              },
+              contentType: 'application/vnd.microsoft.card.video'
+            }
+          ],
+          from: { role: 'bot' },
+          type: 'message'
+        });
+
+        await directLine.emulateIncomingActivity({
+          attachments: [
+            {
+              content: {
+                media: [{ profile: 'Yellow ball moving from left to right', url: '/assets/yellow-ball-animation.gif' }],
+                subtitle: 'Animation with a GIF',
+                text: 'No buttons, no image.',
+                title: 'Animation card'
+              },
+              contentType: 'application/vnd.microsoft.card.animation'
+            }
+          ],
+          from: { role: 'bot' },
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(2);
+        await pageConditions.allImagesLoaded();
+        await pageConditions.mediaBufferStabilized(document.querySelector('video'));
+
+        const [videoActivity, animationActivity] = pageElements.activities();
+
+        // THEN: The content of each activity should fit in its row.
+        // The first child of the activity is its content, the activity is the row of the activity list.
+        for (const activity of [videoActivity, animationActivity]) {
+          expect(activity.firstElementChild.getBoundingClientRect().height).toBeLessThanOrEqual(
+            activity.getBoundingClientRect().height
+          );
+        }
+
+        // THEN: The video card should end before the animation card starts.
+        expect(videoActivity.getBoundingClientRect().bottom).toBeLessThanOrEqual(
+          animationActivity.getBoundingClientRect().top
+        );
+
+        // WHEN: Scrolled to the top.
+        await pageObjects.scrollToTop();
+
+        // THEN: The whole video card should show, with its controls and title, above the animation card.
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>

packages/component/src/Transcript/TranscriptFocus/TranscriptFocus.module.css

@@ -46,6 +46,8 @@
 
   .transcript-focus-area__activity-list {
     display: grid;
+    /* Host styles may make the list a flex item: do not flex it, its rows have `min-height: 0` and would be squeezed. */
+    flex: none;
     gap: var(--webchat__transcript--spacing);
     padding-block: var(--webchat__transcript--spacing);
   }