diff --git a/.changeset/fifty-foxes-brake.md b/.changeset/fifty-foxes-brake.md new file mode 100644 index 0000000000..f25b9de3e6 --- /dev/null +++ b/.changeset/fifty-foxes-brake.md @@ -0,0 +1,5 @@ +--- +"claude-dev": patch +--- + +Fix tooltip css layer bug diff --git a/webview-ui/src/components/chat/ChatTextArea.tsx b/webview-ui/src/components/chat/ChatTextArea.tsx index 11bc35f00f..b8fe14e18b 100644 --- a/webview-ui/src/components/chat/ChatTextArea.tsx +++ b/webview-ui/src/components/chat/ChatTextArea.tsx @@ -1132,6 +1132,7 @@ const ChatTextArea = forwardRef( diff --git a/webview-ui/src/components/common/Tooltip.tsx b/webview-ui/src/components/common/Tooltip.tsx index 595711fdff..19d3e6b255 100644 --- a/webview-ui/src/components/common/Tooltip.tsx +++ b/webview-ui/src/components/common/Tooltip.tsx @@ -13,10 +13,11 @@ interface TooltipProps { hintText: string tipText: string children: React.ReactNode + style?: React.CSSProperties } // add styled component for tooltip -const TooltipBody = styled.div` +const TooltipBody = styled.div>` position: absolute; background-color: ${getAsVar(VSC_SIDEBAR_BACKGROUND)}; color: ${getAsVar(VSC_DESCRIPTION_FOREGROUND)}; @@ -24,7 +25,7 @@ const TooltipBody = styled.div` border-radius: 5px; bottom: 100%; left: -180%; - z-index: 10; + z-index: ${(props) => props.style?.zIndex ?? 10}; white-space: wrap; max-width: 200px; border: 1px solid ${getAsVar(VSC_INPUT_BORDER)}; @@ -39,12 +40,12 @@ const Hint = styled.div` margin-top: 2px; ` -const Tooltip: React.FC = ({ visible, tipText, hintText, children }) => { +const Tooltip: React.FC = ({ visible, tipText, hintText, children, style }) => { return (
{children} {visible && ( - + {tipText} {hintText && {hintText}}