fix(ui/filepicker): scroll full match list in dropdown [BE-13263] (#3284)

app/react/components/form-components/FilePicker/FilePicker.stories.tsx

@@ -130,6 +130,13 @@ const REPO_NODES: FileNode[] = [
   { name: 'tsconfig.json' },
 ];
 
+const HUGE_REPO_NODES: FileNode[] = Array.from({ length: 100 }, (_, dir) => ({
+  name: `service-${dir}`,
+  children: Array.from({ length: 100 }, (_, file) => ({
+    name: `config-${file}.yml`,
+  })),
+}));
+
 // ─── Skeleton ─────────────────────────────────────────────────────────────────
 
 export const Skeleton: StoryObj<{ loading: boolean }> = {
@@ -217,3 +224,29 @@ export const Default: Story = {
     },
   },
 };
+
+// ─── Huge repo (BE-13263) ──────────────────────────────────────────────────────
+
+export const HugeRepo: Story = {
+  args: {
+    files: HUGE_REPO_NODES,
+    exampleExpressions: ['*.yml'],
+  },
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [value, setValue] = useState<string[]>([]);
+    return (
+      <div className="flex flex-col gap-2 p-2">
+        <FilePicker {...args} value={value} onChange={setValue} />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Repro for BE-13263: 10,000 files, all matching `*.yml`. Click the `*.yml` chip (or type it into the filter bar) to render the full 10,000-row match list and see how the dropdown behaves at that scale.',
+      },
+    },
+  },
+};

app/react/components/form-components/FilePicker/FilePicker.tsx

@@ -135,7 +135,7 @@ export function FilePicker({
           No matching files
         </p>
       ) : (
-        <ul className="px-1">
+        <ul className="h-full w-full overflow-y-auto px-1">
           {paths.map((path) => (
             <li key={path} className="flex h-8 list-none items-center px-3">
               <span className="truncate font-mono text-[13px] text-gray-11 th-highcontrast:text-white th-dark:text-white">