fix(frontend): typed inputs in new run modal (#10799)

## Changes 🏗️

###  Make the **Credentials Inputs** show up on the new Run Agent Modal
<img width="450" height="784" alt="Screenshot 2025-09-02 at 00 54 19"
src="https://github.com/user-attachments/assets/26ad8242-a1bc-45f6-9149-a3d207683679"
/>


### Fixes on other modals...

<img width="450" height="579" alt="Screenshot 2025-09-02 at 00 04 40"
src="https://github.com/user-attachments/assets/fa2f9ed9-207b-4599-9e60-3e37c4be6ea9"
/>
 
<img width="450" height="579" alt="Screenshot 2025-09-02 at 00 04 44"
src="https://github.com/user-attachments/assets/92e062a7-f161-423e-b6c9-f998fbdef102"
/>

<img width="450" height="634" alt="Screenshot 2025-09-02 at 00 47 06"
src="https://github.com/user-attachments/assets/93009809-0df0-44c5-b2d2-a9aa0f501312"
/>


- always use buttons/inputs in small size ( _due to the tight space_ ) 
- use from the design system
- always use pretty scrollbars
- Configure
[`tailwind-scrollbars`](https://github.com/adoxography/tailwind-scrollbar)
for pretty scrollbars
- prevent content in dialog to overflow when scrollable

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Run the app locally with the new agent run modal flag enabled
  - [x] Check the above 

#### For configuration changes:

None

Author: 0ubbe

autogpt_platform/frontend/package.json

@@ -89,6 +89,7 @@
     "shepherd.js": "14.5.1",
     "sonner": "2.0.7",
     "tailwind-merge": "2.6.0",
+    "tailwind-scrollbar": "4.0.2",
     "tailwindcss-animate": "1.0.7",
     "uuid": "11.1.0",
     "vaul": "1.1.2",

autogpt_platform/frontend/pnpm-lock.yaml

@@ -1,15 +1,7 @@
 import { Input } from "@/components/atoms/Input/Input";
 import { Button } from "@/components/atoms/Button/Button";
 import { Dialog } from "@/components/molecules/Dialog/Dialog";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
+import { Form, FormDescription, FormField } from "@/components/ui/form";
 import {
   BlockIOCredentialsSubSchema,
   CredentialsMetaInput,
@@ -54,86 +46,75 @@ export function APIKeyCredentialsModal({
         },
       }}
       onClose={onClose}
+      styling={{
+        maxWidth: "25rem",
+      }}
     >
       <Dialog.Content>
         {schemaDescription && (
           <p className="mb-4 text-sm text-zinc-600">{schemaDescription}</p>
         )}
 
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2">
             <FormField
               control={form.control}
               name="apiKey"
               render={({ field }) => (
-                <FormItem>
-                  <FormLabel>API Key</FormLabel>
-                  {schema.credentials_scopes && (
-                    <FormDescription>
-                      Required scope(s) for this block:{" "}
-                      {schema.credentials_scopes?.map((s, i, a) => (
-                        <span key={i}>
-                          <code>{s}</code>
-                          {i < a.length - 1 && ", "}
-                        </span>
-                      ))}
-                    </FormDescription>
-                  )}
-                  <FormControl>
-                    <Input
-                      id="apiKey"
-                      label="API Key"
-                      hideLabel
-                      type="password"
-                      placeholder="Enter API key..."
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
+                <>
+                  <Input
+                    id="apiKey"
+                    label="API Key"
+                    type="password"
+                    placeholder="Enter API key..."
+                    size="small"
+                    hint={
+                      schema.credentials_scopes ? (
+                        <FormDescription>
+                          Required scope(s) for this block:{" "}
+                          {schema.credentials_scopes?.map((s, i, a) => (
+                            <span key={i}>
+                              <code className="text-xs font-bold">{s}</code>
+                              {i < a.length - 1 && ", "}
+                            </span>
+                          ))}
+                        </FormDescription>
+                      ) : null
+                    }
+                    {...field}
+                  />
+                </>
               )}
             />
             <FormField
               control={form.control}
               name="title"
               render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Name</FormLabel>
-                  <FormControl>
-                    <Input
-                      id="title"
-                      label="Name"
-                      hideLabel
-                      type="text"
-                      placeholder="Enter a name for this API key..."
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
+                <Input
+                  id="title"
+                  label="Name"
+                  type="text"
+                  placeholder="Enter a name for this API key..."
+                  size="small"
+                  {...field}
+                />
               )}
             />
             <FormField
               control={form.control}
               name="expiresAt"
               render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Expiration Date (Optional)</FormLabel>
-                  <FormControl>
-                    <Input
-                      id="expiresAt"
-                      label="Expiration Date"
-                      hideLabel
-                      type="datetime-local"
-                      placeholder="Select expiration date..."
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
+                <Input
+                  id="expiresAt"
+                  label="Expiration Date"
+                  type="datetime-local"
+                  placeholder="Select expiration date..."
+                  size="small"
+                  {...field}
+                />
               )}
             />
-            <Button type="submit" className="w-full">
+            <Button type="submit" size="small" className="min-w-68">
               Save & use this API key
             </Button>
           </form>

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/AgentRunsView/components/APIKeyCredentialsModal/APIKeyCredentialsModal.tsx

@@ -335,30 +335,39 @@ export const CredentialsInput: FC<{
   // Show credentials creation UI when no relevant credentials exist
   if (!hasRelevantCredentials) {
     return (
-      <div>
+      <div className="mb-4">
         {fieldHeader}
 
         <div className={cn("flex flex-row space-x-2", className)}>
           {supportsOAuth2 && (
-            <Button onClick={handleOAuthLogin}>
+            <Button onClick={handleOAuthLogin} size="small">
               <ProviderIcon className="mr-2 h-4 w-4" />
               {"Sign in with " + providerName}
             </Button>
           )}
           {supportsApiKey && (
-            <Button onClick={() => setAPICredentialsModalOpen(true)}>
+            <Button
+              onClick={() => setAPICredentialsModalOpen(true)}
+              size="small"
+            >
               <ProviderIcon className="mr-2 h-4 w-4" />
               Enter API key
             </Button>
           )}
           {supportsUserPassword && (
-            <Button onClick={() => setUserPasswordCredentialsModalOpen(true)}>
+            <Button
+              onClick={() => setUserPasswordCredentialsModalOpen(true)}
+              size="small"
+            >
               <ProviderIcon className="mr-2 h-4 w-4" />
               Enter username and password
             </Button>
           )}
           {supportsHostScoped && credentials.discriminatorValue && (
-            <Button onClick={() => setHostScopedCredentialsModalOpen(true)}>
+            <Button
+              onClick={() => setHostScopedCredentialsModalOpen(true)}
+              size="small"
+            >
               <ProviderIcon className="mr-2 h-4 w-4" />
               {`Enter sensitive headers for ${getHostFromUrl(credentials.discriminatorValue)}`}
             </Button>