fix(ui): fix textelipsis comp style computing loop

frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js

@@ -46,6 +46,7 @@ class EventGroupWrapper extends React.PureComponent {
     const isLocation = event.type === TYPES.LOCATION;
 
     const whiteBg = isLastInGroup && event.type !== TYPES.LOCATION || (!isLastEvent && event.type !== TYPES.LOCATION)
+    const safeRef = String(event.referrer || '');
     return (
       <div
         className={
@@ -59,7 +60,7 @@ class EventGroupWrapper extends React.PureComponent {
         { isFirst && isLocation && event.referrer &&
           <div className={ stl.referrer }>
             <TextEllipsis>
-              Referrer: <span className={stl.url}>{ event.referrer }</span>
+              Referrer: <span className={stl.url}>{safeRef}</span>
             </TextEllipsis>
           </div>
         }

frontend/app/components/ui/TextEllipsis/TextEllipsis.js

@@ -5,12 +5,12 @@ import { Popup } from 'UI';
 import styles from './textEllipsis.module.css';
 
 /** calculates text width in pixels 
-+ * by creating a hidden element with t
+ * by creating a hidden element with
-+ * ext and counting its width
+ * text and counting its width
-+ * @param text String - text string
+ * @param text String - text string
-+ * @param fontProp String - font properties
+ * @param fontProp String - font properties
-+ * @returns width number
+ * @returns width number
-+ */
+ */
 function findTextWidth(text, fontProp) {
 	const tag = document.createElement('div')
 
@@ -51,21 +51,27 @@ const TextEllipsis = ({
 	...props 
 }) => {
 	const [showPopup, setShowPopup] = useState(false)
+	const [computed, setComputed] = useState(false)
 	const textRef = useRef(null);
 
 	const textOrChildren = text || children;
 	
-	const popupId = (Math.random() + 1).toString(36).substring(7);
+	const popupId = (Math.random() + 1).toString(36).substring(2);
 
 	useEffect(() => {
-		const element = textRef.current;
+		if (computed) return;
+		if (textRef.current) {
+			const element = textRef.current;
 
-		const fontSize = window.getComputedStyle(element, null).getPropertyValue('font-size');
+			const fontSize = window.getComputedStyle(element, null).getPropertyValue('font-size');
+			
+			const textWidth = findTextWidth(element.innerText, fontSize)
+			if (textWidth > element.clientWidth) setShowPopup(true)
+			else setShowPopup(false)
+			setComputed(true)
+		}
 		
-		const textWidth = findTextWidth(element.innerText, fontSize)
+	}, [textRef.current, computed])
-		if (textWidth > element.clientWidth) setShowPopup(true)
-		else setShowPopup(false)
-	}, [textRef.current])
 
 	if (noHint || !showPopup) return (
 		<Trigger