From 31f12175effec84eb76109517f5312225d6ba199 Mon Sep 17 00:00:00 2001 From: Eugene Olonov Date: Mon, 19 Oct 2026 12:07:57 -0700 Subject: [PATCH 1/3] Keep transcript rows from shrinking when host styles make the activity list a flex item --- CHANGELOG.md | 1 + .../html2/transcript/hostSectionStyle.html | 109 ++++++++++++++++++ .../hostSectionStyle.html.snap-1.png | Bin 0 -> 11883 bytes .../TranscriptFocus.module.css | 2 + 4 files changed, 112 insertions(+) create mode 100644 __tests__/html2/transcript/hostSectionStyle.html create mode 100644 __tests__/html2/transcript/hostSectionStyle.html.snap-1.png diff --git a/CHANGELOG.md b/CHANGELOG.md index d32d8a4300..077a91c4b8 100644 --- a/CHANGELOG.md +++ b/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 [#XXXX](https://github.com/microsoft/BotFramework-WebChat/pull/XXXX), by [@OEvgeny](https://github.com/OEvgeny) ## [4.19.2] - 2026-10-08 diff --git a/__tests__/html2/transcript/hostSectionStyle.html b/__tests__/html2/transcript/hostSectionStyle.html new file mode 100644 index 0000000000..ef78b6053c --- /dev/null +++ b/__tests__/html2/transcript/hostSectionStyle.html @@ -0,0 +1,109 @@ + + + + + + + +
+ + + + diff --git a/__tests__/html2/transcript/hostSectionStyle.html.snap-1.png b/__tests__/html2/transcript/hostSectionStyle.html.snap-1.png new file mode 100644 index 0000000000000000000000000000000000000000..79ea0839bce7a70dad9eee0662baf11edd1befbe GIT binary patch literal 11883 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 Date: Mon, 19 Oct 2026 12:09:44 -0700 Subject: [PATCH 2/3] Add PR number to changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 077a91c4b8..5fd66ad59b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -62,7 +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 [#XXXX](https://github.com/microsoft/BotFramework-WebChat/pull/XXXX), 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) ## [4.19.2] - 2026-10-08 From bbaad12e2bafc191c0dfc54f77633aa6929405aa Mon Sep 17 00:00:00 2001 From: Eugene Olonov Date: Mon, 19 Oct 2026 13:15:18 -0700 Subject: [PATCH 3/3] Use flex: none on the transcript activity list --- .../src/Transcript/TranscriptFocus/TranscriptFocus.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/component/src/Transcript/TranscriptFocus/TranscriptFocus.module.css b/packages/component/src/Transcript/TranscriptFocus/TranscriptFocus.module.css index a6866a6081..f96b9d9943 100644 --- a/packages/component/src/Transcript/TranscriptFocus/TranscriptFocus.module.css +++ b/packages/component/src/Transcript/TranscriptFocus/TranscriptFocus.module.css @@ -46,8 +46,8 @@ .transcript-focus-area__activity-list { display: grid; - /* Host styles may make the list a flex item: do not shrink it, its rows have `min-height: 0` and would be squeezed. */ - flex-shrink: 0; + /* 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); }