From d7a4b5b45b6a33ea650d80e8cb5ab4d0fbc04599 Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Wed, 23 Aug 2023 15:17:26 -0400
Subject: [PATCH] fix: add word break style for long words (#574)

---
 src/files-and-uploads/FileInfo.jsx            | 22 +++++++++++++------
 src/files-and-uploads/FilesAndUploads.jsx     |  2 +-
 .../table-components/GalleryCard.jsx          |  8 ++++---
 .../table-components/ListCard.jsx             |  8 ++++---
 4 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/files-and-uploads/FileInfo.jsx b/src/files-and-uploads/FileInfo.jsx
index 59f3a11ce..a07c40851 100644
--- a/src/files-and-uploads/FileInfo.jsx
+++ b/src/files-and-uploads/FileInfo.jsx
@@ -48,7 +48,11 @@ const FileInfo = ({
     >
       <ModalDialog.Header>
         <ModalDialog.Title>
-          {asset.displayName}
+          <div style={{ wordBreak: 'break-word' }}>
+            <Truncate lines={2} className="font-weight-bold small mt-3">
+              {asset.displayName}
+            </Truncate>
+          </div>
         </ModalDialog.Title>
       </ModalDialog.Header>
       <ModalDialog.Body className="pt-0 x-small">
@@ -83,9 +87,11 @@ const FileInfo = ({
               <FormattedMessage {...messages.studioUrlTitle} />
             </div>
             <ActionRow>
-              <Truncate lines={1}>
-                {asset.portableUrl}
-              </Truncate>
+              <div style={{ wordBreak: 'break-word' }}>
+                <Truncate lines={1}>
+                  {asset.portableUrl}
+                </Truncate>
+              </div>
               <ActionRow.Spacer />
               <IconButton
                 src={ContentCopy}
@@ -98,9 +104,11 @@ const FileInfo = ({
               <FormattedMessage {...messages.webUrlTitle} />
             </div>
             <ActionRow>
-              <Truncate lines={1}>
-                {asset.externalUrl}
-              </Truncate>
+              <div style={{ wordBreak: 'break-word' }}>
+                <Truncate lines={1}>
+                  {asset.externalUrl}
+                </Truncate>
+              </div>
               <ActionRow.Spacer />
               <IconButton
                 src={ContentCopy}
diff --git a/src/files-and-uploads/FilesAndUploads.jsx b/src/files-and-uploads/FilesAndUploads.jsx
index e7494ec0b..ec042593c 100644
--- a/src/files-and-uploads/FilesAndUploads.jsx
+++ b/src/files-and-uploads/FilesAndUploads.jsx
@@ -245,7 +245,7 @@ const FilesAndUploads = ({
               }}
             />
           ) : (
-            <div data-testid="files-data-table">
+            <div data-testid="files-data-table" className="mr-4 ml-3">
               <DataTable.TableControlBar />
               { currentView === 'card' && <CardView CardComponent={fileCard} columnSizes={columnSizes} selectionPlacement="left" skeletonCardCount={6} /> }
               { currentView === 'list' && <CardView CardComponent={fileCard} columnSizes={{ xs: 12 }} selectionPlacement="left" skeletonCardCount={4} /> }
diff --git a/src/files-and-uploads/table-components/GalleryCard.jsx b/src/files-and-uploads/table-components/GalleryCard.jsx
index dde7c2f86..57cd1c277 100644
--- a/src/files-and-uploads/table-components/GalleryCard.jsx
+++ b/src/files-and-uploads/table-components/GalleryCard.jsx
@@ -61,9 +61,11 @@ const GalleryCard = ({
               </div>
             )}
           </div>
-          <Truncate lines={1} className="font-weight-bold small mt-3">
-            {original.displayName}
-          </Truncate>
+          <div style={{ wordBreak: 'break-word' }}>
+            <Truncate lines={1} className="font-weight-bold small mt-3">
+              {original.displayName}
+            </Truncate>
+          </div>
         </Card.Section>
         <Card.Footer>
           <Chip>
diff --git a/src/files-and-uploads/table-components/ListCard.jsx b/src/files-and-uploads/table-components/ListCard.jsx
index 5f987f76d..495741a2a 100644
--- a/src/files-and-uploads/table-components/ListCard.jsx
+++ b/src/files-and-uploads/table-components/ListCard.jsx
@@ -50,9 +50,11 @@ const ListCard = ({
         </div>
         <Card.Body>
           <Card.Section>
-            <Truncate lines={1} className="font-weight-bold small mt-3">
-              {original.displayName}
-            </Truncate>
+            <div style={{ wordBreak: 'break-word' }}>
+              <Truncate lines={1} className="font-weight-bold small mt-3">
+                {original.displayName}
+              </Truncate>
+            </div>
             <Chip className="mt-3">
               {original.wrapperType}
             </Chip>