fix(composer): auto-size model select to selected model label

Author: Dimillian

src/features/composer/components/ComposerMetaBar.tsx

@@ -44,6 +44,13 @@ export function ComposerMetaBar({
   onSelectCodexArgsOverride,
   contextUsage = null,
 }: ComposerMetaBarProps) {
+  const selectedModel =
+    models.find((model) => model.id === selectedModelId) ?? null;
+  const selectedModelLabel =
+    selectedModel?.displayName || selectedModel?.model || "No models";
+  const modelSelectStyle = {
+    "--composer-model-select-width": `${Math.max(selectedModelLabel.length + 2, 8)}ch`,
+  } as CSSProperties;
   const contextWindow = contextUsage?.modelContextWindow ?? null;
   const lastTokens = contextUsage?.last.totalTokens ?? 0;
   const totalTokens = contextUsage?.total.totalTokens ?? 0;
@@ -171,6 +178,7 @@ export function ComposerMetaBar({
             value={selectedModelId ?? ""}
             onChange={(event) => onSelectModel(event.target.value)}
             disabled={disabled}
+            style={modelSelectStyle}
           >
             {models.length === 0 && <option value="">No models</option>}
             {models.map((model) => (

src/styles/composer.css

@@ -841,8 +841,8 @@
 }
 
 .composer-select--model {
-  width: 110px;
-  max-width: 110px;
+  width: var(--composer-model-select-width, auto);
+  max-width: none;
 }
 
 .composer-select--collab {