From 53d3a67533100ffe5512554808c5b1b42ab1a711 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Rusakow?= <andre.rusakow@googlemail.com>
Date: Mon, 26 Dec 2022 23:09:52 +0100
Subject: [PATCH] hide user name in user dropdown on mobile (#2512)

* hide user name in user dropdown on mobile

* truncate title in header

* prettify code

* Add line height to prevent cutting of lower length letters
---
 .../common/UserDropdown/UserDropdown.module.scss | 16 ++++++++++++++++
 .../common/UserDropdown/UserDropdown.tsx         | 10 ++++------
 web/components/ui/Header/Header.module.scss      |  4 +++-
 web/components/ui/Header/Header.tsx              |  2 +-
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/web/components/common/UserDropdown/UserDropdown.module.scss b/web/components/common/UserDropdown/UserDropdown.module.scss
index 0ac78eb41..f68810c58 100644
--- a/web/components/common/UserDropdown/UserDropdown.module.scss
+++ b/web/components/common/UserDropdown/UserDropdown.module.scss
@@ -1,3 +1,5 @@
+@import '../../../styles/mixins.scss';
+
 .root {
   button {
     border: none;
@@ -7,4 +9,18 @@
 			}
 		}
   }
+  .userIcon {
+	@include screen(desktop) {
+		margin-right: .5rem;
+	}
+  }
+
+  .username {
+	  display: none;
+  
+	  @include screen(desktop) {
+		  display: inline;
+	  }
+  }
 }
+
diff --git a/web/components/common/UserDropdown/UserDropdown.tsx b/web/components/common/UserDropdown/UserDropdown.tsx
index f40e74c8f..f1aec9b86 100644
--- a/web/components/common/UserDropdown/UserDropdown.tsx
+++ b/web/components/common/UserDropdown/UserDropdown.tsx
@@ -1,4 +1,4 @@
-import { Menu, Dropdown, Button, Space } from 'antd';
+import { Menu, Dropdown, Button } from 'antd';
 import {
   CaretDownOutlined,
   EditOutlined,
@@ -83,11 +83,9 @@ export const UserDropdown: FC<UserDropdownProps> = ({ username: defaultUsername
   return (
     <div id="user-menu" className={`${styles.root}`}>
       <Dropdown overlay={menu} trigger={['click']}>
-        <Button type="primary" icon={<UserOutlined style={{ marginRight: '.5rem' }} />}>
-          <Space>
-            {username}
-            <CaretDownOutlined />
-          </Space>
+        <Button type="primary" icon={<UserOutlined className={styles.userIcon} />}>
+          <span className={styles.username}>{username}</span>
+          <CaretDownOutlined />
         </Button>
       </Dropdown>
       <Modal
diff --git a/web/components/ui/Header/Header.module.scss b/web/components/ui/Header/Header.module.scss
index 15fcb7df8..36d5b295d 100644
--- a/web/components/ui/Header/Header.module.scss
+++ b/web/components/ui/Header/Header.module.scss
@@ -33,7 +33,9 @@
       font-weight: 600;
       white-space: nowrap;
       text-overflow: ellipsis;
-      max-width: 90%;
+      width: 70vw;
+      overflow: hidden;
+      line-height: 1.4;
     }
   }
 }
diff --git a/web/components/ui/Header/Header.tsx b/web/components/ui/Header/Header.tsx
index 22e6cd779..542e8258b 100644
--- a/web/components/ui/Header/Header.tsx
+++ b/web/components/ui/Header/Header.tsx
@@ -23,7 +23,7 @@ export const Header: FC<HeaderComponentProps> = ({
       <div id="header-logo" className={styles.logoImage}>
         <OwncastLogo variant="contrast" />
       </div>
-      <h1 className={styles.title} id="global-header-text">
+      <h1 className={styles.title} id="global-header-text" title={name}>
         {name}
       </h1>
     </div>