From 6ab6e5ed5779a2d8bdb3289ca354d5131a025729 Mon Sep 17 00:00:00 2001
From: Bijin A B <bijin@usebruno.com>
Date: Tue, 14 Oct 2025 12:05:48 +0530
Subject: [PATCH] fix(ui): limit dropdown width to 650px and fix alignment
 (#5781)

---
 .../Environments/EnvironmentSelector/StyledWrapper.js         | 3 ++-
 .../src/components/Environments/EnvironmentSelector/index.js  | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
index 27320f11c..3f8fa7490 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
@@ -23,6 +23,7 @@ const Wrapper = styled.div`
     .env-text {
       color: ${(props) => props.theme.dropdown.selectedColor};
       font-size: 0.875rem;
+      display: block;
     }
 
     .env-separator {
@@ -47,7 +48,7 @@ const Wrapper = styled.div`
   .tippy-box {
     width: ${(props) => props.width}px;
     min-width: 12rem;
-    max-width: 35vw !important;
+    max-width: 650px !important;
     min-height: 15.5rem;
     max-height: 75vh;
     font-size: 0.8125rem;
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
index 7a2e34b4c..1e74bb7d4 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
@@ -143,7 +143,7 @@ const EnvironmentSelector = ({ collection }) => {
                 delayShow={1000}
                 hidden={activeCollectionEnvironment.name?.length < 7}
               >
-                <span className="env-text max-w-24 truncate overflow-hidden inline-block">{activeCollectionEnvironment.name}</span>
+                <span className="env-text max-w-24 truncate overflow-hidden">{activeCollectionEnvironment.name}</span>
               </ToolHint>
             </div>
             {activeGlobalEnvironment && <span className="env-separator">|</span>}
@@ -159,7 +159,7 @@ const EnvironmentSelector = ({ collection }) => {
               delayShow={1000}
               hidden={activeGlobalEnvironment.name?.length < 7}
             >
-              <span className="env-text max-w-24 truncate overflow-hidden inline-block">{activeGlobalEnvironment.name}</span>
+              <span className="env-text max-w-24 truncate overflow-hidden">{activeGlobalEnvironment.name}</span>
             </ToolHint>
           </div>
         )}