Merge pull request #11962 from nanaya/team-name-overflow

Fix overflowing team and username

Author: notbakaneko

resources/css/bem/profile-info.less

@@ -103,7 +103,8 @@
   &__flag {
     .link-plain();
     .link-white();
-    display: flex;
+    display: grid;
+    grid-template-columns: auto 1fr;
     gap: 4px;
     align-items: center;
   }
@@ -175,6 +176,7 @@
     flex-direction: column;
     align-items: flex-start;
     flex: 1;
+    min-width: 0;
   }
 
   &__level {

resources/js/profile-page/cover.tsx

@@ -98,7 +98,7 @@ export default class Cover extends React.Component<Props> {
                   href={route('teams.show', { team: this.props.user.team.id })}
                 >
                   <FlagTeam team={this.props.user.team} />
-                  <span className='profile-info__flag-text'>{this.props.user.team.name}</span>
+                  <span className='profile-info__flag-text u-ellipsis-overflow'>{this.props.user.team.name}</span>
                 </a>
               }
               <div className='profile-info__icons profile-info__icons--flag-inline'>

resources/views/teams/show.blade.php

@@ -47,7 +47,7 @@ class="profile-info__bg profile-info__bg--team"
                 </div>
                 <div class="profile-info__info">
                     <h1 class="profile-info__name">
-                        {{ $team->name }}
+                        <span class="u-ellipsis-overflow">{{ $team->name }}</span>
                     </h1>
                     <div class="profile-info__flags">
                         <p class="profile-info__flag">