diff --git a/frontend/app/components/Session_/Subheader.js b/frontend/app/components/Session_/Subheader.js
index 7a4ef9deb..7fdb149be 100644
--- a/frontend/app/components/Session_/Subheader.js
+++ b/frontend/app/components/Session_/Subheader.js
@@ -15,7 +15,7 @@ import { IFRAME } from 'App/constants/storageKeys';
 import cn from 'classnames';
 import { Switch, Button as AntButton, Popover, Tooltip } from 'antd';
 import { ShareAltOutlined } from '@ant-design/icons';
-import { checkParam } from 'App/utils';
+import { checkParam, truncateStringToFit } from 'App/utils';
 
 const localhostWarn = (project) => project + '_localhost_warn';
 const disableDevtools = 'or_devtools_uxt_toggle';
@@ -46,13 +46,10 @@ function SubHeader(props) {
     return integrations.some((i) => i.token);
   }, [props.integrations]);
 
-  const location =
-    currentLocation && currentLocation.length > 70
-      ? `${currentLocation.slice(0, 25)}...${currentLocation.slice(-40)}`
-      : currentLocation;
+  const locationTruncated = truncateStringToFit(currentLocation, window.innerWidth - 200);
 
   const showWarning =
-    location && /(localhost)|(127.0.0.1)|(0.0.0.0)/.test(location) && showWarningModal;
+    currentLocation && /(localhost)|(127.0.0.1)|(0.0.0.0)/.test(currentLocation) && showWarningModal;
   const closeWarning = () => {
     localStorage.setItem(localhostWarnKey, '1');
     setWarning(false);
@@ -116,7 +113,7 @@ function SubHeader(props) {
               showCopyLink={true}
               trigger={
                 <div className="relative">
-                  <Tooltip title='Share Session' placement='bottom'>
+                  <Tooltip title="Share Session" placement="bottom">
                     <AntButton size={'small'} className="flex items-center justify-center">
                       <ShareAltOutlined />
                     </AntButton>
@@ -141,13 +138,13 @@ function SubHeader(props) {
         )}
       </div>
 
-      {location && (
+      {locationTruncated && (
         <div className={'w-full bg-white border-b border-gray-lighter'}>
           <div className="flex w-fit items-center cursor-pointer color-gray-medium text-sm p-1">
             <Icon size="20" name="event/link" className="mr-1" />
             <Tooltip title="Open in new tab" delay={0}>
-              <a href={currentLocation} target="_blank">
-                {location}
+              <a href={currentLocation} target="_blank" className="truncate">
+                {locationTruncated}
               </a>
             </Tooltip>
           </div>
diff --git a/frontend/app/utils/index.ts b/frontend/app/utils/index.ts
index f3e76e5af..74bea02b4 100644
--- a/frontend/app/utils/index.ts
+++ b/frontend/app/utils/index.ts
@@ -488,3 +488,22 @@ export const checkParam = (paramName: string, storageKey?: string, search?: stri
 };
 
 export const isValidUrl = (url) => /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/.test(url);
+
+export function truncateStringToFit(string: string, screenWidth: number, charWidth: number = 5): string {
+  if (string.length * charWidth <= screenWidth) {
+    return string;
+  }
+
+  const ellipsis = '...';
+  const maxLen = Math.floor(screenWidth / charWidth);
+
+  if (maxLen <= ellipsis.length) {
+    return ellipsis.slice(0, maxLen);
+  }
+
+  const frontLen = Math.floor((maxLen - ellipsis.length) / 2);
+  const backLen = maxLen - ellipsis.length - frontLen;
+
+  return string.slice(0, frontLen) + ellipsis + string.slice(-backLen);
+}
+