fix(SW-812): styling fixes for the header and related components

components/Header/MainMenu/MyPagesMenuWrapper/index.tsx

@@ -54,7 +54,7 @@ export default async function MyPagesMenuWrapper() {
           trackingId="loginStartNewTopMenu"
         >
           <Avatar />
-          <span className={styles.userName}>
+          <span className={styles.loginText}>
             {intl.formatMessage({ id: "Log in/Join" })}
           </span>
         </LoginButton>

components/Header/MainMenu/MyPagesMenuWrapper/myPagesMenuWrapper.module.css

@@ -4,12 +4,8 @@
   gap: var(--Spacing-x1);
 }
 
-.userName {
-  display: none;
-}
-
-@media screen and (min-width: 768px) {
-  .userName {
-    display: inline;
+@media screen and (max-width: 767px) {
+  .loginText {
+    display: none;
   }
 }