Fixed inference providers UI

Author: nv-kasikritc

brev/welcome-ui/index.html

@@ -6,7 +6,7 @@
   <title>OpenShell — Agent Sandbox</title>
   <link rel="icon" type="image/svg+xml" href="/OpenShell-Icon.svg">
   <link rel="alternate icon" href="/favicon.ico" sizes="any">
-  <link rel="stylesheet" href="styles.css?v=7">
+  <link rel="stylesheet" href="styles.css?v=8">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">

brev/welcome-ui/server.js

@@ -642,7 +642,7 @@ function renderInferenceProviderPickerAndInstructions() {
   pickerParts.push('<div id="install-provider-picker" class="provider-picker">');
   pickerParts.push('<p class="provider-picker__heading">Choose your endpoint provider</p>');
   pickerParts.push('<div class="provider-picker__nvidia-row" data-provider-id="nvidia" role="button" tabindex="0">');
-  pickerParts.push(`<img class="provider-picker__logo provider-picker__logo--nvidia" src="/ncp-logos/${nvidiaLogo}" alt="" width="32" height="32">`);
+  pickerParts.push(`<span class="provider-picker__logo-wrap provider-picker__logo-wrap--nvidia"><img class="provider-picker__logo provider-picker__logo--nvidia" src="/ncp-logos/${nvidiaLogo}" alt="" width="32" height="32"></span>`);
   pickerParts.push(`<span class="provider-picker__name">${nvidiaName}</span>`);
   pickerParts.push('<span class="provider-picker__badge provider-picker__badge--free">Free trial. Rate limited.</span>');
   pickerParts.push("</div>");
@@ -653,7 +653,7 @@ function renderInferenceProviderPickerAndInstructions() {
     const name = escapeHtml(p.name || p.id || "");
     const logoFile = escapeHtml(p.logoFile || "generic");
     pickerParts.push(`<div class="provider-picker__tile" data-provider-id="${id}" role="button" tabindex="0">`);
-    pickerParts.push(`<img class="provider-picker__logo" src="/ncp-logos/${logoFile}" alt="" width="32" height="32">`);
+    pickerParts.push(`<span class="provider-picker__logo-wrap"><img class="provider-picker__logo" src="/ncp-logos/${logoFile}" alt="" width="32" height="32"></span>`);
     pickerParts.push(`<span class="provider-picker__name">${name}</span>`);
     pickerParts.push("</div>");
   });

brev/welcome-ui/styles.css

@@ -438,24 +438,36 @@ body {
   background: rgba(118, 185, 0, 0.12);
 }
 
-/* Base: all logos same rendered size, clamp intrinsic dimensions */
+/* Logo wrapper: fixed-size container so intrinsic image size cannot affect layout (root cause fix) */
+.provider-picker__logo-wrap {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  min-height: 32px;
+  align-items: center;
+  justify-content: center;
+}
+
+.provider-picker__logo-wrap--nvidia {
+  width: 32px;
+  height: 32px;
+}
+
 .provider-picker__logo {
+  width: 100%;
+  height: 100%;
   display: block;
-  flex-shrink: 0;
   object-fit: contain;
   object-position: center;
   box-sizing: border-box;
 }
 
-/* NVIDIA row: same visual size as partner logos for consistency */
-.provider-picker__nvidia-row .provider-picker__logo,
-.provider-picker__logo--nvidia {
-  width: 32px;
-  height: 32px;
-  min-width: 32px;
-  min-height: 32px;
-  max-width: 32px;
-  max-height: 32px;
+/* Override any intrinsic size: image must fit inside wrapper */
+.provider-picker__logo-wrap .provider-picker__logo {
+  max-width: 100%;
+  max-height: 100%;
 }
 
 .provider-picker__nvidia-row .provider-picker__name {
@@ -506,13 +518,9 @@ body {
   background: var(--bg-card-hover);
 }
 
-.provider-picker__tile .provider-picker__logo {
+.provider-picker__tile .provider-picker__logo-wrap {
   width: 32px;
   height: 32px;
-  min-width: 32px;
-  min-height: 32px;
-  max-width: 32px;
-  max-height: 32px;
 }
 
 .provider-picker__tile .provider-picker__name {