From abe265ac71e1b4a8d3a49d294da8b55f12381469 Mon Sep 17 00:00:00 2001
From: ethanova <ethanova@users.noreply.github.com>
Date: Tue, 20 May 2025 11:54:47 -0400
Subject: [PATCH] make the model selector popup responsive and wider for bigger
 screens (#5025)

* make the model selector popup responsive and wider for bigger screens

* fix linting issue

* use vscode config files to recommend prettier plugin and use it to auto format on save

---------

Co-authored-by: Ethan Garber <ethancgarber@gmail.com>
---
 .gitignore                             | 1 -
 .vscode/extensions.json                | 5 +++++
 .vscode/settings.json                  | 4 ++++
 web/containers/ModelDropdown/index.tsx | 4 ++--
 4 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 .vscode/extensions.json
 create mode 100644 .vscode/settings.json

diff --git a/.gitignore b/.gitignore
index bbf7c059f..ad0612fba 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,3 @@
-.vscode
 .idea
 .env
 .idea
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 000000000..0f148de5e
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "esbenp.prettier-vscode"
+    ]
+}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..9bf4d12b5
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true
+}
diff --git a/web/containers/ModelDropdown/index.tsx b/web/containers/ModelDropdown/index.tsx
index daef58e16..f7224bd8a 100644
--- a/web/containers/ModelDropdown/index.tsx
+++ b/web/containers/ModelDropdown/index.tsx
@@ -359,7 +359,7 @@ const ModelDropdown = ({
         className={twMerge(
           'absolute right-0 z-20 mt-2 max-h-80 w-full overflow-hidden rounded-lg border border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))] shadow-sm',
           open ? 'flex' : 'hidden',
-          chatInputMode && 'bottom-8 left-0 w-72'
+          chatInputMode && 'bottom-8 left-0 md:w-72 lg:w-96'
         )}
         ref={setDropdownOptions}
       >
@@ -585,7 +585,7 @@ const ModelDropdown = ({
                                     <div className="flex gap-x-2">
                                       <p
                                         className={twMerge(
-                                          'max-w-[200px] overflow-hidden truncate whitespace-nowrap',
+                                          'overflow-hidden truncate whitespace-nowrap md:max-w-[200px] lg:max-w-[300px]',
                                           !isDownloaded &&
                                             'text-[hsla(var(--text-secondary))]'
                                         )}