fixed imwald header overwriting page header

src/PageManager.tsx

@@ -353,6 +353,11 @@ function MainContentArea({
         {primaryNoteView ? (
           // Show note view with back button
           <div className="flex flex-col h-full w-full">
+            <div className="flex justify-center py-1 border-b">
+              <span className="text-green-600 dark:text-green-500 font-semibold text-sm">
+                Imwald
+              </span>
+            </div>
             <div className="flex gap-1 p-1 items-center justify-between font-semibold border-b">
               <div className="flex items-center flex-1 w-0">
                 <Button
@@ -369,7 +374,7 @@ function MainContentArea({
                 </Button>
               </div>
               <div className="flex-1 flex justify-center">
-                <div className="text-lg font-semibold text-green-500">
+                <div className="text-lg font-semibold">
                   {getPageTitle(primaryViewType, window.location.pathname)}
                 </div>
               </div>
@@ -732,6 +737,11 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
             {primaryNoteView ? (
               // Show primary note view with back button on mobile
               <div className="flex flex-col h-full w-full">
+                <div className="flex justify-center py-1 border-b">
+                  <span className="text-green-600 dark:text-green-500 font-semibold text-sm">
+                    Imwald
+                  </span>
+                </div>
                 <div className="flex gap-1 p-1 items-center justify-between font-semibold border-b">
                   <div className="flex items-center flex-1 w-0">
                     <Button

src/layouts/SecondaryPageLayout/index.tsx

@@ -66,13 +66,20 @@ const SecondaryPageLayout = forwardRef(
             }}
           >
             {title && (
-              <SecondaryPageTitlebar
+              <>
-                title={title}
+                <div className="flex justify-center py-1 border-b">
-                controls={controls}
+                  <span className="text-green-600 dark:text-green-500 font-semibold text-sm">
-                hideBackButton={hideBackButton}
+                    Imwald
-                hideBottomBorder={hideTitlebarBottomBorder}
+                  </span>
-                titlebar={titlebar}
+                </div>
-              />
+                <SecondaryPageTitlebar
+                  title={title}
+                  controls={controls}
+                  hideBackButton={hideBackButton}
+                  hideBottomBorder={hideTitlebarBottomBorder}
+                  titlebar={titlebar}
+                />
+              </>
             )}
             {children}
           </div>
@@ -85,13 +92,20 @@ const SecondaryPageLayout = forwardRef(
       <DeepBrowsingProvider active={currentIndex === index} scrollAreaRef={scrollAreaRef}>
         <div className="h-full flex flex-col">
           {title && (
-            <SecondaryPageTitlebar
+            <>
-              title={title}
+              <div className="flex justify-center py-1 border-b">
-              controls={controls}
+                <span className="text-green-600 dark:text-green-500 font-semibold text-sm">
-              hideBackButton={hideBackButton}
+                  Imwald
-              hideBottomBorder={hideTitlebarBottomBorder}
+                </span>
-              titlebar={titlebar}
+              </div>
-            />
+              <SecondaryPageTitlebar
+                title={title}
+                controls={controls}
+                hideBackButton={hideBackButton}
+                hideBottomBorder={hideTitlebarBottomBorder}
+                titlebar={titlebar}
+              />
+            </>
           )}
           <div className="flex-1" ref={scrollAreaRef}>
             {children}
@@ -119,8 +133,6 @@ export function SecondaryPageTitlebar({
   hideBottomBorder?: boolean
   titlebar?: React.ReactNode
 }): JSX.Element {
-  const { isSmallScreen } = useScreenSize()
-  
   if (titlebar) {
     return (
       <Titlebar className="p-1" hideBottomBorder={hideBottomBorder}>
@@ -136,29 +148,12 @@ export function SecondaryPageTitlebar({
       {hideBackButton ? (
         <div className="flex gap-2 items-center pl-3 w-fit truncate text-lg font-semibold">
           {title}
-          <span className="text-green-600 dark:text-green-500 font-semibold text-sm ml-2">
-            Im Wald 🌲
-          </span>
         </div>
       ) : (
         <div className="flex items-center flex-1 w-0">
           <BackButton>{title}</BackButton>
         </div>
       )}
-      {isSmallScreen && (
-        <div className="absolute left-1/2 transform -translate-x-1/2 z-10">
-          <span className="text-green-600 dark:text-green-500 font-semibold text-sm">
-            Im Wald 🌲
-          </span>
-        </div>
-      )}
-      {!isSmallScreen && !hideBackButton && (
-        <div className="absolute left-1/2 transform -translate-x-1/2 z-10 pointer-events-none">
-          <span className="text-green-600 dark:text-green-500 font-semibold text-sm">
-            Im Wald 🌲
-          </span>
-        </div>
-      )}
       <div className="flex-shrink-0">{controls}</div>
     </Titlebar>
   )