fix: adjust page-specific styles for globalheader (#5620)

Author: wdoconnell

src/MultiOrgOverrideStyles.scss

@@ -1,5 +1,23 @@
+@use 'src/identity/components/GlobalHeader/GlobalHeaderStyle.scss' as gh;
+
+// Reduce size of page headers
 .multi-org .cf-page-header {
-  height: 45px !important;
-  flex: 0 0 45px !important;
-  margin-bottom: 12px !important;
+  height: 46px !important;
+  flex: 0 0 46px !important;
+  margin-bottom: 14px !important;
+}
+
+// Adjust most pages for multi-org by changing the size of the Dapper Scroll Bar wrapper.
+.multi-org .cf-page-contents > .ScrollbarsCustom-Wrapper {
+  height: calc(100% - gh.$globalheader-height);
+}
+
+// Page-specific fix for Data Explorer - Classic
+.multi-org .data-explorer > .time-machine > .cf-draggable-resizer {
+  height: calc(100% - gh.$globalheader-height);
+}
+
+// Page-specific fix for Data Explorer - New
+.multi-org .flux-query-builder--container {
+  height: calc(100% - gh.$globalheader-height);
 }

src/authorizations/components/TokensTab.tsx

@@ -41,6 +41,9 @@ import './TokensTabStyles.scss'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 import {event} from 'src/cloud/utils/reporting'
 
+// Constants
+import {GLOBAL_HEADER_HEIGHT} from 'src/identity/components/GlobalHeader/constants'
+
 enum AuthSearchKeys {
   Description = 'description',
   Status = 'status',
@@ -209,7 +212,11 @@ class TokensTab extends PureComponent<Props, State> {
                 DEFAULT_TAB_NAVIGATION_HEIGHT +
                 DEFAULT_ALERT_HEIGHT
 
-            const adjustedHeight = height - heightWithPagination
+            const adjustedHeight =
+              height -
+              heightWithPagination -
+              (isFlagEnabled('multiOrg') ? GLOBAL_HEADER_HEIGHT : 0)
+
             return (
               <>
                 <div style={{margin: '10px 0px'}}>

src/buckets/components/BucketsTab.tsx

@@ -38,11 +38,15 @@ import {checkBucketLimits as checkBucketLimitsAction} from 'src/cloud/actions/li
 import {getBucketLimitStatus} from 'src/cloud/utils/limits'
 import {getAll} from 'src/resources/selectors'
 import {SortTypes} from 'src/shared/utils/sort'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 // Types
 import {AppState, Bucket, OwnBucket, ResourceType} from 'src/types'
 import {BucketSortKey} from 'src/shared/components/resource_sort_dropdown/generateSortItems'
 
+// Constants
+import {GLOBAL_HEADER_HEIGHT} from 'src/identity/components/GlobalHeader/constants'
+
 interface State {
   searchTerm: string
   sortKey: BucketSortKey
@@ -138,7 +142,11 @@ class BucketsTab extends PureComponent<Props, State> {
               DEFAULT_TAB_NAVIGATION_HEIGHT ||
             DEFAULT_PAGINATION_CONTROL_HEIGHT + DEFAULT_TAB_NAVIGATION_HEIGHT
 
-          const adjustedHeight = height - heightWithPagination
+          const adjustedHeight =
+            height -
+            heightWithPagination -
+            (isFlagEnabled('multiOrg') ? GLOBAL_HEADER_HEIGHT : 0)
+
           return (
             <>
               <TabbedPageHeader

src/flows/components/FlowPage.tsx

@@ -11,6 +11,12 @@ import {PopupDrawer, PopupProvider} from 'src/flows/context/popup'
 import {ResultsProvider} from 'src/flows/context/results'
 import {SidebarProvider} from 'src/flows/context/sidebar'
 
+// Utils
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+
+// Constants
+import {GLOBAL_HEADER_HEIGHT} from 'src/identity/components/GlobalHeader/constants'
+
 // Components
 import PipeList from 'src/flows/components/PipeList'
 import {SubSideBar} from 'src/flows/components/Sidebar'
@@ -32,13 +38,19 @@ const RunOnMount = () => {
   return null
 }
 
+const flowPageHeight = {
+  height: isFlagEnabled('multiOrg')
+    ? `calc(100% - ${GLOBAL_HEADER_HEIGHT}px)`
+    : '100%',
+}
+
 export const FlowPage: FC = () => (
   <ResultsProvider>
     <FlowQueryProvider>
       <RunOnMount />
       <FlowKeyboardPreview />
       <SidebarProvider>
-        <Page>
+        <Page style={flowPageHeight}>
           <FlowHeader />
           <Page.Contents
             fullWidth={true}

src/identity/components/GlobalHeader/GlobalHeaderStyle.scss

@@ -1,10 +1,13 @@
+// If this height is changed also change GLOBAL_HEADER_HEIGHT constant.
+$globalheader-height: 60px;
+
 .multiaccountorg--header {
-  height: 60px;
-  padding-top: 0px;
+  height: $globalheader-height;
+  padding-top: 12px;
   padding-right: 32px;
   padding-bottom: 12px;
   padding-left: 22px;
-  margin-top: 12px;
+  margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   margin-left: 0px;

src/identity/components/GlobalHeader/constants/index.ts

@@ -0,0 +1,2 @@
+// If this height is changed, also change $globalheader-height sass variable.
+export const GLOBAL_HEADER_HEIGHT = 60