fix: Improved logic for determining right side expandability of Response Actions (#6398)

* fix: Improved logic for determining right side expandability based on container width and provided width.

* refactor: Standardize naming for right-side expandability a

* refactor: Simplify collection interaction in keyboard shortcuts tests

* refactor: Update right-side expandability logic in ResponsiveTabs and StyledWrapper components

packages/bruno-app/src/components/ResponsePane/ResponsePaneActions/StyledWrapper.js

@@ -14,8 +14,8 @@ const StyledWrapper = styled.div`
     display: none;
   }
 
-  /* When any parent has class 'vertical-layout', show buttons and hide dropdown */
-  .vertical-layout & {
+  /* When right side is expandible, show buttons and hide dropdown */
+  .expandable & {
     .actions-dropdown {
       display: none;
     }

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

@@ -26,6 +26,9 @@ import ResponseStopWatch from 'components/ResponsePane/ResponseStopWatch';
 import WSMessagesList from './WsResponsePane/WSMessagesList';
 import ResponsiveTabs from 'ui/ResponsiveTabs';
 
+// Width threshold for expanded right-side action buttons
+const RIGHT_CONTENT_EXPANDED_WIDTH = 375;
+
 const ResponsePane = ({ item, collection }) => {
   const dispatch = useDispatch();
   const tabs = useSelector((state) => state.tabs.tabs);
@@ -246,6 +249,7 @@ const ResponsePane = ({ item, collection }) => {
           onTabSelect={selectTab}
           rightContent={rightContent}
           rightContentRef={rightContentRef}
+          rightContentExpandedWidth={RIGHT_CONTENT_EXPANDED_WIDTH}
         />
       </div>
       <section

packages/bruno-app/src/ui/ResponsiveTabs/index.js

@@ -7,6 +7,7 @@ import StyledWrapper from './StyledWrapper';
 const DROPDOWN_WIDTH = 60;
 const CALCULATION_DELAY_DEFAULT = 20;
 const CALCULATION_DELAY_EXTENDED = 150;
+const GAP_BETWEEN_LEFT_AND_RIGHT_CONTENT = 80;
 
 // Compare two tab arrays by their keys
 const areTabArraysEqual = (a, b) => {
@@ -20,10 +21,12 @@ const ResponsiveTabs = ({
   onTabSelect,
   rightContent,
   rightContentRef,
-  delayedTabs = []
+  delayedTabs = [],
+  rightContentExpandedWidth // Optional: width of the right content when expanded(used when right content's elements are collapsible)
 }) => {
   const [visibleTabs, setVisibleTabs] = useState([]);
   const [overflowTabs, setOverflowTabs] = useState([]);
+  const [rightSideExpandable, setRightSideExpandable] = useState(false);
 
   const tabsContainerRef = useRef(null);
   const tabRefsMap = useRef({});
@@ -77,7 +80,14 @@ const ResponsiveTabs = ({
     // Only update state if arrays actually changed (prevents infinite loops)
     setVisibleTabs((prev) => (areTabArraysEqual(prev, visible) ? prev : visible));
     setOverflowTabs((prev) => (areTabArraysEqual(prev, overflow) ? prev : overflow));
-  }, [tabs, activeTab, rightContentRef]);
+
+    // Only calculate expandibility if rightContentExpandedWidth is provided
+    if (rightContentExpandedWidth) {
+      const leftContentWidth = currentWidth + (overflow.length ? DROPDOWN_WIDTH : 0);
+      const expandable = containerWidth - leftContentWidth - GAP_BETWEEN_LEFT_AND_RIGHT_CONTENT > rightContentExpandedWidth;
+      setRightSideExpandable((prev) => (prev === expandable ? prev : expandable));
+    }
+  }, [tabs, activeTab, rightContentRef, rightContentExpandedWidth]);
 
   // Recalculate on tab/activeTab changes
   useEffect(() => {
@@ -89,7 +99,7 @@ const ResponsiveTabs = ({
     return () => clearTimeout(timeoutId);
   }, [calculateTabVisibility, activeTab, delayedTabs]);
 
-  // Recalculate on container resize only (not rightContent to avoid feedback loops)
+  // Recalculate on container resize only
   useEffect(() => {
     let frameId = null;
 
@@ -172,6 +182,10 @@ const ResponsiveTabs = ({
     );
   };
 
+  const rightContentClassName = classnames('flex justify-end items-center', {
+    expandable: rightSideExpandable
+  });
+
   return (
     <StyledWrapper ref={tabsContainerRef} role="tablist" className="tabs flex items-center justify-between gap-6">
       <div className="flex items-center">
@@ -212,7 +226,7 @@ const ResponsiveTabs = ({
       </div>
 
       {rightContent && (
-        <div className="flex justify-end items-center">
+        <div className={rightContentClassName}>
           {rightContent}
         </div>
       )}

tests/request/copy-request/keyboard-shortcuts.spec.ts

@@ -11,7 +11,7 @@ test.describe('Copy and Paste with Keyboard Shortcuts', () => {
     const collection = page.locator('.collection-name').filter({ hasText: 'keyboard-test' });
 
     // Create a request
-    await collection.locator('.collection-actions').hover();
+    await collection.hover();
     await collection.locator('.collection-actions .icon').click();
     await page.locator('.dropdown-item').filter({ hasText: 'New Request' }).click();
     await page.getByPlaceholder('Request Name').fill('test-request');
@@ -54,7 +54,7 @@ test.describe('Copy and Paste with Keyboard Shortcuts', () => {
     const collection = page.locator('.collection-name').filter({ hasText: 'keyboard-test' });
 
     // Create a folder
-    await collection.locator('.collection-actions').hover();
+    await collection.hover();
     await collection.locator('.collection-actions .icon').click();
     await page.locator('.dropdown-item').filter({ hasText: 'New Folder' }).click();
     await page.locator('#folder-name').fill('test-folder');