Enhance UrlDisplay component with improved styling for responsive text and link handling

src/components/Dashboard/common/UrlDisplay.jsx

@@ -10,19 +10,30 @@ const UrlDisplay = ({ url, showCopy = true, showLink = false }) => {
 
   return (
     <>
-      <Flex>
+      <Flex style={{ minWidth: 0 }}>
         {showLink ? (
           <Link
             href={url}
             target='_blank'
             rel='noopener noreferrer'
-            style={{ marginRight: 8 }}
+            style={{
+              marginRight: 8,
+              minWidth: 0,
+              flex: 1,
+              overflow: 'hidden',
+              width: 0
+            }}
           >
-            <Text ellipsis>{url}</Text>
+            <Text ellipsis style={{ display: 'block' }}>
+              {url}
+            </Text>
           </Link>
         ) : (
           <>
-            <Text style={{ marginRight: 8 }} ellipsis>
+            <Text
+              style={{ marginRight: 8, minWidth: 0, flex: 1, width: 0 }}
+              ellipsis
+            >
               {url}
             </Text>
             <Tooltip title='Open URL' arrow={false}>
@@ -30,7 +41,7 @@ const UrlDisplay = ({ url, showCopy = true, showLink = false }) => {
                 icon={<LinkIcon />}
                 type='text'
                 size='small'
-                style={{ minWidth: 25 }}
+                style={{ minWidth: 25, flexShrink: 0 }}
                 onClick={(e) => {
                   e.preventDefault()
                   window.open(url, '_blank', 'noopener,noreferrer')