diff --git a/frontend/src/components/dialog/change-repo-password-dialog.js b/frontend/src/components/dialog/change-repo-password-dialog.js
index bfd03fe655..1c297b158d 100644
--- a/frontend/src/components/dialog/change-repo-password-dialog.js
+++ b/frontend/src/components/dialog/change-repo-password-dialog.js
@@ -95,12 +95,13 @@ class ChangeRepoPasswordDialog extends React.Component {
   render() {
     const { repoName, toggleDialog } = this.props;
 
+    let title = gettext('Change Password of Library {placeholder}');
+    title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName) + '</span>');
+
     return (
       <Modal isOpen={true} style={{height: 'auto'}} toggle={toggleDialog}>
         <ModalHeader toggle={toggleDialog}>
-          <span>
-            {Utils.generateDialogTitle(gettext('Change Password of Library {placeholder}'), repoName)}
-          </span>
+          <span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
         </ModalHeader>
         <ModalBody>
           <form id="repo-change-passwd-form" action="" method="post">
diff --git a/frontend/src/components/dialog/commit-details.js b/frontend/src/components/dialog/commit-details.js
index e58684c946..d050d4675a 100644
--- a/frontend/src/components/dialog/commit-details.js
+++ b/frontend/src/components/dialog/commit-details.js
@@ -91,7 +91,7 @@ class Content extends React.Component {
               <ul>
                 {
                   data[item.type].map((item, index) => {
-                    return <li key={index} dangerouslySetInnerHTML={{__html: item}} className="commit-detail-item"></li>;
+                    return <li key={index} dangerouslySetInnerHTML={{__html: item}} className="commit-detail-item text-truncate"></li>;
                   })
                 }
               </ul>
diff --git a/frontend/src/components/dialog/copy-dirent-dialog.js b/frontend/src/components/dialog/copy-dirent-dialog.js
index d0a4313cc7..b56f406a5a 100644
--- a/frontend/src/components/dialog/copy-dirent-dialog.js
+++ b/frontend/src/components/dialog/copy-dirent-dialog.js
@@ -140,14 +140,17 @@ class CopyDirent extends React.Component {
   render() {
     let title = gettext('Copy {placeholder} to');
     if (!this.props.isMutipleOperation) {
-      title = title.replace('{placeholder}', '<span class="op-target">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
+      title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
     } else {
       title = gettext('Copy selected item(s) to:');
     }
     let mode = 'current_repo_and_other_repos';
+    const { isMutipleOperation } = this.props;
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}><div dangerouslySetInnerHTML={{__html: title}}></div></ModalHeader>
+        <ModalHeader toggle={this.toggle}>
+          {isMutipleOperation ? title : <div dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></div>}
+        </ModalHeader>
         <ModalBody>
           <FileChooser
             repoID={this.props.repoID}
diff --git a/frontend/src/components/dialog/lib-history-setting-dialog.js b/frontend/src/components/dialog/lib-history-setting-dialog.js
index 2ae9a5b026..deed42201c 100644
--- a/frontend/src/components/dialog/lib-history-setting-dialog.js
+++ b/frontend/src/components/dialog/lib-history-setting-dialog.js
@@ -108,12 +108,13 @@ class LibHistorySetting extends React.Component {
   };
 
   render() {
-    const itemName = this.props.itemName;
+    const { itemName: repoName } = this.props;
+    let title = gettext('{placeholder} History Setting');
+    title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName) + '</span>');
     return (
       <Modal isOpen={true} toggle={this.props.toggleDialog}>
         <ModalHeader toggle={this.props.toggleDialog}>
-          <span className="op-target" title={itemName}>{itemName}</span>{' '}
-          {gettext('History Setting')}
+          <span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
         </ModalHeader>
         <ModalBody>
           <Form>
diff --git a/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js b/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js
index 8e5e714037..45a3bc5724 100644
--- a/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js
+++ b/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js
@@ -66,11 +66,13 @@ class LibSubFolderPermissionDialog extends React.Component {
 
   render() {
     const { repoName, folderName } = this.props;
+    let title = repoName ? gettext('{placeholder} Folder Permission') : gettext('Set permission of {placeholder}');
+    title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName || folderName) + '</span>');
     return (
       <div>
         <Modal isOpen={true} style={{maxWidth: '980px'}} className="share-dialog" toggle={this.props.toggleDialog}>
           <ModalHeader toggle={this.props.toggleDialog}>
-            <span>{repoName ? Utils.generateDialogTitle(gettext('{placeholder} Folder Permission'), repoName) : Utils.generateDialogTitle(gettext('Set {placeholder}\'s permission'), folderName)}</span>
+            <span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
           </ModalHeader>
           <ModalBody className="dialog-list-container share-dialog-content" role="tablist">
             {this.renderContent()}
diff --git a/frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js b/frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js
index b47caac3d5..5f7dfa1422 100644
--- a/frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js
+++ b/frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js
@@ -90,7 +90,7 @@ const propTypes = {
   repoID: PropTypes.string.isRequired,
   isDepartmentRepo: PropTypes.bool,
   folderPath: PropTypes.string.isRequired,
-  repoName: PropTypes.string.isRequired,
+  repoName: PropTypes.string,
 };
 
 
diff --git a/frontend/src/components/dialog/move-dirent-dialog.js b/frontend/src/components/dialog/move-dirent-dialog.js
index 1cdef90d5c..8daba85f34 100644
--- a/frontend/src/components/dialog/move-dirent-dialog.js
+++ b/frontend/src/components/dialog/move-dirent-dialog.js
@@ -154,12 +154,12 @@ class MoveDirent extends React.Component {
   render() {
     let title = gettext('Move {placeholder} to');
     if (!this.props.isMutipleOperation) {
-      title = title.replace('{placeholder}', '<span class="op-target">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
+      title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
     } else {
       title = gettext('Move selected item(s) to:');
     }
     let mode = 'current_repo_and_other_repos';
-    const { dirent, selectedDirentList } = this.props;
+    const { dirent, selectedDirentList, isMutipleOperation } = this.props;
     const movedDirent = dirent ? dirent : selectedDirentList[0];
     const { permission } = movedDirent;
     const { isCustomPermission } = Utils.getUserPermission(permission);
@@ -168,7 +168,9 @@ class MoveDirent extends React.Component {
     }
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}><div dangerouslySetInnerHTML={{__html: title}}></div></ModalHeader>
+        <ModalHeader toggle={this.toggle}>
+          {isMutipleOperation ? title : <div dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></div>}
+        </ModalHeader>
         <ModalBody>
           <FileChooser
             repoID={this.props.repoID}
diff --git a/frontend/src/components/dialog/repo-api-token-dialog.js b/frontend/src/components/dialog/repo-api-token-dialog.js
index 2498b14d21..e1b68d1991 100644
--- a/frontend/src/components/dialog/repo-api-token-dialog.js
+++ b/frontend/src/components/dialog/repo-api-token-dialog.js
@@ -281,7 +281,7 @@ class RepoAPITokenDialog extends React.Component {
   render() {
     let repo = this.repo;
 
-    const itemName = '<span class="op-target">' + Utils.HTMLescape(repo.repo_name) + '</span>';
+    const itemName = '<span class="op-target text-truncate mr-1">' + Utils.HTMLescape(repo.repo_name) + '</span>';
     const title = gettext('{placeholder} API Token').replace('{placeholder}', itemName);
     return (
       <Modal
@@ -289,7 +289,7 @@ class RepoAPITokenDialog extends React.Component {
         toggle={this.props.onRepoAPITokenToggle}
       >
         <ModalHeader toggle={this.props.onRepoAPITokenToggle}>
-          <p dangerouslySetInnerHTML={{__html: title}} className="m-0"></p>
+          <span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
         </ModalHeader>
         <ModalBody>
           <div className="o-auto">
diff --git a/frontend/src/components/dialog/repo-share-admin-dialog.js b/frontend/src/components/dialog/repo-share-admin-dialog.js
index cb53b4ab92..2732d4f0d2 100644
--- a/frontend/src/components/dialog/repo-share-admin-dialog.js
+++ b/frontend/src/components/dialog/repo-share-admin-dialog.js
@@ -2,6 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
 import { gettext, canGenerateShareLink, canGenerateUploadLink } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
 import RepoShareAdminShareLinks from './repo-share-admin/share-links';
 import RepoShareAdminUploadLinks from './repo-share-admin/upload-links';
 import RepoShareAdminUserShares from './repo-share-admin/user-shares';
@@ -48,12 +49,13 @@ class RepoShareAdminDialog extends React.Component {
   render() {
     const { activeTab } = this.state;
     const { repo_name: repoName } = this.props.repo;
-
+    let title = gettext('{placeholder} Share Admin');
+    title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName) + '</span>');
     return (
       <div>
         <Modal isOpen={true} style={{maxWidth: '760px'}} className="share-dialog" toggle={this.props.toggleDialog}>
           <ModalHeader toggle={this.props.toggleDialog}>
-            <span className="op-target" title={repoName}>{repoName}</span> {gettext('Share Admin')}
+            <span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
           </ModalHeader>
           <ModalBody className="dialog-list-container share-dialog-content" role="tablist">
             <Fragment>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog.js
index 52252d4892..ef9a648a84 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog.js
@@ -106,12 +106,13 @@ class SysAdminLibHistorySettingDialog extends React.Component {
   };
 
   render() {
-    const itemName = this.props.itemName;
+    const { itemName: repoName } = this.props;
+    let title = gettext('{placeholder} History Setting');
+    title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName) + '</span>');
     return (
       <Modal isOpen={true} toggle={this.props.toggleDialog}>
         <ModalHeader toggle={this.props.toggleDialog}>
-          <span className="op-target" title={itemName}>{itemName}</span>{' '}
-          {gettext('History Setting')}
+          <span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
         </ModalHeader>
         <ModalBody>
           <Form>
diff --git a/frontend/src/components/dialog/transfer-dialog.js b/frontend/src/components/dialog/transfer-dialog.js
index 505d5c6b83..2b1787b1c8 100644
--- a/frontend/src/components/dialog/transfer-dialog.js
+++ b/frontend/src/components/dialog/transfer-dialog.js
@@ -60,15 +60,19 @@ class TransferDialog extends React.Component {
   };
 
   render() {
-    const itemName = this.props.itemName;
     let canTransferToDept = true;
     if (this.props.canTransferToDept != undefined) {
       canTransferToDept = this.props.canTransferToDept;
     }
+
+    const { itemName: repoName } = this.props;
+    let title = gettext('Transfer Library {library_name}');
+    title = title.replace('{library_name}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName) + '</span>');
+
     return (
       <Modal isOpen={true} toggle={this.props.toggleDialog}>
         <ModalHeader toggle={this.props.toggleDialog}>
-          <span>{gettext('Transfer Library {library_name}').replace('{library_name}', itemName)}</span>
+          <span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
         </ModalHeader>
         <ModalBody>
           {this.state.transferToUser ?
diff --git a/frontend/src/components/file-chooser/repo-list-item.js b/frontend/src/components/file-chooser/repo-list-item.js
index 76cc2b79ea..50877f3ea5 100644
--- a/frontend/src/components/file-chooser/repo-list-item.js
+++ b/frontend/src/components/file-chooser/repo-list-item.js
@@ -82,7 +82,7 @@ class RepoListItem extends React.Component {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
     });
-  }
+  };
 
   addResponseListToNode = (list, node) => {
     node.isLoaded = true;
diff --git a/frontend/src/components/file-view/file-info.js b/frontend/src/components/file-view/file-info.js
index 714040f939..edf3cb1982 100644
--- a/frontend/src/components/file-view/file-info.js
+++ b/frontend/src/components/file-view/file-info.js
@@ -30,9 +30,9 @@ class FileInfo extends React.PureComponent {
     const starredText = isStarred ? gettext('starred') : gettext('unstarred');
     const lockedText = gettext('locked');
     return (
-      <div>
+      <div className="text-truncate">
         <h2 className="file-title d-flex align-items-center">
-          <span className="file-name">{fileName}</span>
+          <span className="file-name text-truncate" title={fileName}>{fileName}</span>
           <a className={`file-star ${isStarred ? 'fa' : 'far'} fa-star`}
             href="#"
             title={starredText}
diff --git a/frontend/src/components/file-view/file-toolbar.js b/frontend/src/components/file-view/file-toolbar.js
index 7370c7552f..2d6fac8529 100644
--- a/frontend/src/components/file-view/file-toolbar.js
+++ b/frontend/src/components/file-view/file-toolbar.js
@@ -113,7 +113,7 @@ class FileToolbar extends React.Component {
 
     return (
       <Fragment>
-        <ButtonGroup className="d-none d-md-block">
+        <ButtonGroup className="d-none d-md-block flex-shrink-0 ml-4">
           {fileType == 'PDF' && (
             <IconButton
               id="seafile-pdf-print"
@@ -202,7 +202,7 @@ class FileToolbar extends React.Component {
           </ButtonDropdown>
         </ButtonGroup>
 
-        <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle} className="d-block d-md-none">
+        <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle} className="d-block d-md-none flex-shrink-0 ml-4">
           <ButtonGroup >
             {(canEditFile && fileType != 'SDoc' && !err) &&
                 (this.props.isSaving ?
diff --git a/frontend/src/components/history-trash-file-view/download.js b/frontend/src/components/history-trash-file-view/download.js
index 1f2c9b44d3..158ad31848 100644
--- a/frontend/src/components/history-trash-file-view/download.js
+++ b/frontend/src/components/history-trash-file-view/download.js
@@ -7,7 +7,7 @@ const {
 
 function Download() {
   return (
-    <a href={`${siteRoot}repo/${repoID}/${objID}/download/?file_name=${encodeURIComponent(fileName)}&p=${encodeURIComponent(path)}`} className="btn btn-secondary">{gettext('Download')}</a>
+    <a href={`${siteRoot}repo/${repoID}/${objID}/download/?file_name=${encodeURIComponent(fileName)}&p=${encodeURIComponent(path)}`} className="btn btn-secondary flex-shrink-0">{gettext('Download')}</a>
   );
 }
 
diff --git a/frontend/src/components/history-trash-file-view/file-view.js b/frontend/src/components/history-trash-file-view/file-view.js
index ea2e605a02..d73c7a26b7 100644
--- a/frontend/src/components/history-trash-file-view/file-view.js
+++ b/frontend/src/components/history-trash-file-view/file-view.js
@@ -26,10 +26,10 @@ class FileView extends React.Component {
 
   render() {
     return (
-      <div className="h-100 d-flex flex-column flex-1">
+      <div className="h-100 d-flex flex-column flex-1 mw-100">
         <div className="file-view-header d-flex justify-content-between align-items-center">
-          <div>
-            <h2 className="file-title">{fileName}</h2>
+          <div className="text-truncate mr-4">
+            <h2 className="file-title text-truncate" title={fileName}>{fileName}</h2>
             <p className="meta-info m-0">{fromTrash ? `${gettext('Current Path: ')}${gettext('Trash')}`: commitTime}</p>
           </div>
           {canDownloadFile && <Download />}
diff --git a/frontend/src/components/shared-file-view/shared-file-view.js b/frontend/src/components/shared-file-view/shared-file-view.js
index 4be085cf0c..e36992f59f 100644
--- a/frontend/src/components/shared-file-view/shared-file-view.js
+++ b/frontend/src/components/shared-file-view/shared-file-view.js
@@ -116,14 +116,14 @@ class SharedFileView extends React.Component {
         </div>
         <div className="shared-file-view-md-main">
           <div className={`shared-file-view-head ${(fileType == 'md' || fileType == 'pdf') ? 'w-100 px-4' : ''}`}>
-            <div className="float-left">
+            <div className="text-truncate">
               <h2 className="ellipsis" title={fileName}>{fileName}</h2>
               {zipped ?
                 <p className="m-0">{gettext('Current path: ')}{this.renderPath()}</p> :
                 <p className="share-by ellipsis">{gettext('Shared by:')}{'  '}{sharedBy}</p>
               }
             </div>
-            <div className="float-right">
+            <div className="flex-shrink-0 ml-4">
               {(canDownload && loginUser && (loginUser !== sharedBy)) &&
                 <Button color="secondary" id="save"
                   onClick={this.handleSaveSharedFileDialog}>{gettext('Save as ...')}
diff --git a/frontend/src/file-history.js b/frontend/src/file-history.js
index dafd2a7ac7..a07316724d 100644
--- a/frontend/src/file-history.js
+++ b/frontend/src/file-history.js
@@ -48,13 +48,13 @@ class FileHistory extends React.Component {
   render() {
     return (
       <div className="history-content flex-fill d-flex h-100">
-        <div className="flex-fill d-flex flex-column">
+        <div className="flex-fill d-flex flex-column text-truncate">
           <div className="history-header file-history-header flex-shrink-0">
-            <div className="title">
+            <div className="title d-flex mw-100">
               <a href="#" className="go-back" title="Back" onClick={this.onBackClick}>
                 <span className="fas fa-chevron-left"></span>
               </a>
-              <span className="name">{fileName}</span>
+              <span className="name text-truncate" title={fileName}>{fileName}</span>
             </div>
           </div>
           <MainPanel
diff --git a/frontend/src/pages/markdown-editor/header-toolbar/file-info.js b/frontend/src/pages/markdown-editor/header-toolbar/file-info.js
index cfb793c943..803d0f46b7 100644
--- a/frontend/src/pages/markdown-editor/header-toolbar/file-info.js
+++ b/frontend/src/pages/markdown-editor/header-toolbar/file-info.js
@@ -16,32 +16,30 @@ class FileInfo extends React.PureComponent {
 
     const lockedText = gettext('locked');
     return (
-      <div className="file-info-wrapper">
-        <div className="topbar-file-info">
-          <div className="file-title">
-            <span className='file-name'>{fileInfo.name}</span>
-            <span className="file-star" title={starTitle}>
-              <i className={starIconClass} onClick={this.props.toggleStar}/>
-            </span>
-            <InternalLinkOperation path={filePath} repoID={repoID} />
-            {(isPro && isLocked) && (
-              <img
-                className="file-locked-icon mx-2"
-                width="16"
-                src={`${mediaUrl}img/file-locked-32.png`}
-                alt={lockedText}
-                title={lockedText}
-                aria-label={lockedText}
-              />
-            )}
-          </div>
-          <div className="file-state">
-            <span className={'file-modifier-name'}>{fileInfo.lastModifier}</span>
-            <span className={'file-modifier-time'}>{modifyTime}</span>
-            {this.props.showDraftSaved && (
-              <span className={'file-modifier-savedraft'}>{gettext('Local draft saved')}</span>
-            )}
-          </div>
+      <div className="topbar-file-info text-truncate ml-0 mr-4">
+        <div className="file-title">
+          <span className='file-name text-truncate'>{fileInfo.name}</span>
+          <span className="file-star" title={starTitle}>
+            <i className={starIconClass} onClick={this.props.toggleStar}/>
+          </span>
+          <InternalLinkOperation path={filePath} repoID={repoID} />
+          {(isPro && isLocked) && (
+            <img
+              className="file-locked-icon mx-2"
+              width="16"
+              src={`${mediaUrl}img/file-locked-32.png`}
+              alt={lockedText}
+              title={lockedText}
+              aria-label={lockedText}
+            />
+          )}
+        </div>
+        <div className="file-state">
+          <span className={'file-modifier-name'}>{fileInfo.lastModifier}</span>
+          <span className={'file-modifier-time'}>{modifyTime}</span>
+          {this.props.showDraftSaved && (
+            <span className={'file-modifier-savedraft'}>{gettext('Local draft saved')}</span>
+          )}
         </div>
       </div>
     );
diff --git a/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js b/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js
index 219b30e767..d81c26324c 100644
--- a/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js
+++ b/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js
@@ -63,7 +63,7 @@ class HeaderToolbar extends React.Component {
     if (this.props.editorMode === 'rich') {
       return (
         <div className="sf-md-viewer-topbar">
-          <div className="sf-md-viewer-topbar-first d-flex justify-content-between">
+          <div className="sf-md-viewer-topbar-first d-flex justify-content-between mw-100">
             <FileInfo
               toggleStar={this.props.toggleStar}
               editorApi={this.props.editorApi}
diff --git a/frontend/src/repo-folder-trash.js b/frontend/src/repo-folder-trash.js
index 4ad16a23be..41ba0aa983 100644
--- a/frontend/src/repo-folder-trash.js
+++ b/frontend/src/repo-folder-trash.js
@@ -160,21 +160,21 @@ class RepoFolderTrash extends React.Component {
     const pathList = this.state.folderPath.split('/');
     return (
       <React.Fragment>
-        <a href="#" onClick={this.clickRoot}>{repoFolderName}</a>
-        <span> / </span>
+        <a href="#" onClick={this.clickRoot} className="text-truncate" title={repoFolderName}>{repoFolderName}</a>
+        <span className="mx-1">/</span>
         {pathList.map((item, index) => {
           if (index > 0 && index != pathList.length - 1) {
             return (
               <React.Fragment key={index}>
-                <a href="#" onClick={this.clickFolderPath.bind(this, pathList.slice(0, index+1).join('/'))}>{pathList[index]}</a>
-                <span> / </span>
+                <a className="text-truncate" href="#" onClick={this.clickFolderPath.bind(this, pathList.slice(0, index+1).join('/'))} title={pathList[index]}>{pathList[index]}</a>
+                <span className="mx-1">/</span>
               </React.Fragment>
             );
           }
           return null;
         }
         )}
-        {pathList[pathList.length - 1]}
+        <span className="text-truncate" title={pathList[pathList.length - 1]}>{pathList[pathList.length - 1]}</span>
       </React.Fragment>
     );
   };
@@ -182,6 +182,9 @@ class RepoFolderTrash extends React.Component {
   render() {
     const { isCleanTrashDialogOpen, showFolder } = this.state;
 
+    let title = gettext('{placeholder} Trash');
+    title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoFolderName) + '</span>');
+
     return (
       <React.Fragment>
         <div className="h-100 d-flex flex-column">
@@ -194,14 +197,14 @@ class RepoFolderTrash extends React.Component {
           <div className="flex-auto container-fluid pt-4 pb-6 o-auto">
             <div className="row">
               <div className="col-md-10 offset-md-1">
-                <h2>{Utils.generateDialogTitle(gettext('{placeholder} Trash'), repoFolderName)}</h2>
+                <h2 dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></h2>
                 <a href="#" className="go-back" title={gettext('Back')} onClick={this.goBack} role={gettext('Back')}>
                   <span className="fas fa-chevron-left"></span>
                 </a>
                 <div className="d-flex justify-content-between align-items-center op-bar">
-                  <p className="m-0">{gettext('Current path: ')}{showFolder ? this.renderFolderPath() : repoFolderName}</p>
+                  <p className="m-0 text-truncate d-flex"><span className="mr-1">{gettext('Current path: ')}</span>{showFolder ? this.renderFolderPath() : <span className="text-truncate" title={repoFolderName}>{repoFolderName}</span>}</p>
                   {(path == '/' && enableClean && !showFolder) &&
-                  <button className="btn btn-secondary clean" onClick={this.cleanTrash}>{gettext('Clean')}</button>
+                  <button className="btn btn-secondary clean flex-shrink-0 ml-4" onClick={this.cleanTrash}>{gettext('Clean')}</button>
                   }
                 </div>
                 <Content
diff --git a/frontend/src/repo-history.js b/frontend/src/repo-history.js
index b3cf8f0e54..8ba97371f2 100644
--- a/frontend/src/repo-history.js
+++ b/frontend/src/repo-history.js
@@ -93,6 +93,9 @@ class RepoHistory extends React.Component {
   };
 
   render() {
+    let title = gettext('{placeholder} Modification History');
+    title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName) + '</span>');
+
     return (
       <React.Fragment>
         <div className="h-100 d-flex flex-column">
@@ -105,7 +108,7 @@ class RepoHistory extends React.Component {
           <div className="flex-auto container-fluid pt-4 pb-6 o-auto">
             <div className="row">
               <div className="col-md-10 offset-md-1">
-                <h2>{Utils.generateDialogTitle(gettext('{placeholder} Modification History'), repoName)}</h2>
+                <h2 dangerouslySetInnerHTML={{__html: title}} className="d-flex text-nowrap"></h2>
                 <a href="#" className="go-back" title={gettext('Back')} onClick={this.goBack} role="button" aria-label={gettext('Back')}>
                   <span className="fas fa-chevron-left"></span>
                 </a>
diff --git a/frontend/src/repo-snapshot.js b/frontend/src/repo-snapshot.js
index 999a5bd9b6..a61f475e50 100644
--- a/frontend/src/repo-snapshot.js
+++ b/frontend/src/repo-snapshot.js
@@ -91,26 +91,26 @@ class RepoSnapshot extends React.Component {
     const pathList = path.split('/');
 
     if (path == '/') {
-      return repoName;
+      return <span className="text-truncate" title={repoName}>{repoName}</span>;
     }
 
     return (
       <React.Fragment>
-        <a href="#" onClick={this.clickFolderPath.bind(this, '/')}>{repoName}</a>
-        <span> / </span>
+        <a href="#" onClick={this.clickFolderPath.bind(this, '/')} className="text-truncate" title={repoName}>{repoName}</a>
+        <span className="mx-1">/</span>
         {pathList.map((item, index) => {
           if (index > 0 && index != pathList.length - 1) {
             return (
               <React.Fragment key={index}>
-                <a href="#" onClick={this.clickFolderPath.bind(this, pathList.slice(0, index+1).join('/'))}>{pathList[index]}</a>
-                <span> / </span>
+                <a href="#" onClick={this.clickFolderPath.bind(this, pathList.slice(0, index+1).join('/'))} className="text-truncate" title={pathList[index]}>{pathList[index]}</a>
+                <span className="mx-1">/</span>
               </React.Fragment>
             );
           }
           return null;
         }
         )}
-        {pathList[pathList.length - 1]}
+        <span className="text-truncate" title={pathList[pathList.length - 1]}>{pathList[pathList.length - 1]}</span>
       </React.Fragment>
     );
   };
@@ -129,6 +129,8 @@ class RepoSnapshot extends React.Component {
   render() {
     const { isConfirmDialogOpen, folderPath } = this.state;
 
+    let title = gettext('{placeholder} Snapshot');
+    title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName) + '</span>');
     return (
       <React.Fragment>
         <div className="h-100 d-flex flex-column">
@@ -142,7 +144,7 @@ class RepoSnapshot extends React.Component {
             <div className="row">
               <div className="col-md-10 offset-md-1">
                 <h2>
-                  <span>{Utils.generateDialogTitle(gettext('{placeholder} Snapshot'), repoName)}</span>
+                  <span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
                   <span className="heading-commit-time ml-1">({commitTime})</span>
                 </h2>
                 <a href="#" className="go-back" title={gettext('Back')} role="button" aria-label={gettext('Back')} onClick={this.goBack}>
@@ -150,8 +152,8 @@ class RepoSnapshot extends React.Component {
                 </a>
                 {folderPath == '/' && (
                   <div className="d-flex mb-2 align-items-center">
-                    <p className="m-0">{commitDesc}</p>
-                    <div className="ml-4 border-left pl-4 d-flex align-items-center">
+                    <p className="m-0 text-truncate" title={commitDesc}>{commitDesc}</p>
+                    <div className="ml-4 border-left pl-4 d-flex align-items-center flex-shrink-0">
                       {showAuthor ? (
                         <React.Fragment>
                           <img src={authorAvatarURL} width="20" height="20" alt="" className="rounded mr-1" />
@@ -163,9 +165,9 @@ class RepoSnapshot extends React.Component {
                   </div>
                 )}
                 <div className="d-flex justify-content-between align-items-center op-bar">
-                  <p className="m-0">{gettext('Current path: ')}{this.renderPath()}</p>
+                  <p className="m-0 text-truncate d-flex"><span className="mr-1">{gettext('Current path: ')}</span>{this.renderPath()}</p>
                   {(folderPath == '/' && canRestoreRepo) &&
-                  <button className="btn btn-secondary op-bar-btn" onClick={this.toggleDialog}>{gettext('Restore')}</button>
+                  <button className="btn btn-secondary op-bar-btn flex-shrink-0 ml-4" onClick={this.toggleDialog}>{gettext('Restore')}</button>
                   }
                 </div>
                 <Content
diff --git a/media/css/seahub_react.css b/media/css/seahub_react.css
index 432b0b6748..f4e3bbeedc 100644
--- a/media/css/seahub_react.css
+++ b/media/css/seahub_react.css
@@ -1260,3 +1260,9 @@ a.table-sort-op:hover {
 #wiki-file-content .seafile-markdown-outline .seafile-markdown-outline:hover {
   overflow-y: auto;
 }
+
+.modal-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}