fix: page content now visible on mobile devices (#5651)

* fix: page content now visible on mobile devices

* chore: linter

* fix: global header popover

* fix: remove custom style adjustments for dapperscrollbar, dataexplorer, tasks

* fix: remove custom style adjustments for dapperscrollbar, dataexplorer, tasks

Co-authored-by: wdoconnell <91283923+wdoconnell@users.noreply.github.com>

Author: ChitlangeSahas

src/App.tsx

@@ -44,7 +44,7 @@ import {executeVWO} from 'src/utils/vwo'
 
 // Styles
 import './MultiOrgOverrideStyles.scss'
-const fullScreen = {height: '100%', width: '100%'}
+import {Page} from '@influxdata/clockface'
 
 const App: FC = () => {
   const {theme, presentationMode} = useContext(AppSettingContext)
@@ -121,15 +121,15 @@ const App: FC = () => {
       <EngagementLink />
       <TreeNav />
       <Suspense fallback={<PageSpinner />}>
-        <div style={fullScreen}>
+        <Page>
           {CLOUD && isFlagEnabled('multiOrg') && shouldUseQuartzIdentity() && (
             <GlobalHeaderContainer />
           )}
           <Switch>
             <Route path="/orgs/new" component={CreateOrgOverlay} />
             <Route path="/orgs/:orgID" component={SetOrg} />
           </Switch>
-        </div>
+        </Page>
       </Suspense>
     </AppWrapper>
   )

src/MultiOrgOverrideStyles.scss

@@ -12,22 +12,6 @@
   margin-bottom: 14px !important;
 }
 
-/* Page Size Generally */
-// Adjusts Dapper Scrollbars height.
-.multi-org .cf-page-contents > .ScrollbarsCustom-Wrapper {
-  height: calc(100% - gh.$globalheader-height);
-}
-
-// Data Explorer - Classic
-.multi-org .data-explorer > .time-machine > .cf-draggable-resizer {
-  height: calc(100% - gh.$globalheader-height);
-}
-
-// Data Explorer - New
-.multi-org .flux-query-builder--container {
-  height: calc(100% - gh.$globalheader-height);
-}
-
 /* Notebooks */
 // Browser
 .multi-org .cf-page.flows-index {
@@ -61,9 +45,3 @@
     right: $cf-space-2xs;
   }
 }
-
-/* Tasks */
-// TaskForm.scss deducts #{$ix-marg-d} from page height, so the multi-org style must do so too.
-.multi-org .task-form {
-  height: calc(100% - #{gh.$globalheader-height} - #{$ix-marg-d}) !important;
-}

src/identity/components/GlobalHeader/UserPopoverStyles.scss

@@ -74,3 +74,9 @@
     margin-top: 10px;
   }
 }
+
+@media (max-width: 800px) {
+  .user-popover {
+    top: 123px;
+  }
+}

src/shared/components/cloud/CloudOnly.scss

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