fix: title tooltip alignment (#2215)

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/components/filters/FilterSection.tsx

@@ -7,7 +7,6 @@ import { AppContext } from '../../context/App';
 import type { FilterSettingsState, FilterValue } from '../../types';
 import type { Filter } from '../../utils/notifications/filters';
 import { Checkbox } from '../fields/Checkbox';
-import { Tooltip } from '../fields/Tooltip';
 import { Title } from '../primitives/Title';
 import { RequiresDetailedNotificationWarning } from './RequiresDetailedNotificationsWarning';
 
@@ -34,22 +33,21 @@ export const FilterSection = <T extends FilterValue>({
 
   return (
     <fieldset id={id}>
-      <Stack align="baseline" direction="horizontal" gap="condensed">
-        <Title icon={icon}>{title}</Title>
-        {tooltip && (
-          <Tooltip
-            name={`tooltip-${id}`}
-            tooltip={
-              <Stack direction="vertical" gap="condensed">
-                {tooltip}
-                {filter.requiresDetailsNotifications && (
-                  <RequiresDetailedNotificationWarning />
-                )}
-              </Stack>
-            }
-          />
-        )}
-      </Stack>
+      <Title
+        icon={icon}
+        tooltip={
+          tooltip && (
+            <>
+              {tooltip}
+              {filter.requiresDetailsNotifications && (
+                <RequiresDetailedNotificationWarning />
+              )}
+            </>
+          )
+        }
+      >
+        {title}
+      </Title>
 
       <Stack
         direction={layout}

src/renderer/components/filters/OrganizationFilter.tsx

@@ -13,7 +13,6 @@ import {
   hasExcludeOrganizationFilters,
   hasIncludeOrganizationFilters,
 } from '../../utils/notifications/filters/organizations';
-import { Tooltip } from '../fields/Tooltip';
 import { Title } from '../primitives/Title';
 
 type InputToken = {
@@ -135,17 +134,17 @@ export const OrganizationFilter: FC = () => {
 
   return (
     <fieldset id="filter-organizations">
-      <Stack align="baseline" direction="horizontal" gap="condensed">
-        <Title icon={OrganizationIcon}>Organizations</Title>
-        <Tooltip
-          name="tooltip-filter-organizations"
-          tooltip={
-            <Stack direction="vertical" gap="condensed">
-              <Text>Filter notifications by organization.</Text>
-            </Stack>
-          }
-        />
-      </Stack>
+      <Title
+        icon={OrganizationIcon}
+        tooltip={
+          <Stack direction="vertical" gap="condensed">
+            <Text>Filter notifications by organization.</Text>
+          </Stack>
+        }
+      >
+        Organizations
+      </Title>
+
       <Stack direction="vertical" gap="condensed">
         <Stack
           align="center"

src/renderer/components/filters/UserHandleFilter.tsx

@@ -13,7 +13,6 @@ import {
   hasExcludeHandleFilters,
   hasIncludeHandleFilters,
 } from '../../utils/notifications/filters/handles';
-import { Tooltip } from '../fields/Tooltip';
 import { Title } from '../primitives/Title';
 import { RequiresDetailedNotificationWarning } from './RequiresDetailedNotificationsWarning';
 
@@ -121,18 +120,18 @@ export const UserHandleFilter: FC = () => {
 
   return (
     <fieldset id="filter-user-handles">
-      <Stack align="baseline" direction="horizontal" gap="condensed">
-        <Title icon={MentionIcon}>Handles</Title>
-        <Tooltip
-          name="tooltip-filter-handles"
-          tooltip={
-            <Stack direction="vertical" gap="condensed">
-              <Text>Filter notifications by user handle.</Text>
-              <RequiresDetailedNotificationWarning />
-            </Stack>
-          }
-        />
-      </Stack>
+      <Title
+        icon={MentionIcon}
+        tooltip={
+          <Stack direction="vertical" gap="condensed">
+            <Text>Filter notifications by user handle.</Text>
+            <RequiresDetailedNotificationWarning />
+          </Stack>
+        }
+      >
+        Handles
+      </Title>
+
       <Stack direction="vertical" gap="condensed">
         <Stack
           align="center"