From 63d31825ff363cd938e1d845003de4d39f0ae28d Mon Sep 17 00:00:00 2001
From: Abhishek S Lal <abhishek@usebruno.com>
Date: Mon, 29 Dec 2025 19:29:53 +0530
Subject: [PATCH] fix: update dropdown item text color to use theme text color
 for consistency; enhance ExampleItem dropdown behavior with fixed positioning
 (#6543)

---
 .../bruno-app/src/components/ApiSpecPanel/StyledWrapper.js    | 2 +-
 .../Collection/CollectionItem/ExampleItem/index.js            | 4 ++++
 .../Collections/Collection/CollectionItem/StyledWrapper.js    | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/bruno-app/src/components/ApiSpecPanel/StyledWrapper.js b/packages/bruno-app/src/components/ApiSpecPanel/StyledWrapper.js
index f50e7b5fc..f50f0e054 100644
--- a/packages/bruno-app/src/components/ApiSpecPanel/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ApiSpecPanel/StyledWrapper.js
@@ -7,7 +7,7 @@ const StyledWrapper = styled.div`
   }
 
   div.dropdown-item.menu-item {
-    color: ${(props) => props.theme.colors.danger};
+    color: ${(props) => props.theme.colors.text.danger};
     &:hover {
       background-color: ${(props) => props.theme.colors.bg.danger};
       color: white;
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js
index f7a23b0d9..bae6621e2 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js
@@ -19,8 +19,10 @@ import DeleteResponseExampleModal from './DeleteResponseExampleModal';
 import GenerateCodeItem from '../GenerateCodeItem';
 import toast from 'react-hot-toast';
 import StyledWrapper from './StyledWrapper';
+import { useSidebarAccordion } from 'components/Sidebar/SidebarAccordionContext';
 
 const ExampleItem = ({ example, item, collection }) => {
+  const { dropdownContainerRef } = useSidebarAccordion();
   const dispatch = useDispatch();
   // Check if this example is the active tab
   const activeTabUid = useSelector((state) => state.tabs?.activeTabUid);
@@ -206,6 +208,8 @@ const ExampleItem = ({ example, item, collection }) => {
           ref={menuDropdownRef}
           items={buildMenuItems()}
           placement="bottom-start"
+          appendTo={dropdownContainerRef?.current || document.body}
+          popperOptions={{ strategy: 'fixed' }}
           data-testid="response-example-menu"
         >
           <IconDots size={22} data-testid="response-example-menu-icon" />
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js
index cd1846d0c..8018fb1e1 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js
@@ -149,7 +149,7 @@ const Wrapper = styled.div`
     }
 
     div.dropdown-item.delete-item {
-      color: ${(props) => props.theme.colors.danger};
+      color: ${(props) => props.theme.colors.text.danger};
       &:hover {
         background-color: ${(props) => props.theme.colors.bg.danger} !important;
         color: white;