From 335d5e9655c8264fc2c5d9989751cd106affc836 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 6 Mar 2026 00:37:00 +0000
Subject: [PATCH 1/3] Fix model selector overflow on mobile by using shortName

On smaller mobile devices, long model display names (e.g. 'OpenAI GPT-OSS 120B')
push the send button off-screen. Use the shorter shortName field (e.g. 'GPT-OSS')
for the dropdown button label instead.

Fixes OpenSecretCloud/Maple#460

Co-Authored-By: marks <markskram@protonmail.com>
---
 frontend/src/components/ModelSelector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ModelSelector.tsx b/frontend/src/components/ModelSelector.tsx
index b955cb01..fbbf4176 100644
--- a/frontend/src/components/ModelSelector.tsx
+++ b/frontend/src/components/ModelSelector.tsx
@@ -227,7 +227,7 @@ export function ModelSelector({ hasImages = false }: { hasImages?: boolean }) {
     if (model === PRIMARY_MODELS.quick) return "Quick";
     if (model === PRIMARY_MODELS.powerful) return "Powerful";
     const config = MODEL_CONFIG[model];
-    return config?.displayName || model;
+    return config?.shortName || config?.displayName || model;
   };
 
   // Check if user has access to a model based on their plan

From 09bddb7a6d481697808de99852124e59d2bda216 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 6 Mar 2026 01:18:57 +0000
Subject: [PATCH 2/3] Add max-width and text truncation to model selector
 button

Constrain the model selector button to max-w-[120px] with text truncation
so it works on very small screens like iPhone 4 (320px wide).
The button text will truncate with ellipsis if it exceeds the max width.

Co-Authored-By: marks <markskram@protonmail.com>
---
 frontend/src/components/ModelSelector.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ModelSelector.tsx b/frontend/src/components/ModelSelector.tsx
index fbbf4176..3ea997ab 100644
--- a/frontend/src/components/ModelSelector.tsx
+++ b/frontend/src/components/ModelSelector.tsx
@@ -353,8 +353,8 @@ export function ModelSelector({ hasImages = false }: { hasImages?: boolean }) {
 
   // Show current category or model name in the collapsed view
   const modelDisplay = (
-    <div className="flex items-center gap-1">
-      <div className="text-sm font-medium">{getDropdownLabel()}</div>
+    <div className="flex items-center gap-1 overflow-hidden">
+      <div className="text-sm font-medium truncate">{getDropdownLabel()}</div>
     </div>
   );
 
@@ -367,7 +367,7 @@ export function ModelSelector({ hasImages = false }: { hasImages?: boolean }) {
           <Button
             variant="ghost"
             size="sm"
-            className="h-8 gap-1 px-2"
+            className="h-8 gap-1 px-2 max-w-[120px] shrink-0"
             data-testid="model-selector-button"
             aria-label={`Current model: ${MODEL_CONFIG[model]?.displayName || model}. Click to change model.`}
           >

From b5e21748e7cb599ad5a1502b95c14617bbd6c61f Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 6 Mar 2026 01:39:53 +0000
Subject: [PATCH 3/3] Revert "Add max-width and text truncation to model
 selector button"

This reverts commit 09bddb7a6d481697808de99852124e59d2bda216.
---
 frontend/src/components/ModelSelector.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ModelSelector.tsx b/frontend/src/components/ModelSelector.tsx
index 3ea997ab..fbbf4176 100644
--- a/frontend/src/components/ModelSelector.tsx
+++ b/frontend/src/components/ModelSelector.tsx
@@ -353,8 +353,8 @@ export function ModelSelector({ hasImages = false }: { hasImages?: boolean }) {
 
   // Show current category or model name in the collapsed view
   const modelDisplay = (
-    <div className="flex items-center gap-1 overflow-hidden">
-      <div className="text-sm font-medium truncate">{getDropdownLabel()}</div>
+    <div className="flex items-center gap-1">
+      <div className="text-sm font-medium">{getDropdownLabel()}</div>
     </div>
   );
 
@@ -367,7 +367,7 @@ export function ModelSelector({ hasImages = false }: { hasImages?: boolean }) {
           <Button
             variant="ghost"
             size="sm"
-            className="h-8 gap-1 px-2 max-w-[120px] shrink-0"
+            className="h-8 gap-1 px-2"
             data-testid="model-selector-button"
             aria-label={`Current model: ${MODEL_CONFIG[model]?.displayName || model}. Click to change model.`}
           >