[PatchWidget] Refine scroll behavior in select workspace dialog

- Prevent default scrollbar handling for arrow-down key presses.
- Implement manual focus scrolling for incremental, item-by-item movement, avoiding the default centering behavior.

Bug: 410714934
Change-Id: I5451fddbedc2f86d7d0738e80f46189847507c0b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6459606
Commit-Queue: Ergün Erdoğmuş <ergunsh@chromium.org>
Reviewed-by: Wolfgang Beyer <wolfi@chromium.org>
Auto-Submit: Ergün Erdoğmuş <ergunsh@chromium.org>
Commit-Queue: Wolfgang Beyer <wolfi@chromium.org>
diff --git a/front_end/panels/ai_assistance/SelectWorkspaceDialog.test.ts b/front_end/panels/ai_assistance/SelectWorkspaceDialog.test.ts
index 4380437..6480ac4 100644
--- a/front_end/panels/ai_assistance/SelectWorkspaceDialog.test.ts
+++ b/front_end/panels/ai_assistance/SelectWorkspaceDialog.test.ts
@@ -79,12 +79,12 @@
 
   it('listens to ArrowUp/Down', async () => {
     const {view} = await createComponent();
-    view.input.onListItemKeyDown({key: 'ArrowDown', bubbles: true, composed: true} as KeyboardEvent);
+    view.input.onListItemKeyDown(new KeyboardEvent('keydown', {key: 'ArrowDown'}));
     let input = await view.nextInput;
     sinon.assert.callCount(view, 2);
     assert.strictEqual(input.selectedIndex, 1);
 
-    view.input.onListItemKeyDown({key: 'ArrowUp', bubbles: true, composed: true} as KeyboardEvent);
+    view.input.onListItemKeyDown(new KeyboardEvent('keydown', {key: 'ArrowUp'}));
     input = await view.nextInput;
     sinon.assert.callCount(view, 3);
     assert.strictEqual(input.selectedIndex, 0);
diff --git a/front_end/panels/ai_assistance/SelectWorkspaceDialog.ts b/front_end/panels/ai_assistance/SelectWorkspaceDialog.ts
index 91b31de..00da3c3b 100644
--- a/front_end/panels/ai_assistance/SelectWorkspaceDialog.ts
+++ b/front_end/panels/ai_assistance/SelectWorkspaceDialog.ts
@@ -188,16 +188,24 @@
 
   #onListItemKeyDown(event: KeyboardEvent): void {
     switch (event.key) {
-      case 'ArrowDown':
+      case 'ArrowDown': {
+        event.preventDefault();
         this.#selectedIndex = Math.min(this.#selectedIndex + 1, this.#folders.length - 1);
-        this.contentElement.querySelectorAll('li')[this.#selectedIndex]?.focus();
+        const targetItem = this.contentElement.querySelectorAll('li')[this.#selectedIndex];
+        targetItem?.scrollIntoView({block: 'nearest', inline: 'nearest'});
+        targetItem?.focus({preventScroll: true});
         this.requestUpdate();
         break;
-      case 'ArrowUp':
+      }
+      case 'ArrowUp': {
+        event.preventDefault();
         this.#selectedIndex = Math.max(this.#selectedIndex - 1, 0);
-        this.contentElement.querySelectorAll('li')[this.#selectedIndex]?.focus();
+        const targetItem = this.contentElement.querySelectorAll('li')[this.#selectedIndex];
+        targetItem?.scrollIntoView({block: 'nearest', inline: 'nearest'});
+        targetItem?.focus({preventScroll: true});
         this.requestUpdate();
         break;
+      }
       case 'Enter':
         event.preventDefault();
         this.#onSelectButtonClick();