fix: files page web url missing #2409 (#2420)

Co-authored-by: Ahtesham Quraish <ahtesham.quraish@A006-01455.local>

src/files-and-videos/files-page/FileInfoModalSidebar.jsx

@@ -7,7 +7,6 @@ import {
   IconButton,
   ActionRow,
   Icon,
-  Truncate,
   IconButtonWithTooltip,
   CheckboxControl,
 } from '@openedx/paragon';
@@ -15,6 +14,7 @@ import { ContentCopy, InfoOutline } from '@openedx/paragon/icons';
 
 import { getFileSizeToClosestByte } from '../../utils';
 import messages from './messages';
+import './FileInfoModalSidebar.scss';
 
 const FileInfoModalSidebar = ({
   asset,
@@ -28,7 +28,6 @@ const FileInfoModalSidebar = ({
     handleLockedAsset(asset?.id, locked);
   };
   const fileSize = getFileSizeToClosestByte(asset?.fileSize);
-
   return (
     <Stack>
       <div className="font-weight-bold">
@@ -50,10 +49,11 @@ const FileInfoModalSidebar = ({
         <FormattedMessage {...messages.studioUrlTitle} />
       </div>
       <ActionRow>
-        <div style={{ wordBreak: 'break-word' }}>
-          <Truncate.Deprecated lines={1}>
-            {asset?.portableUrl}
-          </Truncate.Deprecated>
+        <div
+          className="files-page-url-truncate"
+          style={{ wordBreak: 'break-word' }}
+        >
+          {asset?.portableUrl}
         </div>
         <ActionRow.Spacer />
         <IconButton
@@ -67,10 +67,8 @@ const FileInfoModalSidebar = ({
         <FormattedMessage {...messages.webUrlTitle} />
       </div>
       <ActionRow>
-        <div style={{ wordBreak: 'break-word' }}>
-          <Truncate lines={1}>
-            {asset?.externalUrl}
-          </Truncate>
+        <div className="files-page-url-truncate" style={{ wordBreak: 'break-word' }}>
+          {asset?.externalUrl}
         </div>
         <ActionRow.Spacer />
         <IconButton

src/files-and-videos/files-page/FileInfoModalSidebar.scss

@@ -0,0 +1,16 @@
+/* stylelint-disable value-no-vendor-prefix */
+.files-page-url-truncate {
+  max-width: 200px;
+
+  /* Firefox + others fallback (single line ellipsis) */
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  /* WebKit multiline clamp */
+  display: -webkit-box;
+  -webkit-line-clamp: 1; // adjust number of lines
+  line-clamp: 1; /* Standard property */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+/* stylelint-enable value-no-vendor-prefix */