Merge pull request #3699 from IntersectMBO/fix/3681-red-banner-overlapping-navigation

fix: overlapping banners over app content

Author: MSzalowski

govtool/frontend/src/App.tsx

@@ -93,9 +93,8 @@ export default () => {
   }, [checkTheWalletIsActive]);
 
   return (
-    <>
+    <TopBanners>
       <ScrollToTop />
-      <TopBanners />
       <Routes>
         <Route path={PATHS.home} element={<Home />} />
         <Route path={PATHS.governanceActions} element={<GovernanceActions />} />
@@ -226,6 +225,6 @@ export default () => {
           {modals[modal.type].component!}
         </Modal>
       )}
-    </>
+    </TopBanners>
   );
 };

govtool/frontend/src/components/organisms/DashboardTopNav.tsx

@@ -8,7 +8,10 @@ import {
   useGetVoterInfo,
   useScreenDimension,
 } from "@hooks";
-import { DashboardDrawerMobile } from "@organisms";
+import {
+  DashboardDrawerMobile,
+  useMaintenanceEndingBannerContext,
+} from "@organisms";
 import { useCardano } from "@context";
 
 type DashboardTopNavProps = {
@@ -28,6 +31,8 @@ export const DashboardTopNav = ({
   const { isEnableLoading } = useCardano();
   const { voter } = useGetVoterInfo();
   const { dRepVotingPower } = useGetDRepVotingPowerQuery(voter);
+  const { height: maintenanceEndingBannerHeight } =
+    useMaintenanceEndingBannerContext();
 
   const openDrawer = () => {
     setIsDrawerOpen(true);
@@ -53,7 +58,7 @@ export const DashboardTopNav = ({
           alignItems: "center",
           backdropFilter: "blur(10px)",
           backgroundColor:
-            windowScroll > POSITION_TO_BLUR
+            windowScroll > POSITION_TO_BLUR + maintenanceEndingBannerHeight
               ? "rgba(256, 256, 256, 0.7)"
               : isMobile
               ? "#FBFBFF59"
@@ -65,7 +70,7 @@ export const DashboardTopNav = ({
           minHeight: isMobile ? 36 : 48,
           px: isMobile ? 2 : 5,
           py: 3,
-          top: 0,
+          top: maintenanceEndingBannerHeight || 0,
           width: "fill-available",
           zIndex: 100,
         }}

govtool/frontend/src/components/organisms/Drawer.tsx

@@ -26,11 +26,10 @@ export const Drawer = () => {
         flexDirection: "column",
         height: "100vh",
         position: "sticky",
-        top: maintenanceEndingBannerHeight,
         width: `${DRAWER_WIDTH}px`,
-
+        top: maintenanceEndingBannerHeight || 0,
         overflowY: "auto",
-        maxHeight: "100vh",
+        maxHeight: `calc(100vh - ${maintenanceEndingBannerHeight || 0}px)`,
       }}
     >
       <NavLink

govtool/frontend/src/components/organisms/MaintenanceEndingBanner/MaintenanceEndingBanner.tsx

@@ -20,6 +20,9 @@ export const MaintenanceEndingBanner = () => {
         width: "100%",
         overflow: "hidden",
         transition: "all 0.3s ease-in-out",
+        position: "sticky",
+        top: 0,
+        zIndex: 1200,
       }}
     >
       {/* Banner Header */}

govtool/frontend/src/components/organisms/TopBanners.tsx

@@ -1,10 +1,11 @@
+import { PropsWithChildren } from "react";
 import { Box, Link, Typography } from "@mui/material";
 import { Trans, useTranslation } from "react-i18next";
 import { useAppContext } from "@/context";
 import { LINKS } from "@/consts/links";
 import { MaintenanceEndingBanner } from "./MaintenanceEndingBanner";
 
-export const TopBanners = () => {
+export const TopBanners = ({ children }: PropsWithChildren) => {
   const { isMainnet, networkName, isInBootstrapPhase, isAppInitializing } =
     useAppContext();
   const { t } = useTranslation();
@@ -14,7 +15,7 @@ export const TopBanners = () => {
   }
 
   return (
-    <>
+    <Box>
       <Box>
         {/* NETWORK BANNER */}
         {!isMainnet && (
@@ -48,16 +49,7 @@ export const TopBanners = () => {
       </Box>
 
       {/* GOVTOOL MAINTENANCE ENDING SOON BANNER */}
-      <Box
-        sx={{
-          position: "sticky",
-          top: 0,
-          width: "100%",
-          zIndex: 1200,
-        }}
-      >
-        <MaintenanceEndingBanner />
-      </Box>
+      <MaintenanceEndingBanner />
 
       {/* BOOTSTRAPPING BANNER */}
       <Box>
@@ -89,6 +81,7 @@ export const TopBanners = () => {
           </Box>
         )}
       </Box>
-    </>
+      {children}
+    </Box>
   );
 };