Fix modded long community name overflow (#1558)

src/features/community/titleSearch/TitleSearch.tsx

@@ -1,10 +1,11 @@
-import { IonButton, IonButtons, IonIcon, IonTitle } from "@ionic/react";
+import { IonButton, IonButtons, IonIcon } from "@ionic/react";
 import { chevronDown, close } from "ionicons/icons";
 import React, { useContext, useEffect, useRef } from "react";
 import { TitleSearchContext } from "./TitleSearchProvider";
 import { styled } from "@linaria/react";
 import { isIosTheme } from "../../../helpers/device";
 import { findCurrentPage } from "../../../helpers/ionic";
+import AppTitle from "../../shared/AppTitle";
 
 const TitleContents = styled.span`
   display: inline-flex;
@@ -48,6 +49,10 @@ const StyledInput = styled.input`
   --background: none;
 `;
 
+const DropdownIcon = styled(IonIcon)`
+  flex-shrink: 0;
+`;
+
 const TITLE_CLASS = "title-search-opener";
 
 export function openTitleSearch() {
@@ -88,7 +93,7 @@ export default function TitleSearch({ name, children }: TitleSearchProps) {
   if (searching) {
     return (
       <>
-        <IonTitle>
+        <AppTitle>
           <StyledInput
             ref={searchRef}
             placeholder="Community..."
@@ -102,7 +107,7 @@ export default function TitleSearch({ name, children }: TitleSearchProps) {
             }}
             enterKeyHint="go"
           />
-        </IonTitle>
+        </AppTitle>
 
         <IonButtons slot="end">
           <IonButton onClick={() => setSearching(false)}>
@@ -119,11 +124,11 @@ export default function TitleSearch({ name, children }: TitleSearchProps) {
 
   return (
     <>
-      <IonTitle>
+      <AppTitle fullPadding={75}>
         <TitleContents ref={titleRef} className={TITLE_CLASS}>
-          <span>{name}</span> <IonIcon icon={chevronDown} />
+          <span>{name}</span> <DropdownIcon icon={chevronDown} />
         </TitleContents>
-      </IonTitle>
+      </AppTitle>
       {children}
     </>
   );

src/features/shared/AppTitle.tsx

@@ -0,0 +1,41 @@
+import { IonTitle } from "@ionic/react";
+import { ComponentProps, useEffect, useRef, useState } from "react";
+import { isIosTheme } from "../../helpers/device";
+
+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;
+}
+
+export default isIosTheme() ? IosAppTitle : IonTitle;
+
+function IosAppTitle({ fullPadding, ...props }: AppTitleProps) {
+  const ref = useRef<HTMLIonTitleElement>(null);
+  const [smaller, setSmaller] = useState(false);
+
+  useEffect(() => {
+    queueMicrotask(() => {
+      const buttons = ref.current
+        ?.closest("ion-header")
+        ?.querySelector('ion-buttons[slot="end"]')?.children.length;
+
+      if (!buttons) {
+        setSmaller(false);
+        return;
+      }
+
+      setSmaller(buttons >= 3);
+    });
+  });
+
+  return (
+    <IonTitle
+      {...props}
+      ref={ref}
+      style={{ paddingInline: smaller ? "110px" : `${fullPadding ?? 90}px` }}
+    />
+  );
+}