Update

web/apps/accounts/src/pages/passkeys/index.tsx

@@ -1,5 +1,6 @@
+import { EnteLogo } from "@/base/components/EnteLogo";
 import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
-import { AppNavbarNormalFlow } from "@/base/components/Navbar";
+import { NavbarBase } from "@/base/components/Navbar";
 import {
     RowButton,
     RowButtonDivider,
@@ -116,7 +117,9 @@ const Page: React.FC = () => {
 
     return (
         <Stack sx={{ minHeight: "100svh" }}>
-            <AppNavbarNormalFlow />
+            <NavbarBase>
+                <EnteLogo />
+            </NavbarBase>
             <Stack
                 sx={{ alignSelf: "center", m: 3, maxWidth: "375px", gap: 3 }}
             >

web/apps/photos/src/pages/gallery.tsx

@@ -1,7 +1,7 @@
 import { sessionExpiredDialogAttributes } from "@/accounts/components/utils/dialog";
 import { stashRedirect } from "@/accounts/services/redirect";
 import type { MiniDialogAttributes } from "@/base/components/MiniDialog";
-import { NavbarBaseNormalFlow } from "@/base/components/Navbar";
+import { NavbarBase } from "@/base/components/Navbar";
 import { TranslucentLoadingOverlay } from "@/base/components/loaders";
 import type { ButtonishProps } from "@/base/components/mui";
 import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
@@ -941,7 +941,7 @@ const Page: React.FC = () => {
                     files={fixCreationTimeFiles}
                 />
 
-                <NavbarBaseNormalFlow
+                <NavbarBase
                     sx={{
                         mb: "12px",
                         px: "24px",
@@ -1008,7 +1008,7 @@ const Page: React.FC = () => {
                             }}
                         />
                     )}
-                </NavbarBaseNormalFlow>
+                </NavbarBase>
 
                 {isOffline && <OfflineMessage />}
 

web/apps/photos/src/pages/shared-albums.tsx

@@ -10,7 +10,7 @@ import {
 } from "@/base/components/loaders";
 import type { ButtonishProps } from "@/base/components/mui";
 import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
-import { NavbarBaseNormalFlow } from "@/base/components/Navbar";
+import { NavbarBase } from "@/base/components/Navbar";
 import {
     OverflowMenu,
     OverflowMenuOption,
@@ -515,7 +515,7 @@ export default function PublicCollectionGallery() {
                         getFolderSelectorInputProps,
                     }}
                 />
-                <NavbarBaseNormalFlow
+                <NavbarBase
                     sx={{
                         mb: "16px",
                         px: "24px",
@@ -540,7 +540,7 @@ export default function PublicCollectionGallery() {
                             )}
                         </SpacedRow>
                     )}
-                </NavbarBaseNormalFlow>
+                </NavbarBase>
 
                 <PhotoFrame
                     files={publicFiles}

web/packages/accounts/components/layouts/centered-paper.tsx

@@ -1,6 +1,6 @@
 import { CenteredFill } from "@/base/components/containers";
 import { EnteLogo } from "@/base/components/EnteLogo";
-import { NavbarBaseNormalFlow } from "@/base/components/Navbar";
+import { NavbarBase } from "@/base/components/Navbar";
 import { Paper, Stack, styled, Typography } from "@mui/material";
 
 /**
@@ -20,7 +20,7 @@ export const AccountsPageContents: React.FC<React.PropsWithChildren> = ({
     children,
 }) => (
     <Stack sx={{ minHeight: "100svh" }}>
-        <NavbarBaseNormalFlow
+        <NavbarBase
             sx={[
                 (theme) =>
                     theme.applyStyles("light", {
@@ -29,7 +29,7 @@ export const AccountsPageContents: React.FC<React.PropsWithChildren> = ({
             ]}
         >
             <EnteLogo />
-        </NavbarBaseNormalFlow>
+        </NavbarBase>
         <CenteredFill
             sx={[
                 { bgcolor: "accent.main" },

web/packages/base/components/Navbar.tsx

@@ -1,8 +1,6 @@
-import { EnteLogo } from "@/base/components/EnteLogo";
 import { styled } from "@mui/material";
-import React from "react";
 
-export const NavbarBaseNormalFlow = styled("div")(
+export const NavbarBase = styled("div")(
     ({ theme }) => `
     flex: 0 0 64px;
     display: flex;
@@ -11,13 +9,3 @@ export const NavbarBaseNormalFlow = styled("div")(
     border-bottom: 1px solid ${theme.vars.palette.divider};
 `,
 );
-
-/**
- * A variant of AppNavbar that places itself normally in the document flow
- * instead of using a fixed positioning.
- */
-export const AppNavbarNormalFlow: React.FC = () => (
-    <NavbarBaseNormalFlow>
-        <EnteLogo />
-    </NavbarBaseNormalFlow>
-);