diff --git a/src/features/community/titleSearch/TitleSearch.tsx b/src/features/community/titleSearch/TitleSearch.tsx
index 5b42ddf7cc..d84e37b449 100644
--- a/src/features/community/titleSearch/TitleSearch.tsx
+++ b/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 (
<>
-
+
-
+
setSearching(false)}>
@@ -119,11 +124,11 @@ export default function TitleSearch({ name, children }: TitleSearchProps) {
return (
<>
-
+
- {name}
+ {name}
-
+
{children}
>
);
diff --git a/src/features/shared/AppTitle.tsx b/src/features/shared/AppTitle.tsx
new file mode 100644
index 0000000000..d5d2b81860
--- /dev/null
+++ b/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 {
+ /**
+ * 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(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 (
+
+ );
+}