From 4889dd974fdc690d7a0b3cac3890848c8bb03b94 Mon Sep 17 00:00:00 2001
From: Josh Knapp <shadow@dao-mail.com>
Date: Thu, 12 Mar 2026 07:18:47 -0700
Subject: [PATCH] Change auth mode and Bedrock method selectors from button
 lists to dropdowns

The horizontal button lists overflowed the viewable area of the card. Replace
with <select> dropdowns for both the main auth mode and the Bedrock sub-method.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/src/components/projects/ProjectCard.tsx | 77 ++++++---------------
 1 file changed, 21 insertions(+), 56 deletions(-)

diff --git a/app/src/components/projects/ProjectCard.tsx b/app/src/components/projects/ProjectCard.tsx
index 632c364..ecfc17a 100644
--- a/app/src/components/projects/ProjectCard.tsx
+++ b/app/src/components/projects/ProjectCard.tsx
@@ -449,50 +449,18 @@ export default function ProjectCard({ project }: Props) {
           {/* Auth mode selector */}
           <div className="flex items-center gap-1 text-xs">
             <span className="text-[var(--text-secondary)] mr-1">Auth:</span>
-            <button
-              onClick={(e) => { e.stopPropagation(); handleAuthModeChange("anthropic"); }}
+            <select
+              value={project.auth_mode}
+              onChange={(e) => { e.stopPropagation(); handleAuthModeChange(e.target.value as AuthMode); }}
+              onClick={(e) => e.stopPropagation()}
               disabled={!isStopped}
-              className={`px-2 py-0.5 rounded transition-colors ${
-                project.auth_mode === "anthropic"
-                  ? "bg-[var(--accent)] text-white"
-                  : "text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-primary)]"
-              } disabled:opacity-50`}
+              className="px-2 py-0.5 rounded bg-[var(--bg-primary)] border border-[var(--border-color)] text-xs text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)] disabled:opacity-50"
             >
-              Anthropic
-            </button>
-            <button
-              onClick={(e) => { e.stopPropagation(); handleAuthModeChange("bedrock"); }}
-              disabled={!isStopped}
-              className={`px-2 py-0.5 rounded transition-colors ${
-                project.auth_mode === "bedrock"
-                  ? "bg-[var(--accent)] text-white"
-                  : "text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-primary)]"
-              } disabled:opacity-50`}
-            >
-              Bedrock
-            </button>
-            <button
-              onClick={(e) => { e.stopPropagation(); handleAuthModeChange("ollama"); }}
-              disabled={!isStopped}
-              className={`px-2 py-0.5 rounded transition-colors ${
-                project.auth_mode === "ollama"
-                  ? "bg-[var(--accent)] text-white"
-                  : "text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-primary)]"
-              } disabled:opacity-50`}
-            >
-              Ollama
-            </button>
-            <button
-              onClick={(e) => { e.stopPropagation(); handleAuthModeChange("lit_llm"); }}
-              disabled={!isStopped}
-              className={`px-2 py-0.5 rounded transition-colors ${
-                project.auth_mode === "lit_llm"
-                  ? "bg-[var(--accent)] text-white"
-                  : "text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-primary)]"
-              } disabled:opacity-50`}
-            >
-              LiteLLM
-            </button>
+              <option value="anthropic">Anthropic</option>
+              <option value="bedrock">Bedrock</option>
+              <option value="ollama">Ollama</option>
+              <option value="lit_llm">LiteLLM</option>
+            </select>
           </div>
 
           {/* Action buttons */}
@@ -836,20 +804,17 @@ export default function ProjectCard({ project }: Props) {
                     {/* Sub-method selector */}
                     <div className="flex items-center gap-1 text-xs">
                       <span className="text-[var(--text-secondary)] mr-1">Method:</span>
-                      {(["static_credentials", "profile", "bearer_token"] as BedrockAuthMethod[]).map((m) => (
-                        <button
-                          key={m}
-                          onClick={() => updateBedrockConfig({ auth_method: m })}
-                          disabled={!isStopped}
-                          className={`px-2 py-0.5 rounded transition-colors ${
-                            bc.auth_method === m
-                              ? "bg-[var(--accent)] text-white"
-                              : "text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-primary)]"
-                          } disabled:opacity-50`}
-                        >
-                          {m === "static_credentials" ? "Keys" : m === "profile" ? "Profile" : "Token"}
-                        </button>
-                      ))}
+                      <select
+                        value={bc.auth_method}
+                        onChange={(e) => updateBedrockConfig({ auth_method: e.target.value as BedrockAuthMethod })}
+                        onClick={(e) => e.stopPropagation()}
+                        disabled={!isStopped}
+                        className="px-2 py-0.5 rounded bg-[var(--bg-primary)] border border-[var(--border-color)] text-xs text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)] disabled:opacity-50"
+                      >
+                        <option value="static_credentials">Keys</option>
+                        <option value="profile">Profile</option>
+                        <option value="bearer_token">Token</option>
+                      </select>
                     </div>
 
                     {/* AWS Region (always shown) */}