fix(globalHeader): make header work better with small screens (#5900)

Author: ChitlangeSahas

src/identity/components/GlobalHeader/GlobalHeader.tsx

@@ -34,7 +34,7 @@ import IdentityUserAvatar from 'src/identity/components/GlobalHeader/IdentityUse
 import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
 
 const caretStyle = {fontSize: '18px', color: InfluxColors.Grey65}
-const rightHandContainerStyle = {width: '700px', marginLeft: 'auto'}
+const rightHandContainerStyle = {marginLeft: 'auto'}
 
 export const GlobalHeader: FC = () => {
   const dispatch = useDispatch()

src/shared/components/cloud/CloudOnly.scss

@@ -99,12 +99,20 @@ button.upgrade-payg--button {
   margin: $cf-marg-c;
 }
 
-@media (max-width: 668px) {
+@media (max-width: 850px) {
   .credit-250-experiment-upgrade-button--text {
     display: none;
   }
 }
 
+@media (max-width: 700px) {
+  .upgrade-payg--button {
+    .CrownSolid_New {
+      display: none;
+    }
+  }
+}
+
 @media screen and (min-width: $cf-nav-menu--breakpoint) {
   .rate-alert {
     margin-left: $cf-space-l;