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

[Eugene (OEvgeny)]

Host page CSS such as section { display: flex; min-height: 0 } makes activities overlap in the default theme.

Changelog Entry

Fixed

• Fixed activities overlapping in the default theme when the host page styles section as a flex item, in PR #5919, by @OEvgeny

Description

The activity list is a <section> element (TranscriptActivityList, class transcript-focus-area__activity-list), so a host type selector on section matches it, and it shrinks to the transcript height; since its rows have min-height: 0, the rows are squeezed and cards overlap (video controls and title hidden, since 4.19.0). The activity list now has flex: none, so it keeps its content height, as it already does without such host CSS.

Design

• Kept min-height: 0 on the rows (added by feat: add preview of ongoing items in the group for copilot variant #5637) and only stopped the list from shrinking.

Specific Changes

• TranscriptFocus.module.css: flex: none on .transcript-focus-area__activity-list
• transcript/hostSectionStyle.html: host section rule, video card + animation card, asserts each row fits its content and the cards do not overlap; snapshot 1 shows the whole video card (controls and title) above the animation card

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)

[Eugene (OEvgeny)]

TODO: does fluent adjust these settings cause it was a different defect with audio card growing past the card size.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[Eugene (OEvgeny)]

TODO: which element is section?