Fix the Tiniest Header (#4420)

* Use correct percentage in page header sizing

* Use PageHeader instead of raw markup

* Change sidenav item to match page header

ui/src/data_explorer/components/DEHeader.tsx

@@ -2,7 +2,7 @@
 import React, {Component} from 'react'
 
 // Components
-import {Radio, ButtonShape} from 'src/reusable_ui'
+import {Page, Radio, ButtonShape} from 'src/reusable_ui'
 import GraphTips from 'src/shared/components/GraphTips'
 import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
 
@@ -35,52 +35,51 @@ class DEHeader extends Component<Props> {
     } = this.props
 
     return (
-      <div className="page-header full-width deceo--header">
-        <div className="page-header--container">
-          <div className="page-header--left">Explore</div>
-          <div className="deceo--header-tabs">
-            <Radio shape={ButtonShape.StretchToFit}>
-              <Radio.Button
-                id="deceo-tab-queries"
-                titleText="Queries"
-                value={CEOTabs.Queries}
-                active={activeEditorTab === CEOTabs.Queries}
-                onClick={onSetActiveEditorTab}
-              >
-                Queries
-              </Radio.Button>
-              <Radio.Button
-                id="deceo-tab-vis"
-                titleText="Visualization"
-                value={CEOTabs.Vis}
-                active={activeEditorTab === CEOTabs.Vis}
-                onClick={onSetActiveEditorTab}
-              >
-                Visualization
-              </Radio.Button>
-            </Radio>
-          </div>
-
-          <div className="page-header--right">
-            <GraphTips />
-            <button
-              onClick={onOpenWriteData}
-              data-test="write-data-button"
-              className="button button-sm button-default"
+      <Page.Header fullWidth={true}>
+        <Page.Header.Left>
+          <Page.Title title="Explore" />
+        </Page.Header.Left>
+        <Page.Header.Center widthPixels={220}>
+          <Radio shape={ButtonShape.StretchToFit}>
+            <Radio.Button
+              id="deceo-tab-queries"
+              titleText="Queries"
+              value={CEOTabs.Queries}
+              active={activeEditorTab === CEOTabs.Queries}
+              onClick={onSetActiveEditorTab}
             >
-              Write Data
+              Queries
+            </Radio.Button>
+            <Radio.Button
+              id="deceo-tab-vis"
+              titleText="Visualization"
+              value={CEOTabs.Vis}
+              active={activeEditorTab === CEOTabs.Vis}
+              onClick={onSetActiveEditorTab}
+            >
+              Visualization
+            </Radio.Button>
+          </Radio>
+        </Page.Header.Center>
+        <Page.Header.Right>
+          <GraphTips />
+          <button
+            onClick={onOpenWriteData}
+            data-test="write-data-button"
+            className="button button-sm button-default"
+          >
+            Write Data
+          </button>
+          <Authorized requiredRole={EDITOR_ROLE}>
+            <button
+              onClick={toggleSendToDashboard}
+              className="button button-sm button-success"
+            >
+              Send to Dashboard
             </button>
-            <Authorized requiredRole={EDITOR_ROLE}>
-              <button
-                onClick={toggleSendToDashboard}
-                className="button button-sm button-success"
-              >
-                Send to Dashboard
-              </button>
-            </Authorized>
-          </div>
-        </div>
-      </div>
+          </Authorized>
+        </Page.Header.Right>
+      </Page.Header>
     )
   }
 }

ui/src/reusable_ui/components/page_layout/PageHeaderLeft.tsx

@@ -47,7 +47,7 @@ class PageHeaderLeft extends Component<Props> {
     }
 
     return {
-      flex: `1 0 calc(100% - ${offsetPixels}px)`,
+      flex: `1 0 calc(50% - ${offsetPixels}px)`,
     }
   }
 }

ui/src/reusable_ui/components/page_layout/PageHeaderRight.tsx

@@ -48,7 +48,7 @@ class PageHeaderRight extends Component<Props> {
     }
 
     return {
-      flex: `1 0 calc(100% - ${offsetPixels}px)`,
+      flex: `1 0 calc(50% - ${offsetPixels}px)`,
     }
   }
 }

ui/src/side_nav/containers/SideNav.tsx

@@ -82,7 +82,7 @@ class SideNav extends PureComponent<Props> {
           link={dataExplorerLink}
           location={location}
         >
-          <NavHeader link={dataExplorerLink} title="Data Explorer" />
+          <NavHeader link={dataExplorerLink} title="Explore" />
         </NavBlock>
         <NavBlock
           highlightWhen={['dashboards']}