Give status a max-height

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
matrix-org · Dec 10, 2021 · 1df5c7c · 1df5c7c
1 parent a8dc0e6
commit 1df5c7c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss
@@ -204,10 +204,19 @@ limitations under the License.
  }
 
  .mx_UserInfo_statusMessage {
+ $statusLineHeight: 16px;
+ $statusNumberOfLines: 3;
+
  font-size: $font-11px;
+ line-height: $statusLineHeight;
  opacity: 0.5;
  overflow: hidden;
- text-overflow: clip;
+ word-break: break-word;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ max-height: calc($statusLineHeight * $statusNumberOfLines);
+ -webkit-line-clamp: $statusNumberOfLines;
+ -webkit-box-orient: vertical;
  }
 
  .mx_AutoHideScrollbar {

diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
@@ -1575,7 +1575,7 @@ const UserInfoHeader: React.FC<{
 
  let statusLabel = null;
  if (statusMessage) {
- statusLabel = <span className="mx_UserInfo_statusMessage">{ statusMessage }</span>;
+ statusLabel = <div className="mx_UserInfo_statusMessage">{ statusMessage }</div>;
  }
 
  let e2eIcon;