Agents web: Mobile host picker dropdown improvements#312934
Merged
Merged
Conversation
…t on phone layout Agent-Logs-Url: https://github.com/microsoft/vscode/sessions/c0ced124-328e-43c3-a95c-34c56f55a84d Co-authored-by: osortega <48293249+osortega@users.noreply.github.com>
…ent propagation from sheet Agent-Logs-Url: https://github.com/microsoft/vscode/sessions/c0ced124-328e-43c3-a95c-34c56f55a84d Co-authored-by: osortega <48293249+osortega@users.noreply.github.com>
Move the bottom sheet UI from an inline phone-layout branch in the desktop HostFilterActionViewItem into a proper mobile subclass in browser/parts/mobile/, following the established mobile architecture: - Create MobileHostFilterActionViewItem extending the desktop class, overriding _showMenu() to show a bottom sheet instead of a context menu - Remove IsPhoneLayoutContext branching from the desktop component - Move bottom sheet CSS from hostFilter.css to mobileChatShell.css - Update hostFilter.contribution.ts to instantiate the mobile variant for the MobileTitleBarCenter menu registration - Add Mobile Component Architecture rules to sessions.instructions.md Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The bottom sheet slid up from the bottom of the screen, far from the picker trigger at the top, and had a transparent background. Replace with a dropdown panel that: - Anchors directly below the trigger element - Has a solid background with border and shadow - Animates in/out with a subtle fade + slide from above - Uses 44px min-height items for touch targets - Transparent backdrop for dismiss-on-tap without visual overlay Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Use agentsChatInput background color to match the chat input - Add font-weight: normal to prevent bold text in items - Add Gesture.addTarget + TouchEventType.Tap on each item button so taps register on iOS/touch devices (CLICK alone is unreliable) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Create media/hostPickerDropdown.css in mobile parts folder - Move all host picker styles from mobileChatShell.css to dedicated component file - Add CSS import in mobileHostFilterActionViewItem.ts - Document CSS organization pattern in sessions.instructions.md This follows the same pattern as regular VS Code parts where each component owns its CSS in a media/ subfolder. Keeps mobileChatShell.css focused on shell-level phone layout styles only. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Replace undefined fallback variables with proper agentsChatInput theme tokens: - background: var(--vscode-agentsChatInput-background) - foreground: var(--vscode-agentsChatInput-foreground) - border: var(--vscode-agentsChatInput-border) These variables are registered in src/vs/sessions/common/theme.ts and properly available in all themes. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Replace agentsChatInput variables (only available in .agent-sessions-workbench scope) with globally available input and foreground variables since the backdrop is rendered directly on body, outside the workbench scope. - background: var(--vscode-input-background) - foreground: var(--vscode-foreground) - border: var(--vscode-input-border) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
CSS variables aren't available in the body scope where the dropdown is rendered. Instead, fetch theme colors via IThemeService and apply them as inline styles: - Get theme colors at dropdown creation time - Set backgroundColor, borderColor, foregroundColor via style attribute - Apply hoverBackgroundColor and linkColor via event listeners - Remove all CSS variable references This ensures colors work in vscode.dev and all environments where CSS variables may not be injected. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The focus border styling is handled by the CSS :focus-visible rule, so the TypeScript variable is not needed. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The dropdown was appended to document.body, which is outside the .monaco-workbench element where --vscode-* CSS custom properties are defined. This caused all theme variables to be undefined. Fix: query for the .monaco-workbench container and append the backdrop there instead. This restores CSS variable inheritance and moves all color declarations back to the CSS file where they belong. Also reverts the IThemeService inline-styles approach — colors are now purely in hostPickerDropdown.css using standard CSS variables. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1. Center the dropdown horizontally on screen using left: 50% + translateX(-50%) instead of anchoring to the trigger's left edge. 2. Remove the 'connecting…' / 'disconnected' status text from dropdown items — the titlebar connection icon already conveys this info, and the status text was causing the dropdown to extend beyond screen. 3. Clean up unused AgentHostFilterConnectionStatus import and status CSS. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The entrance/exit animations were overriding the centering transform during playback, causing the dropdown to appear right-aligned then jump to center when the animation ended. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Leftover from extracting host picker CSS into its own file. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves the Agents window mobile host picker UI by introducing a dedicated mobile action view item that renders a themed, centered dropdown panel (with backdrop) instead of using the desktop context menu path.
Changes:
- Add
MobileHostFilterActionViewItemthat overrides the host picker menu to show a custom dropdown/backdrop inside.monaco-workbench(so theme CSS variables resolve). - Extract dropdown styling into a new component-scoped stylesheet (
media/hostPickerDropdown.css) and update documentation for the mobile CSS organization pattern. - Adjust contribution wiring so the MobileTitleBarCenter menu uses the mobile action view item.
Show a summary per file
| File | Description |
|---|---|
src/vs/sessions/contrib/remoteAgentHost/browser/hostFilterActionViewItem.ts |
Makes members/methods protected to enable a mobile subclass override. |
src/vs/sessions/contrib/remoteAgentHost/browser/hostFilter.contribution.ts |
Instantiates the mobile action view item for the mobile titlebar menu. |
src/vs/sessions/browser/parts/mobile/mobileHostFilterActionViewItem.ts |
New mobile dropdown implementation (backdrop, positioning, selection handling). |
src/vs/sessions/browser/parts/mobile/mobileChatShell.css |
Contains an added trailing brace that breaks CSS parsing. |
src/vs/sessions/browser/parts/mobile/media/hostPickerDropdown.css |
New stylesheet for the dropdown/backdrop styling + animations. |
.github/instructions/sessions.instructions.md |
Documents mobile component/CSS organization guidance. |
Copilot's findings
- Files reviewed: 5/5 changed files
- Comments generated: 2
osortega
commented
Apr 27, 2026
1. Fix dismiss race condition: guard the timeout callback so it only clears the dropdown if it still owns the current store, and register the timeout for disposal when the dropdown is reopened early. 2. Use correct ARIA pattern: switch from listbox/option to menu/menuitemradio which better matches the single-select interaction pattern. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
DonJayamanne
previously approved these changes
Apr 27, 2026
1. Move mobileHostFilterActionViewItem.ts and hostPickerDropdown.css
to contrib/remoteAgentHost/browser/ to fix import layering violation
(browser/parts/mobile/ cannot import from contrib/).
2. Replace querySelector('.monaco-workbench') with
dom.findParentWithClass() to avoid fragile selector usage.
3. Track first item directly instead of using querySelector to find it.
4. Update sessions.instructions.md example paths accordingly.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Use a general description instead of specific file paths that can easily go stale. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
dmitrivMS
approved these changes
Apr 28, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Improves the mobile host picker dropdown with proper styling, centering, and CSS organization.
Changes
media/hostPickerDropdown.css) following the standard VS Code parts pattern.monaco-workbenchcontainer so CSS theme variables are inherited (previously appended todocument.bodywhere--vscode-*vars are undefined)rgba(0,0,0,0.1))sessions.instructions.mdto document CSS organization pattern for mobile componentsFiles changed
src/vs/sessions/browser/parts/mobile/mobileHostFilterActionViewItem.tssrc/vs/sessions/browser/parts/mobile/media/hostPickerDropdown.css(new)src/vs/sessions/browser/parts/mobile/mobileChatShell.css.github/instructions/sessions.instructions.md