From 05f85ecfeb7776459f84ee06d0bba9bf311a2fc6 Mon Sep 17 00:00:00 2001
From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>
Date: Sun, 19 Jan 2025 17:22:14 -0800
Subject: [PATCH] Fix menu positioning

---
 webview-ui/src/components/chat/ChatTextArea.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/webview-ui/src/components/chat/ChatTextArea.tsx b/webview-ui/src/components/chat/ChatTextArea.tsx
index 735bc5c668..4c3f978ce9 100644
--- a/webview-ui/src/components/chat/ChatTextArea.tsx
+++ b/webview-ui/src/components/chat/ChatTextArea.tsx
@@ -144,6 +144,12 @@ const ModelContainer = styled.div`
 	min-width: 0;
 `
 
+const ModelButtonWrapper = styled.div`
+	display: inline-flex; // Make it shrink to content
+	min-width: 0; // Allow shrinking
+	max-width: 100%; // Don't overflow parent
+`
+
 const ModelDisplayButton = styled.a<{ isActive?: boolean }>`
 	padding: 0px 0px;
 	height: 20px;
@@ -915,7 +921,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 						</VSCodeButton>
 
 						<ModelContainer ref={modelSelectorRef}>
-							<div ref={buttonRef} style={{ width: "100%" }}>
+							<ModelButtonWrapper ref={buttonRef}>
 								<ModelDisplayButton
 									role="button"
 									isActive={showModelSelector}
@@ -929,7 +935,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 									tabIndex={0}>
 									<ModelButtonContent>{modelDisplayName}</ModelButtonContent>
 								</ModelDisplayButton>
-							</div>
+							</ModelButtonWrapper>
 							{showModelSelector && (
 								<ModelSelectorTooltip
 									arrowPosition={arrowPosition}