Update AI settings page styles (#1758)

<!--
Ensure the title clearly reflects what was changed.
Provide a clear and concise description of the changes made. The PR
should only contain the changes related to the issue, and no other
unrelated changes.
-->

Fixes OPS-3164.

<img width="1915" height="631" alt="image"
src="https://github.com/user-attachments/assets/710ca45b-1ce1-4ba1-9bda-533793ecfd42"
/>

Author: Roman Snapko

packages/react-ui/src/app/features/ai/ai-settings-form.tsx

@@ -16,6 +16,7 @@ type AiSettingsFormProps = {
   onSave: (connectionName: string) => void;
   displayName?: string;
   disabled?: boolean;
+  labelPlacement?: 'top' | 'left';
 };
 
 type LocalForm = { connection: string };
@@ -30,6 +31,7 @@ const AiSettingsForm = ({
   initialConnection,
   onSave,
   displayName,
+  labelPlacement,
   disabled = false,
 }: AiSettingsFormProps) => {
   const form = useForm<LocalForm>({
@@ -85,6 +87,7 @@ const AiSettingsForm = ({
           providerKey={providerKey}
           name={'connection'}
           displayName={displayName}
+          labelPlacement={labelPlacement}
         />
       </form>
     </Form>

packages/react-ui/src/app/features/builder/step-settings/block-settings/connection-select.tsx

@@ -40,6 +40,7 @@ type ConnectionSelectProps = {
   providerKey: string;
   name: string;
   displayName?: string;
+  labelPlacement?: 'top' | 'left';
 };
 
 const ConnectionSelect = memo((params: ConnectionSelectProps) => {
@@ -133,6 +134,7 @@ const ConnectionSelect = memo((params: ConnectionSelectProps) => {
               hideDescription={true}
               inputName={params.name}
               allowDynamicValues={params.allowDynamicValues}
+              labelPlacement={params.labelPlacement}
             >
               {connectionDialogOpen && !isLoadingConnection && (
                 <DynamicFormValidationProvider>

packages/react-ui/src/app/routes/settings/ai/index.tsx

@@ -140,7 +140,7 @@ const AiSettingsPage = () => {
               <Skeleton className="h-[78px]" />
             )}
 
-            <h3 className="text-sm font-medium">{t('MCP')}</h3>
+            <h3 className="text-sm font-bold">{t('MCP')}</h3>
             {awsBlockModel ? (
               <AiSettingsForm
                 block={awsBlockModel}
@@ -151,6 +151,7 @@ const AiSettingsPage = () => {
                   isSavingMcpSettings || !isAiConfigured || isSavingAiSettings
                 }
                 displayName={t('AWS Cost')}
+                labelPlacement="left"
               />
             ) : (
               <Skeleton className="h-[78px]" />