Fix the actual issue

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 { AppNavbar, NavbarBase } from "@/base/components/Navbar";
+import { NavbarBaseNormalFlow } from "@/base/components/Navbar";
 import { TranslucentLoadingOverlay } from "@/base/components/loaders";
 import type { ButtonishProps } from "@/base/components/mui";
 import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
@@ -900,7 +900,6 @@ const Page: React.FC = () => {
                         getZipFileSelectorInputProps,
                     }}
                 />
-                <AppNavbar />
                 {blockingLoad && <TranslucentLoadingOverlay />}
                 {isFirstLoad && (
                     <CenteredFlex>
@@ -942,12 +941,11 @@ const Page: React.FC = () => {
                     files={fixCreationTimeFiles}
                 />
 
-                <NavbarBase
+                <NavbarBaseNormalFlow
                     sx={{
-                        background: "transparent",
-                        position: "absolute",
-                        // Override the default 16px we get from NavbarBase
-                        marginBottom: "12px",
+                        mb: "12px",
+                        px: "24px",
+                        "@media (width < 720px)": { px: "4px" },
                     }}
                 >
                     {barMode == "hidden-albums" ? (
@@ -970,7 +968,7 @@ const Page: React.FC = () => {
                             }}
                         />
                     )}
-                </NavbarBase>
+                </NavbarBaseNormalFlow>
                 {isOffline && <OfflineMessage />}
 
                 <GalleryBarAndListHeader

web/packages/base/components/Navbar.tsx

@@ -1,5 +1,5 @@
 import { EnteLogo } from "@/base/components/EnteLogo";
-import { CenteredFlex, FlexWrapper } from "@ente/shared/components/Container";
+import { FlexWrapper } from "@ente/shared/components/Container";
 import { styled } from "@mui/material";
 import React from "react";
 
@@ -8,7 +8,9 @@ import React from "react";
  *
  * Usually this area contains the App's main navigation bar ({@link AppNavbar}),
  * but depending on the context it can also show the {@link SelectionBar}.
- * */
+ *
+ * TODO: Deprecated. Use NavbarBaseNormalFlow instead.
+ */
 export const NavbarBase = styled(FlexWrapper)(
     ({ theme }) => `
     min-height: 64px;
@@ -16,7 +18,7 @@ export const NavbarBase = styled(FlexWrapper)(
     top: 0;
     left: 0;
     z-index: 10;
-    border-bottom: 1px solid ${theme.vars.palette.stroke.fainter};
+    border-bottom: 1px solid ${theme.vars.palette.divider};
     background-color: ${theme.vars.palette.background.default};
     margin-bottom: 16px;
     padding: 0 24px;
@@ -26,24 +28,13 @@ export const NavbarBase = styled(FlexWrapper)(
 `,
 );
 
-// TODO: Prune
-export const AppNavbar: React.FC = () => {
-    return (
-        <NavbarBase>
-            <CenteredFlex>
-                <EnteLogo />
-            </CenteredFlex>
-        </NavbarBase>
-    );
-};
-
 export const NavbarBaseNormalFlow = styled("div")(
     ({ theme }) => `
     flex: 0 0 64px;
     display: flex;
     justify-content: center;
     align-items: center;
-    border-bottom: 1px solid ${theme.vars.palette.stroke.fainter};
+    border-bottom: 1px solid ${theme.vars.palette.divider};
 `,
 );
 

web/packages/base/components/utils/theme.ts

@@ -228,7 +228,7 @@ const _colors = {
             base: "#fff",
             muted: "rgba(255 255 255 / 0.24)",
             faint: "rgba(255 255 255 / 0.16)",
-            fainter: "rgba(255 255 255 / 0.10)",
+            fainter: "rgba(255 255 255 / 0.12)",
         },
         boxShadow: {
             paper: "0px 2px 12px rgba(0 0 0 / 0.75)",