fix(mobile): keep header titles centered when the header buttons change

The header measured its buttons once to center the title, so after signing
in or rebuilding the database, when the Home actions appeared later, the
title sat off center until the tab was switched. It now re-measures them on
every layout change.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/mobile/src/components/layouts/header/NavigationHeader.tsx

@@ -274,6 +274,14 @@ export const InternalNavigationHeader = ({
       setRightWidth(width)
     })
   }, [rightRef])
+  // The title is centered with the button widths, which can change after the first measure, e.g.
+  // the timeline actions only show once the user is known to be signed in
+  const onLeftLayout = useCallback((e: LayoutChangeEvent) => {
+    setLeftWidth(e.nativeEvent.layout.width)
+  }, [])
+  const onRightLayout = useCallback((e: LayoutChangeEvent) => {
+    setRightWidth(e.nativeEvent.layout.width)
+  }, [])
 
   return (
     <Animated.View
@@ -307,6 +315,7 @@ export const InternalNavigationHeader = ({
         {/* Left */}
         <View
           ref={leftRef}
+          onLayout={onLeftLayout}
           className="flex min-w-6 shrink-0 flex-row items-center justify-start"
           pointerEvents={"box-none"}
         >
@@ -355,6 +364,7 @@ export const InternalNavigationHeader = ({
         {/* Right */}
         <View
           ref={rightRef}
+          onLayout={onRightLayout}
           className="flex min-w-6 shrink-0 flex-row items-center justify-end"
           pointerEvents={"box-none"}
         >