From bb66914b1e63946b469de44ab700ee12cd1a8ea0 Mon Sep 17 00:00:00 2001
From: pewdiepie-archdaemon <pewdiepie-archdaemon@users.noreply.github.com>
Date: Sat, 13 Jun 2026 23:00:16 +0900
Subject: [PATCH] Settings: clamp logo SVGs to 18px chip + endpoint dropdown
 gets logo
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Provider SVGs in providers.js declare only viewBox (no width/height),
so when injected into the 18×18 logo chips they fell back to the
browser default of 300×150 and blew out the row.

- CSS: SVGs inside settings logo chips (`span[id$="-logo"]`,
  the 18px wrappers in fallback rows) now stretch to 100%/100% of
  their container.
- Added matching `-logo` chip next to the Endpoint dropdowns in
  Default Chat Model and Utility Model cards.
- New `_syncEndpointLogo` helper mirrors the selected endpoint
  option's text label through providerLogo() (the select value is
  a UUID and wouldn't match anything otherwise), and
  `_fillEndpointSelect` calls it on each render.
---
 static/index.html     |  2 ++
 static/js/settings.js | 20 ++++++++++++++++++++
 static/style.css      | 11 +++++++++++
 3 files changed, 33 insertions(+)

diff --git a/static/index.html b/static/index.html
index db07c5041..d064804e6 100644
--- a/static/index.html
+++ b/static/index.html
@@ -1397,6 +1397,7 @@
             <div class="settings-col">
               <div class="settings-row">
                 <label class="settings-label">Endpoint</label>
+                <span class="adm-model-logo" id="set-defaultEpSelect-logo" style="display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;opacity:0.9;color:var(--fg);"></span>
                 <select id="set-defaultEpSelect" class="settings-select"></select>
               </div>
               <div class="settings-row">
@@ -1420,6 +1421,7 @@
             <div class="settings-col">
               <div class="settings-row">
                 <label class="settings-label">Endpoint</label>
+                <span class="adm-model-logo" id="set-utilityEpSelect-logo" style="display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;opacity:0.9;color:var(--fg);"></span>
                 <select id="set-utilityEpSelect" class="settings-select"><option value="">—</option></select>
               </div>
               <div class="settings-row">
diff --git a/static/js/settings.js b/static/js/settings.js
index 0e058484d..c5c23390d 100644
--- a/static/js/settings.js
+++ b/static/js/settings.js
@@ -239,6 +239,7 @@ function _fillEndpointSelect(selectEl, endpoints, selected, keepBlank) {
   } else if (blankText !== null) {
     selectEl.value = '';
   }
+  _syncEndpointLogo(selectEl);
 }
 
 // Mirror the selected model's provider logo into a sibling <span id="<selectId>-logo">.
@@ -256,6 +257,25 @@ function _syncModelLogo(selectEl) {
   }
 }
 
+// Same idea but for endpoint dropdowns where the <option value="…">
+// is an opaque endpoint UUID — fall back to the option's text label
+// so providerLogo() can pattern-match (Anthropic, OpenAI, Ollama, …).
+function _syncEndpointLogo(selectEl) {
+  if (!selectEl) return;
+  const logoEl = document.getElementById(selectEl.id + '-logo');
+  if (!logoEl) return;
+  const apply = () => {
+    const opt = selectEl.options[selectEl.selectedIndex];
+    const label = (opt && opt.textContent) || selectEl.value || '';
+    logoEl.innerHTML = providerLogo(label) || '';
+  };
+  apply();
+  if (!selectEl.dataset.epLogoSync) {
+    selectEl.dataset.epLogoSync = '1';
+    selectEl.addEventListener('change', apply);
+  }
+}
+
 function _fillModelSelect(selectEl, models, selected, keepBlank) {
   if (!selectEl) return;
   const previous = selected !== undefined ? selected : selectEl.value;
diff --git a/static/style.css b/static/style.css
index 274e6a734..cc0409f1f 100644
--- a/static/style.css
+++ b/static/style.css
@@ -14379,6 +14379,17 @@ body:has(.doc-version-panel:not(.hidden)) .hamburger-btn {
   flex-shrink: 0; color: var(--fg); opacity: 0.85;
 }
 .adm-provider-logo svg { width: 14px; height: 14px; }
+/* Constrain logo SVGs in settings dropdown chips. Many provider
+   icons in providers.js declare only viewBox (no width/height),
+   so without this rule the browser falls back to 300x150 and
+   blows up the row. */
+.settings-fallback-row > span[style*="width:18px"] svg:not([width]),
+.settings-row > span[style*="width:18px"] svg:not([width]),
+span[id$="-logo"] svg:not([width]) {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
 .adm-provider-logo:empty {
   background: color-mix(in srgb, var(--fg) 12%, transparent);
   border-radius: 50%;