Skip to content

FIX: Repair mobile chat responsiveness#2226

Merged
romanlutz merged 4 commits into
microsoft:mainfrom
romanlutz:romanlutz-fix-mobile-chat-layout
Jul 20, 2026
Merged

FIX: Repair mobile chat responsiveness#2226
romanlutz merged 4 commits into
microsoft:mainfrom
romanlutz:romanlutz-fix-mobile-chat-layout

Conversation

@romanlutz

@romanlutz romanlutz commented Jul 18, 2026

Copy link
Copy Markdown
Contributor

Description

At 390x844, opening Attack Conversations left only about 50px for chat, while wide media previews overflowed their message bubbles and forced horizontal scrolling. This change preserves a usable chat surface on narrow screens without changing the desktop workflow.

  • Render Attack Conversations as a Fluent UI modal end drawer at 600px and below, while retaining the 280px inline panel on desktop.
  • Keep historical mobile drawers closed until requested, close them after conversation selection or creation, and restore focus to the toggle after dismissal.
  • Constrain image, video, and audio previews to the available message-bubble width while preserving aspect ratios and desktop size caps.
  • Add accessible drawer state wiring and responsive component and browser regression coverage.

Conversation panel at 390x844

Before After
Conversation panel squeezing chat Conversation panel rendered as an overlay drawer

Image message at 390x844

Before After
Image message clipped on mobile Image message contained within the mobile chat

Tests and Documentation

  • TypeScript type-check passed.
  • Targeted ESLint passed for all changed frontend files.
  • ChatWindow and MessageList Jest suites passed: 128 tests.
  • Targeted Playwright tests passed for the mobile drawer, responsive image, and responsive audio flows.
  • Documentation: N/A; no public API or workflow documentation changed.
  • JupyText: N/A; no documentation notebooks changed.

Copilot AI added 3 commits July 17, 2026 15:53
Fix mobile chat responsiveness
6b8b939 
Render conversations as a mobile overlay and constrain message media to the available bubble width.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: e0675e40-9aa0-4f64-b720-ef2e6c17bd8b
Merge remote-tracking branch 'origin/main' into romanlutz-fix-mobile-…
ccbdad6 
…chat-layout
FIX: Stabilize responsive image E2E assertion
a653206 
Retry layout assertions while the image transitions from its loading state.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@romanlutz
romanlutz added this pull request to the merge queue Jul 20, 2026
@github-merge-queue
github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Jul 20, 2026
@romanlutz
romanlutz enabled auto-merge July 20, 2026 22:22
@romanlutz
romanlutz added this pull request to the merge queue Jul 20, 2026
Merged via the queue into microsoft:main with commit 1391f5f Jul 20, 2026
47 checks passed
@romanlutz
romanlutz deleted the romanlutz-fix-mobile-chat-layout branch July 20, 2026 22:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@behnam-o behnam-o behnam-o approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@romanlutz @behnam-o