Action widget: hover background for open pickers (#299301)

* Action widget: full-width separators and hover background for open pickers

- Remove horizontal padding from action widget, inset list rows instead
  so separators span edge-to-edge
- Fire onDidChangeVisibility in ActionWidgetDropdown so aria-expanded
  is set correctly for all picker types
- Apply toolbar hover background to picker buttons while their
  dropdown is open

* Revert separator layout hack, keep hover background for open pickers

src/vs/platform/actionWidget/browser/actionWidgetDropdown.ts

@@ -170,6 +170,7 @@ export class ActionWidgetDropdown extends BaseDropdown {
 				action.run();
 			},
 			onHide: () => {
+				this.hide();
 				if (isHTMLElement(previouslyFocusedElement)) {
 					previouslyFocusedElement.focus();
 				}
@@ -221,6 +222,8 @@ export class ActionWidgetDropdown extends BaseDropdown {
 			getWidgetRole: () => 'menu',
 		};
 
+		super.show();
+
 		this.actionWidgetService.show<IActionWidgetDropdownAction>(
 			this._options.label ?? '',
 			false,

src/vs/workbench/contrib/chat/browser/widget/input/chatModelPicker.ts

@@ -584,7 +584,7 @@ export class ModelPickerWidget extends Disposable {
 			filterPlaceholder: localize('chat.modelPicker.search', "Search models"),
 			focusFilterOnOpen: true,
 			collapsedByDefault: new Set([ModelPickerSection.Other]),
-			minWidth: 300,
+			minWidth: 200,
 		};
 		const previouslyFocusedElement = dom.getActiveElement();
 

src/vs/workbench/contrib/chat/browser/widget/media/chat.css

@@ -1508,6 +1508,12 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	color: var(--vscode-icon-foreground);
 }
 
+/* Keep hover background while picker dropdown is open */
+.interactive-session .chat-input-toolbar .action-label[aria-expanded="true"],
+.interactive-session .chat-secondary-toolbar .action-label[aria-expanded="true"] {
+	background-color: var(--vscode-toolbar-hoverBackground);
+}
+
 /* When chevrons are hidden and only showing an icon (no label), size to 22x22 with centered icon */
 .interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.hide-chevrons:not(:has(.chat-input-picker-label)),
 .interactive-session .chat-input-toolbar .chat-input-picker-item.hide-chevrons .action-label:not(:has(.chat-input-picker-label)),