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

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;
+	  }
+  }
 }
+

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

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;
     }
   }
 }

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>