['Files'] modification for 'long library names' in 'Grid' view mode (#6219)

frontend/src/components/shared-repo-list-view/shared-repo-list-item.js

@@ -634,7 +634,13 @@ class SharedRepoListItem extends React.Component {
     let { iconUrl, iconTitle, libPath } = this.getRepoComputeParams();
     const { repo, currentViewMode } = this.props;
     return currentViewMode == 'list' ? (
-      <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter}>
+      <tr
+        className={this.state.highlight ? 'tr-highlight' : ''}
+        onMouseEnter={this.onMouseEnter}
+        onMouseOver={this.onMouseOver}
+        onMouseLeave={this.onMouseLeave}
+        onFocus={this.onMouseEnter}
+      >
         <td className="text-center">
           <i
             role="button"
@@ -667,12 +673,12 @@ class SharedRepoListItem extends React.Component {
         onMouseLeave={this.onMouseLeave}
         onFocus={this.onMouseEnter}
       >
-        <div className="d-flex align-items-center">
+        <div className="d-flex align-items-center text-truncate">
           <img src={iconUrl} title={iconTitle} alt={iconTitle} width="36" className="mr-2" />
           {this.state.isRenaming ?
-            <Rename name={repo.repo_name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel}/> :
+            <Rename name={repo.repo_name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel} /> :
             <Fragment>
-              <Link to={libPath}>{repo.repo_name}</Link>
+              <Link to={libPath} className="text-truncate" title={repo.repo_name}>{repo.repo_name}</Link>
               <i
                 role="button"
                 title={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
@@ -685,7 +691,7 @@ class SharedRepoListItem extends React.Component {
             </Fragment>
           }
         </div>
-        <div>
+        <div className="flex-shrink-0">
           {this.state.isOperationShow && this.generatorPCMenu()}
         </div>
       </div>

frontend/src/pages/my-libs/mylib-repo-list-item.js

@@ -380,7 +380,7 @@ class MylibRepoListItem extends React.Component {
         onMouseLeave={this.onMouseLeave}
         onFocus={this.onFocus}
       >
-        <div className="d-flex align-items-center">
+        <div className="d-flex align-items-center text-truncate">
           <img src={iconUrl} title={iconTitle} alt={iconTitle} width="36" className="mr-2" />
           {this.state.isRenaming && (
             <Rename
@@ -391,7 +391,7 @@ class MylibRepoListItem extends React.Component {
           )}
           {!this.state.isRenaming && repo.repo_name && (
             <Fragment>
-              <Link to={repoURL}>{repo.repo_name}</Link>
+              <Link to={repoURL} className="text-truncate" title={repo.repo_name}>{repo.repo_name}</Link>
               <i
                 role="button"
                 title={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
@@ -408,7 +408,7 @@ class MylibRepoListItem extends React.Component {
           }
         </div>
         {(repo.repo_name && this.state.isOpIconShow) && (
-          <div>
+          <div className="flex-shrink-0">
             <a href="#" className="op-icon sf3-font-share sf3-font" title={gettext('Share')} role="button" aria-label={gettext('Share')} onClick={this.onShareToggle}></a>
             <a href="#" className="op-icon sf3-font-delete1 sf3-font" title={gettext('Delete')} role="button" aria-label={gettext('Delete')} onClick={this.onDeleteToggle}></a>
             <MylibRepoMenu

frontend/src/pages/shared-libs/shared-libs.js

@@ -335,9 +335,9 @@ class Item extends Component {
             onMouseOut={this.handleMouseOut}
             onFocus={this.handleMouseOver}
           >
-            <div className="d-flex align-items-center">
+            <div className="d-flex align-items-center text-truncate">
               <img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="36" className="mr-2" />
-              <Link to={shareRepoUrl}>{data.repo_name}</Link>
+              <Link to={shareRepoUrl} className="text-truncate" title={data.repo_name}>{data.repo_name}</Link>
               <i
                 role="button"
                 title={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
@@ -348,7 +348,7 @@ class Item extends Component {
               {data.monitored && <RepoMonitoredIcon repoID={data.repo_id} className="op-icon library-grid-item-icon" />}
             </div>
 
-            <div>
+            <div className="flex-shrink-0">
               {(isPro && data.is_admin) &&
               <a href="#" className={shareIconClassName} title={gettext('Share')} role="button" aria-label={gettext('Share')} onClick={this.share}></a>
               }