Fix community page title cut off when viewing moderated community

src/features/community/titleSearch/TitleSearch.tsx

@@ -5,7 +5,7 @@ import { TitleSearchContext } from "./TitleSearchProvider";
 import { styled } from "@linaria/react";
 import { isIosTheme } from "../../../helpers/device";
 import { findCurrentPage } from "../../../helpers/ionic";
-import AppTitle from "../../shared/AppTitle";
+import AppTitle, { AppTitleHandle } from "../../shared/AppTitle";
 
 const TitleContents = styled.span`
   display: inline-flex;
@@ -65,9 +65,11 @@ export function openTitleSearch() {
 interface TitleSearchProps {
   name: string;
   children: React.ReactNode;
+
+  ref?: React.RefObject<AppTitleHandle>;
 }
 
-export default function TitleSearch({ name, children }: TitleSearchProps) {
+export default function TitleSearch({ name, children, ref }: TitleSearchProps) {
   const { setSearch, searching, setSearching, onSubmit } =
     useContext(TitleSearchContext);
   const searchRef = useRef<HTMLInputElement>(null);
@@ -93,7 +95,7 @@ export default function TitleSearch({ name, children }: TitleSearchProps) {
   if (searching) {
     return (
       <>
-        <AppTitle>
+        <AppTitle appRef={ref}>
           <StyledInput
             ref={searchRef}
             placeholder="Community..."
@@ -124,7 +126,7 @@ export default function TitleSearch({ name, children }: TitleSearchProps) {
 
   return (
     <>
-      <AppTitle fullPadding={75}>
+      <AppTitle fullPadding={75} appRef={ref}>
         <TitleContents ref={titleRef} className={TITLE_CLASS}>
           <span>{name}</span> <DropdownIcon icon={chevronDown} />
         </TitleContents>

src/features/shared/AppTitle.tsx

@@ -1,40 +1,65 @@
 import { IonTitle } from "@ionic/react";
-import { ComponentProps, useEffect, useRef, useState } from "react";
+import {
+  ComponentProps,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
 import { isIosTheme } from "../../helpers/device";
 
+export interface AppTitleHandle {
+  updateLayout: () => void;
+}
+
 interface AppTitleProps extends ComponentProps<typeof IonTitle> {
   /**
    * Padding applied to titles of normal headers with up to
    * two icon buttons on right side of title
    */
   fullPadding?: number;
+
+  appRef?: React.RefObject<AppTitleHandle>;
 }
 
 export default isIosTheme() ? IosAppTitle : IonTitle;
 
-function IosAppTitle({ fullPadding, ...props }: AppTitleProps) {
-  const ref = useRef<HTMLIonTitleElement>(null);
+function IosAppTitle({ fullPadding, appRef, ...props }: AppTitleProps) {
+  const titleRef = useRef<HTMLIonTitleElement>(null);
   const [smaller, setSmaller] = useState(false);
 
-  useEffect(() => {
-    queueMicrotask(() => {
-      const buttons = ref.current
-        ?.closest("ion-header")
-        ?.querySelector('ion-buttons[slot="end"]')?.children.length;
+  const updateLayout = useCallback(() => {
+    const buttons = titleRef.current
+      ?.closest("ion-header")
+      ?.querySelector('ion-buttons[slot="end"]')?.children.length;
 
-      if (!buttons) {
-        setSmaller(false);
-        return;
-      }
+    if (!buttons) {
+      setSmaller(false);
+      return;
+    }
 
-      setSmaller(buttons >= 3);
+    setSmaller(buttons >= 3);
+  }, []);
+
+  useEffect(() => {
+    queueMicrotask(() => {
+      updateLayout();
     });
   });
 
+  useImperativeHandle(
+    appRef,
+    () => ({
+      updateLayout,
+    }),
+    [updateLayout],
+  );
+
   return (
     <IonTitle
       {...props}
-      ref={ref}
+      ref={titleRef}
       style={{ paddingInline: smaller ? "110px" : `${fullPadding ?? 90}px` }}
     />
   );

src/routes/pages/shared/CommunityPage.tsx

@@ -13,6 +13,7 @@ import {
   createContext,
   memo,
   useCallback,
+  useEffect,
   useMemo,
   useRef,
   useState,
@@ -48,6 +49,7 @@ import PostAppearanceProvider, {
 import { CenteredSpinner } from "../../../features/shared/CenteredSpinner";
 import useFeedUpdate from "../../../features/feed/useFeedUpdate";
 import DocumentTitle from "../../../features/shared/DocumentTitle";
+import { AppTitleHandle } from "../../../features/shared/AppTitle";
 
 const StyledFeedContent = styled(FeedContent)`
   .ios & {
@@ -149,6 +151,8 @@ const CommunityPageContent = memo(function CommunityPageContent({
   const router = useOptimizedIonRouter();
   const getRandomCommunity = useGetRandomCommunity();
 
+  const appTitleRef = useRef<AppTitleHandle>(null);
+
   const searchOpen = searchQuery || _searchOpen;
 
   const client = useClient();
@@ -204,6 +208,11 @@ const CommunityPageContent = memo(function CommunityPageContent({
 
   const feedSearchContextValue = useMemo(() => ({ setScrolledPastSearch }), []);
 
+  // Force update when loaded, because mod button may appear (and title may need to shrink)
+  useEffect(() => {
+    appTitleRef.current?.updateLayout();
+  }, [communityView]);
+
   const header = useMemo(
     () =>
       !searchOpen ? (
@@ -283,7 +292,7 @@ const CommunityPageContent = memo(function CommunityPageContent({
                         {communityView.community.title}
                       </DocumentTitle>
                     )}
-                    <TitleSearch name={community}>
+                    <TitleSearch name={community} ref={appTitleRef}>
                       <IonButtons slot="end">
                         <ModActions
                           community={communityView}