Merge pull request #5778 from bijin-bruno/fix/environment-names-visibility

fix: make environment name width flexible up to 35% and disable tooltip for short names

packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js

@@ -36,8 +36,9 @@ const EnvironmentListContent = ({
                     className={`dropdown-item ${env.uid === activeEnvironmentUid ? 'active' : ''}`}
                     onClick={() => onEnvironmentSelect(env)}
                     data-tooltip-content={env.name}
+                    data-tooltip-hidden={env.name?.length < 90}
                   >
-                    <span className="max-w-32 truncate no-wrap">{env.name}</span>
+                    <span className="max-w-100% truncate no-wrap">{env.name}</span>
                   </div>
                 ))}
               </div>

packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js

@@ -45,8 +45,10 @@ const Wrapper = styled.div`
   }
 
   .tippy-box {
-    min-width: 11.875rem;
-    min-height: 15.0625rem;
+    width: ${(props) => props.width}px;
+    min-width: 12rem;
+    max-width: 35vw !important;
+    min-height: 15.5rem;
     max-height: 75vh;
     font-size: 0.8125rem;
     position: relative;

packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, forwardRef } from 'react';
+import React, { useMemo, useState, useRef, forwardRef } from 'react';
 import find from 'lodash/find';
 import Dropdown from 'components/Dropdown';
 import { IconWorld, IconDatabase, IconCaretDown, IconSettings, IconPlus, IconDownload } from '@tabler/icons';
@@ -114,6 +114,18 @@ const EnvironmentSelector = ({ collection }) => {
     dispatch(updateEnvironmentSettingsModalVisibility(false));
   };
 
+  // Calculate dropdown width based on the longest environment name.
+  // To prevent resizing while switching between collection and global environments.
+  const dropdownWidth = useMemo(() => {
+    const allEnvironments = [...environments, ...globalEnvironments];
+    if (allEnvironments.length === 0) return 0;
+
+    const maxCharLength = Math.max(...allEnvironments.map((env) => env.name?.length || 0));
+    // 8 pixels per character: This is a rough estimate for the average character width in most fonts
+    // (monospace fonts are typically 8-10px, proportional fonts vary but 8px is a safe average)
+    return maxCharLength * 8;
+  }, [environments, globalEnvironments]);
+
   // Create icon component for dropdown trigger
   const Icon = forwardRef((props, ref) => {
     const hasAnyEnv = activeGlobalEnvironment || activeCollectionEnvironment;
@@ -129,6 +141,7 @@ const EnvironmentSelector = ({ collection }) => {
                 toolhintId={`collection-env-${activeCollectionEnvironment.uid}`}
                 place="bottom-start"
                 delayShow={1000}
+                hidden={activeCollectionEnvironment.name?.length < 7}
               >
                 <span className="env-text max-w-24 truncate overflow-hidden inline-block">{activeCollectionEnvironment.name}</span>
               </ToolHint>
@@ -144,6 +157,7 @@ const EnvironmentSelector = ({ collection }) => {
               toolhintId={`global-env-${activeGlobalEnvironment.uid}`}
               place="bottom-start"
               delayShow={1000}
+              hidden={activeGlobalEnvironment.name?.length < 7}
             >
               <span className="env-text max-w-24 truncate overflow-hidden inline-block">{activeGlobalEnvironment.name}</span>
             </ToolHint>
@@ -169,11 +183,11 @@ const EnvironmentSelector = ({ collection }) => {
   });
 
   return (
-    <StyledWrapper>
+    <StyledWrapper width={dropdownWidth}>
       <div className="environment-selector flex align-center cursor-pointer">
         <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
           {/* Tab Headers */}
-          <div className="tab-header flex justify-center p-[0.75rem]">
+          <div className="tab-header flex p-[0.75rem]">
             {tabs.map((tab) => (
               <button
                 key={tab.id}

packages/bruno-app/src/components/ToolHint/index.js

@@ -10,6 +10,7 @@ const ToolHint = ({
   children,
   tooltipStyle = {},
   place = 'top',
+  hidden = false,
   offset,
   positionStrategy,
   theme = null,
@@ -47,6 +48,7 @@ const ToolHint = ({
           className="toolhint"
           offset={offset}
           place={place}
+          hidden={hidden}
           positionStrategy={positionStrategy}
           noArrow={true}
           delayShow={delayShow}