From be4b2459d75f074f829f13467f5dcc5d11ec73f2 Mon Sep 17 00:00:00 2001
From: Zane Staggs <zane@squareup.com>
Date: Mon, 4 Aug 2025 10:40:16 -0700
Subject: [PATCH] centered the providers grid and title for wider screens,
 cleaned up the hovers and spacing/wrapping of grid items.

---
 .../components/settings/providers/ProviderGrid.tsx |  8 +++++++-
 .../settings/providers/ProviderSettingsPage.tsx    | 14 ++++++++------
 .../forms/DefaultProviderSetupForm.tsx             |  8 +++++---
 .../providers/subcomponents/CardContainer.tsx      |  6 +++---
 .../subcomponents/buttons/CardButtons.tsx          |  4 ++--
 5 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/ui/desktop/src/components/settings/providers/ProviderGrid.tsx b/ui/desktop/src/components/settings/providers/ProviderGrid.tsx
index 48de1027eba7..c30166106a7e 100644
--- a/ui/desktop/src/components/settings/providers/ProviderGrid.tsx
+++ b/ui/desktop/src/components/settings/providers/ProviderGrid.tsx
@@ -6,7 +6,13 @@ import { ProviderDetails } from '../../../api';
 
 const GridLayout = memo(function GridLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="grid grid-cols-[repeat(auto-fill,_minmax(140px,_1fr))] gap-3 [&_*]:z-20">
+    <div
+      className="grid gap-4 [&_*]:z-20 p-1"
+      style={{
+        gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 200px))',
+        justifyContent: 'start',
+      }}
+    >
       {children}
     </div>
   );
