Austenem/CAT-944 Entity header styling bugs (#3569)

* re-center entity header content * fix header bug * add changelog * Update context/app/static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx Co-authored-by: Nikolay Akhmetov <[email protected]> --------- Co-authored-by: Nikolay Akhmetov <[email protected]>
hubmapconsortium · Oct 11, 2024 · 90f1ea4 · 90f1ea4
1 parent e07978c
commit 90f1ea4
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 5 deletions.
diff --git a/CHANGELOG-entity-header-styling.md b/CHANGELOG-entity-header-styling.md
@@ -0,0 +1 @@
+- Fix Webkit-specific bugs that caused the entity header to become misaligned.
diff --git a/context/app/static/js/components/Header/Header/Header.tsx b/context/app/static/js/components/Header/Header/Header.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import Box from '@mui/material/Box';
 import EntityHeader from 'js/components/detailPage/entityHeader/EntityHeader';
 import HeaderAppBar from '../HeaderAppBar';
 import HeaderContent from '../HeaderContent';
@@ -9,12 +10,12 @@ function Header() {
   const { shouldDisplayHeader, ...props } = useEntityHeaderVisibility();
 
   return (
-    <>
+    <Box sx={(theme) => ({ position: 'fixed', width: '100%', zIndex: theme.zIndex.header })}>
       <HeaderAppBar {...props}>
         <HeaderContent />
       </HeaderAppBar>
       {shouldDisplayHeader && <EntityHeader />}
-    </>
+    </Box>
   );
 }
 

diff --git a/context/app/static/js/components/detailPage/entityHeader/EntityHeader/style.ts b/context/app/static/js/components/detailPage/entityHeader/EntityHeader/style.ts
@@ -7,7 +7,7 @@ const StyledPaper = styled(Paper)(({ theme }) => ({
   position: 'sticky',
   width: '100%',
   top: headerHeight,
-  zIndex: theme.zIndex.entityHeader,
+  zIndex: theme.zIndex.header,
 }));
 
 export { StyledPaper };
diff --git a/.../static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx b/.../static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx
@@ -217,6 +217,7 @@ function EntityHeaderContent({ view, setView }: { view: SummaryViewsType; setVie
     <Stack
       direction="row"
       alignItems="center"
+      height="3rem"
       px={2}
       py={0.5}
       sx={(theme) => ({ ...(view !== 'narrow' && { borderBottom: `1px solid ${theme.palette.primary.lowEmphasis}` }) })}

diff --git a/context/app/static/js/theme/theme.tsx b/context/app/static/js/theme/theme.tsx
@@ -42,7 +42,7 @@ declare module '@mui/material/styles' {
   export interface ZIndex {
     tutorial: number;
     dropdownOffset: number;
-    entityHeader: number;
+    header: number;
     dropdown: number;
     visualization: number;
     fileBrowserHeader: number;
@@ -264,7 +264,7 @@ const theme = createTheme({
   zIndex: {
     tutorial: 1101, // one higher than AppBar zIndex provided by MUI
     dropdownOffset: 1001,
-    entityHeader: 1000,
+    header: 1000,
     dropdown: 50,
     visualization: 3,
     fileBrowserHeader: 1,