diff --git a/packages/bruno-app/src/components/ResponsePane/ResponsePaneActions/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/ResponsePaneActions/StyledWrapper.js index 076fd66fd..a2a6cd219 100644 --- a/packages/bruno-app/src/components/ResponsePane/ResponsePaneActions/StyledWrapper.js +++ b/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; } diff --git a/packages/bruno-app/src/components/ResponsePane/index.js b/packages/bruno-app/src/components/ResponsePane/index.js index 1e4e3b443..2459d82f9 100644 --- a/packages/bruno-app/src/components/ResponsePane/index.js +++ b/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} />
{ @@ -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 (
@@ -212,7 +226,7 @@ const ResponsiveTabs = ({
{rightContent && ( -
+
{rightContent}
)} diff --git a/tests/request/copy-request/keyboard-shortcuts.spec.ts b/tests/request/copy-request/keyboard-shortcuts.spec.ts index 9a3f20ed7..4386a3127 100644 --- a/tests/request/copy-request/keyboard-shortcuts.spec.ts +++ b/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');