feat: :lipstick: more ui improvements

1 files changed, 6 insertions, 2 deletions

diff --git a/extension/react-app/src/components/HeaderButtonWithText.tsx b/extension/react-app/src/components/HeaderButtonWithText.tsx
index ca359250..84e6118c 100644
--- a/extension/react-app/src/components/HeaderButtonWithText.tsx
+++ b/extension/react-app/src/components/HeaderButtonWithText.tsx
@@ -13,7 +13,10 @@ interface HeaderButtonWithTextProps {
   onKeyDown?: (e: any) => void;
 }
 
-const HeaderButtonWithText = (props: HeaderButtonWithTextProps) => {
+const HeaderButtonWithText = React.forwardRef<
+  HTMLButtonElement,
+  HeaderButtonWithTextProps
+>((props: HeaderButtonWithTextProps, ref) => {
   const [hover, setHover] = useState(false);
 
   const tooltipPortalDiv = document.getElementById("tooltip-portal-div");
@@ -35,6 +38,7 @@ const HeaderButtonWithText = (props: HeaderButtonWithTextProps) => {
         onClick={props.onClick}
         onKeyDown={props.onKeyDown}
         className={props.className}
+        ref={ref}
       >
         {props.children}
       </HeaderButton>
@@ -47,6 +51,6 @@ const HeaderButtonWithText = (props: HeaderButtonWithTextProps) => {
         )}
     </>
   );
-};
+});
 
 export default HeaderButtonWithText;