Fix z-index of AvatarPopup and limit max width

stylesheets/_modules.scss

@@ -9568,6 +9568,7 @@ button.module-image__border-overlay:focus {
 
 .module-avatar-popup {
   min-width: 240px;
+  max-width: $left-pane-width;
 
   border-radius: 4px;
   padding-bottom: 4px;
@@ -9596,6 +9597,7 @@ button.module-image__border-overlay:focus {
 
 .module-avatar-popup__profile__text {
   margin-left: 10px;
+  overflow: hidden;
 }
 
 .module-avatar-popup__profile__name {
@@ -9612,6 +9614,13 @@ button.module-image__border-overlay:focus {
   }
 }
 
+.module-avatar-popup__profile__name,
+.module-avatar-popup__profile__number {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .module-avatar-popup__divider {
   border: none;
   padding: 0;

ts/components/MainHeader.tsx

@@ -388,7 +388,7 @@ export class MainHeader extends React.Component<PropsType, StateType> {
                     <AvatarPopup
                       innerRef={ref}
                       i18n={i18n}
-                      style={style}
+                      style={{ ...style, zIndex: 1 }}
                       color={color}
                       conversationType="direct"
                       name={name}