fix: alerts tag popup vibrating (#4812)

frontend/src/components/TableRenderer/LabelColumn.tsx

@@ -1,10 +1,10 @@
 import './LabelColumn.styles.scss';
 
 import { Popover, Tag } from 'antd';
-import { popupContainer } from 'utils/selectPopupContainer';
 
 import { LabelColumnProps } from './TableRenderer.types';
 import TagWithToolTip from './TagWithToolTip';
+import { getLabelAndValueContent } from './utils';
 
 function LabelColumn({ labels, value, color }: LabelColumnProps): JSX.Element {
 	const newLabels = labels.length > 3 ? labels.slice(0, 3) : labels;
@@ -19,19 +19,17 @@ function LabelColumn({ labels, value, color }: LabelColumnProps): JSX.Element {
 			)}
 			{remainingLabels.length > 0 && (
 				<Popover
-					getPopupContainer={popupContainer}
 					placement="bottomRight"
 					showArrow={false}
 					content={
 						<div>
 							{labels.map(
 								(label: string): JSX.Element => (
-									<TagWithToolTip
-										key={label}
-										label={label}
-										color={color}
-										value={value}
-									/>
+									<div key={label}>
+										<Tag className="label-column--tag" color={color}>
+											{getLabelAndValueContent(label, value && value[label])}
+										</Tag>
+									</div>
 								),
 							)}
 						</div>

frontend/src/components/TableRenderer/utils.ts

@@ -38,6 +38,16 @@ export const getLabelRenderingValue = (
 	return label;
 };
 
+export const getLabelAndValueContent = (
+	label: string,
+	value?: string,
+): string => {
+	if (value) {
+		return `${label}: ${value}`;
+	}
+	return `${label}`;
+};
+
 interface GeneratorResizeTableColumnsProp<T> {
 	baseColumnOptions: ColumnsType<T>;
 	dynamicColumnOption: { key: string; columnOption: ColumnType<T> }[];