From 3d4da72ccf5e88fd8377ae2c6e1d0ca842619583 Mon Sep 17 00:00:00 2001
From: Lee Jackson <130007945+Imagineer99@users.noreply.github.com>
Date: Tue, 7 Apr 2026 17:02:24 +0100
Subject: [PATCH] Studio: Polish API Providers dialog  (#4899)

* fix: lower verbage in API providers page

* fix: fix(studio): tune API Providers dialog width with rem-based responsive caps
---
 .../src/features/chat/chat-providers-dialog.tsx   | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/studio/frontend/src/features/chat/chat-providers-dialog.tsx b/studio/frontend/src/features/chat/chat-providers-dialog.tsx
index 00d46f260f..75c721b422 100644
--- a/studio/frontend/src/features/chat/chat-providers-dialog.tsx
+++ b/studio/frontend/src/features/chat/chat-providers-dialog.tsx
@@ -445,8 +445,7 @@ export function ChatProvidersDialog({
       <DialogContent
         overlayClassName="bg-black/50 backdrop-blur-sm"
         className={
-          // 20% narrower than prior viewport-based widths (multiply by 0.8).
-          "flex max-h-[90dvh] w-[calc(60vw-1.2rem)] sm:w-[56.4vw] lg:w-[55.2vw] xl:w-[54vw] sm:max-w-none flex-col gap-0 overflow-y-auto p-0"
+          "flex max-h-[90dvh] w-[96vw] sm:max-w-none md:max-w-[56rem] lg:max-w-[62rem] xl:max-w-[66rem] 2xl:max-w-[70rem] flex-col gap-0 overflow-y-auto p-0"
         }
       >
         <DialogHeader className="shrink-0 space-y-2 px-8 pb-5 pt-8 text-left">
@@ -460,8 +459,8 @@ export function ChatProvidersDialog({
           </DialogDescription>
         </DialogHeader>
         <Separator />
-        <div className="grid min-w-0 grid-cols-1 gap-8 p-8 pt-6 sm:gap-10 md:grid-cols-[minmax(0,1.05fr)_minmax(0,1fr)] md:gap-12 lg:gap-14">
-          <div className="min-w-0">
+        <div className="grid min-w-0 grid-cols-1 gap-8 p-8 pt-6 sm:gap-10 md:grid-cols-2 md:gap-0">
+          <div className="min-w-0 md:pr-8 lg:pr-10">
             <div className="mb-5 flex flex-wrap items-end justify-between gap-2">
               <h3 className="text-sm font-semibold tracking-tight">Configured providers</h3>
               <span className="text-xs tabular-nums text-muted-foreground">
@@ -565,7 +564,7 @@ export function ChatProvidersDialog({
               )}
             </div>
           </div>
-          <div className="min-w-0 border-t border-border/80 pt-8 md:flex md:flex-col md:border-l md:border-t-0 md:pl-10 md:pt-0 lg:pl-12">
+          <div className="min-w-0 border-t border-border/80 pt-8 md:flex md:flex-col md:border-l md:border-t-0 md:pl-8 md:pt-0 lg:pl-10">
             <h3 className="mb-6 text-sm font-semibold tracking-tight">
               {editingProviderId ? "Edit provider" : "Add provider"}
             </h3>
@@ -607,8 +606,7 @@ export function ChatProvidersDialog({
                   </SelectContent>
                 </Select>
                 <p className="text-sm leading-relaxed text-muted-foreground">
-                  Choose a provider from Studio's supported list. Your API key stays on this
-                  device and is encrypted before each request.
+                  Choose a provider from Studio's supported list.
                 </p>
               </div>
 
@@ -639,8 +637,7 @@ export function ChatProvidersDialog({
                   className="h-10 text-sm"
                 />
                 <p className="text-sm leading-relaxed text-muted-foreground">
-                  Leave blank to use the registry default for this provider type. Set this to
-                  target a custom OpenAI-compatible endpoint.
+                  Leave blank to use the registry default for this provider type.
                 </p>
               </div>