From 0f7c8de882dcf257662a8a376612c1d3600b6282 Mon Sep 17 00:00:00 2001
From: Ahtesham Quraish <ahtesham-quraish@users.noreply.github.com>
Date: Mon, 8 Sep 2025 21:33:19 +0500
Subject: [PATCH] fix: files page web url missing #2409 (#2420)

Co-authored-by: Ahtesham Quraish <ahtesham.quraish@A006-01455.local>
---
 .../files-page/FileInfoModalSidebar.jsx        | 18 ++++++++----------
 .../files-page/FileInfoModalSidebar.scss       | 16 ++++++++++++++++
 2 files changed, 24 insertions(+), 10 deletions(-)
 create mode 100644 src/files-and-videos/files-page/FileInfoModalSidebar.scss

diff --git a/src/files-and-videos/files-page/FileInfoModalSidebar.jsx b/src/files-and-videos/files-page/FileInfoModalSidebar.jsx
index 9ba44ccb7..4c0062bce 100644
--- a/src/files-and-videos/files-page/FileInfoModalSidebar.jsx
+++ b/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
diff --git a/src/files-and-videos/files-page/FileInfoModalSidebar.scss b/src/files-and-videos/files-page/FileInfoModalSidebar.scss
new file mode 100644
index 000000000..b43c4b167
--- /dev/null
+++ b/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 */
\ No newline at end of file