diff --git a/ui/desktop/src/components/settings/providers/ProviderSettingsPage.tsx b/ui/desktop/src/components/settings/providers/ProviderSettingsPage.tsx
index 5b1f7a70dce8..a0db2348bbf2 100644
--- a/ui/desktop/src/components/settings/providers/ProviderSettingsPage.tsx
+++ b/ui/desktop/src/components/settings/providers/ProviderSettingsPage.tsx
@@ -100,21 +100,23 @@ export default function ProviderSettings({ onClose, isOnboarding }: ProviderSett
     <div className="h-screen w-full flex flex-col">
       <ScrollArea className="flex-1 w-full">
         {isOnboarding && (
-          <div className="group/logo flex justify-left pl-8">
-            <WelcomeGooseLogo className="h-16 w-16 md:h-20 md:w-20 text-black dark:text-white" />
+          <div className="w-full max-w-6xl mx-auto mt-16">
+            <div className="group/logo flex justify-left px-4 sm:px-6 md:px-8">
+              <WelcomeGooseLogo className="h-16 w-16 md:h-20 md:w-20 text-black dark:text-white" />
+            </div>
           </div>
         )}
-        <div className="px-8 pt-6 pb-4">
+        <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8 pt-6 pb-4">
           {/* Only show back button if not in onboarding mode */}
           {!isOnboarding && <BackButton className={'mt-[42px]'} onClick={onClose} />}
           <h1
-            className="text-3xl font-medium text-textStandard mt-4"
+            className="text-2xl sm:text-3xl font-medium text-textStandard mt-4"
             data-testid="provider-selection-heading"
           >
             {isOnboarding ? 'Configure your providers' : 'Provider Configuration Settings'}
           </h1>
           {isOnboarding && (
-            <p className="text-s text-textSubtle max-w-2xl pt-2">
+            <p className="text-sm sm:text-base text-textSubtle max-w-full sm:max-w-2xl pt-2">
               Select an AI model provider to get started with goose. You'll need to use API keys
               generated by each provider which will be encrypted and stored locally. You can change
               your provider at any time in settings.
@@ -124,7 +126,7 @@ export default function ProviderSettings({ onClose, isOnboarding }: ProviderSett
 
         <div className="py-8 pt-[20px]">
           {/* Content Area */}
-          <div className="max-w-5xl pt-4 px-8">
+          <div className="w-full max-w-6xl mx-auto pt-4 px-4 sm:px-6 md:px-8">
             <div className="relative z-10">
               {loading ? (
                 <div>Loading providers...</div>
diff --git a/ui/desktop/src/components/settings/providers/modal/subcomponents/forms/DefaultProviderSetupForm.tsx b/ui/desktop/src/components/settings/providers/modal/subcomponents/forms/DefaultProviderSetupForm.tsx
index f66d14d412b7..294f3052de1b 100644
--- a/ui/desktop/src/components/settings/providers/modal/subcomponents/forms/DefaultProviderSetupForm.tsx
+++ b/ui/desktop/src/components/settings/providers/modal/subcomponents/forms/DefaultProviderSetupForm.tsx
@@ -110,7 +110,9 @@ export default function DefaultProviderSetupForm({
       ) : (
         requiredParameters.map((parameter) => (
           <div key={parameter.name}>
-            <label className="block text-sm font-medium text-gray-700 mb-1">{parameter.name}</label>
+            <label className="block text-sm font-medium text-textStandard mb-1">
+              {parameter.name}
+            </label>
             <Input
               type={parameter.secret ? 'password' : 'text'}
               value={configValues[parameter.name] || ''}
@@ -124,8 +126,8 @@ export default function DefaultProviderSetupForm({
               className={`w-full h-14 px-4 font-regular rounded-lg shadow-none ${
                 validationErrors[parameter.name]
                   ? 'border-2 border-red-500'
-                  : 'border border-gray-300'
-              } bg-white text-lg placeholder:text-gray-400 font-regular text-gray-900`}
+                  : 'border border-borderSubtle hover:border-borderStandard'
+              } bg-background-default text-lg placeholder:text-textSubtle font-regular text-textStandard`}
               required={true}
             />
           </div>
diff --git a/ui/desktop/src/components/settings/providers/subcomponents/CardContainer.tsx b/ui/desktop/src/components/settings/providers/subcomponents/CardContainer.tsx
index 56cf6a5b880f..5a6e02e9e496 100644
--- a/ui/desktop/src/components/settings/providers/subcomponents/CardContainer.tsx
+++ b/ui/desktop/src/components/settings/providers/subcomponents/CardContainer.tsx
@@ -11,10 +11,10 @@ interface CardContainerProps {
 function GlowingRing() {
   return (
     <div
-      className={`absolute pointer-events-none w-[260px] h-[260px] top-[-50px] left-[-30px] origin-center 
+      className={`absolute pointer-events-none inset-0 rounded-[9px] origin-center 
                             bg-[linear-gradient(45deg,#13BBAF,#FF4F00)] 
                             animate-[rotate_6s_linear_infinite] z-[-1] 
-                            opacity-0 group-hover/card:opacity-100`}
+                            opacity-0 group-hover/card:opacity-40 transition-opacity duration-300`}
     />
   );
 }
@@ -37,7 +37,7 @@ export default function CardContainer({
   return (
     <div
       data-testid={testId}
-      className={`relative h-full p-[1px] overflow-hidden rounded-[9px] group/card 
+      className={`relative h-full p-[2px] overflow-hidden rounded-[9px] group/card 
                  ${
                    grayedOut
                      ? 'bg-borderSubtle hover:bg-gray-700'
diff --git a/ui/desktop/src/components/settings/providers/subcomponents/buttons/CardButtons.tsx b/ui/desktop/src/components/settings/providers/subcomponents/buttons/CardButtons.tsx
index 7f4395c32679..d4eccd2d861d 100644
--- a/ui/desktop/src/components/settings/providers/subcomponents/buttons/CardButtons.tsx
+++ b/ui/desktop/src/components/settings/providers/subcomponents/buttons/CardButtons.tsx
@@ -72,7 +72,7 @@ export function ConfigureSettingsButton({ tooltip, className, ...props }: Action
       variant="outline"
       text={'Configure'}
       iconClassName="rotate-90"
-      className={className}
+      className={clsx('cursor-pointer', className)}
       {...props}
     />
   );
@@ -86,7 +86,7 @@ export function RocketButton({ tooltip, className, ...props }: ActionButtonProps
       tooltip={tooltip}
       variant="outline"
       text={'Launch'}
-      className={className}
+      className={clsx('cursor-pointer', className)}
       {...props}
     />
   );