feat: operation name is now ellipsed

frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx

@@ -7,7 +7,6 @@ import { ITraceTree } from 'types/api/trace/getTraceItem';
 import ErrorTag from './ErrorTag';
 import {
 	CardContainer,
-	// CustomSpace,
 	CustomSubText,
 	CustomSubTitle,
 	CustomText,
@@ -32,7 +31,7 @@ function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
 	return (
 		<CardContainer>
 			<StyledSpace
-				styledclass={[styles.selectedSpanDetailsContainer]}
+				styledclass={[styles.selectedSpanDetailsContainer, styles.overflow]}
 				direction="vertical"
 				style={{ marginLeft: '0.5rem' }}
 			>

frontend/src/container/TraceDetail/SelectedSpanDetails/styles.ts

@@ -17,7 +17,6 @@ export const CustomText = styled(Paragraph)`
 
 export const CustomSubTitle = styled(Title)`
 	&&& {
-		/* color: #bdbdbd; */
 		font-size: 14px;
 		margin-bottom: 8px;
 	}
@@ -71,9 +70,21 @@ const selectedSpanDetailsContainer = css`
 const spanEventsTabsContainer = css`
 	margin-top: 1rem;
 `;
+
+const overflow = css`
+	width: 95%;
+
+	> div.ant-space-item:nth-child(4) {
+		overflow-x: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+`;
+
 export const styles = {
 	removeMargin,
 	removePadding,
 	selectedSpanDetailsContainer,
 	spanEventsTabsContainer,
+	overflow,
 };