fix: add word break style for long words (openedx#574)

Author: KristinAoki

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}

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} /> }

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>

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>