Merge pull request #595 from dulithsenanayake/alpha-banner-display-is…

…sue-fix Fix UI issues when enable banners
wso2 · Mar 12, 2024 · da595ac · da595ac
2 parents 035221d + 0f07043
commit da595ac
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/portals/devportal/src/main/webapp/source/src/app/components/Base/index.jsx b/portals/devportal/src/main/webapp/source/src/app/components/Base/index.jsx
@@ -134,6 +134,7 @@ const Root = styled('div')((
             position: 'relative',
             minHeight: theme.custom.banner.active ? `calc(100vh - ${64 + footerHeight}px)` : `calc(100vh - ${footerHeight}px)`,
             marginLeft: -4,
+            marginTop: theme.custom.banner.active ? 0 : '64px',
         },
         [`& .${classes.push}`]: {
             height: 50,
@@ -192,7 +193,7 @@ const Root = styled('div')((
             position: 'fixed',
             width: '100%',
             boxSizing: 'border-box',
-            zIndex: 1,
+            zIndex: 1000,
         },
         [`& .${classes.listRoot}`]: {
             padding: 0,
@@ -503,7 +504,7 @@ class LayoutLegacy extends React.Component {
                             position='fixed'
                             className={classes.appBar}
                             id='appBar'
-                            style={{ top: active ? this.state.bannerHeight + 'px' : 'unset' }}
+                            style={{ top: active ? this.state.bannerHeight + 'px' : 0 }}
                         >
                             <Toolbar className={classes.toolbar} id='toolBar'>
                                 <Hidden mdUp>
@@ -686,7 +687,7 @@ class LayoutLegacy extends React.Component {
                             </Toolbar>
                         </AppBar>
                         <main>
-                            <div className={classes.contentWrapper} style={{ paddingTop: active ? 'unset' : '64px' }}>{children}</div>
+                            <div className={classes.contentWrapper}>{children}</div>
                         </main>
                         {footerActive && <div className={classes.push} />}
                     </div>