GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-01 06:31:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: handle overflow for attribute tooltips in trace details page (#5313)

Browse Source
This commit is contained in:
Yunus M 2024-06-22 15:41:42 +05:30 committed by GitHub
parent 8ff392bc96
commit 8cd60b5c60
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 45 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/container/TraceDetail/SelectedSpanDetails/Tags/Tag.tsx
View File

@ -1,3 +1,5 @@
import './Tags.styles.scss';
import { Tooltip } from 'antd'; import { Tooltip } from 'antd';
import { useIsDarkMode } from 'hooks/useDarkMode'; import { useIsDarkMode } from 'hooks/useDarkMode';
import { Fragment, useMemo } from 'react'; import { Fragment, useMemo } from 'react';
@ -26,7 +28,12 @@ function Tag({ tags, onToggleHandler, setText }: TagProps): JSX.Element {
<Container> <Container>
<CustomSubTitle>{tags.key}</CustomSubTitle> <CustomSubTitle>{tags.key}</CustomSubTitle>
<SubTextContainer isDarkMode={isDarkMode}> <SubTextContainer isDarkMode={isDarkMode}>
<Tooltip overlay={(): string => value}> <Tooltip
overlayClassName="tagTooltip"
placement="left"
autoAdjustOverflow
title={value}
>
<CustomSubText <CustomSubText
ellipsis={{ ellipsis={{
rows: isEllipsed ? 2 : 0, rows: isEllipsed ? 2 : 0,

37
frontend/src/container/TraceDetail/SelectedSpanDetails/Tags/Tags.styles.scss Normal file
View File

@ -0,0 +1,37 @@
.tagTooltip {
.ant-tooltip-content {
max-height: 300px;
overflow-x: hidden;
overflow-y: auto;
padding: 8px;
background-color: var(--bg-slate-400);
margin-bottom: 8px;
}
.ant-tooltip-inner {
box-shadow: none;
}
}
.lightMode {
.tagTooltip {
.ant-tooltip-content {
background-color: var(--bg-vanilla-300);
}
.ant-tooltip-inner {
box-shadow: none;
background-color: var(--bg-vanilla-300);
color: var(--bg-ink-200);
}
.ant-tooltip-arrow {
border-top-color: var(--bg-vanilla-300) !important;
}
&.ant-tooltip {
--antd-arrow-background-color: var(--bg-vanilla-300) !important;
}
}
}