Fix "in contacts" tooltip exceeding desired boundary

See [#4907][0].

[0]: https://github.com/signalapp/Signal-Desktop/pull/4907

ts/components/Tooltip.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { noop } from 'lodash';
 import { Manager, Reference, Popper } from 'react-popper';
+import type { StrictModifiers } from '@popperjs/core';
 import { Theme, themeClassName } from '../util/theme';
 import { refMerger } from '../util/refMerger';
 import { offsetDistanceModifier } from '../util/popperUtil';
@@ -70,6 +71,7 @@ export type PropsType = {
   content: string | JSX.Element;
   className?: string;
   direction?: TooltipPlacement;
+  popperModifiers?: Array<StrictModifiers>;
   sticky?: boolean;
   theme?: Theme;
 };
@@ -81,6 +83,7 @@ export const Tooltip: React.FC<PropsType> = ({
   direction,
   sticky,
   theme,
+  popperModifiers = [],
 }) => {
   const [isHovering, setIsHovering] = React.useState(false);
 
@@ -99,7 +102,10 @@ export const Tooltip: React.FC<PropsType> = ({
           </TooltipEventWrapper>
         )}
       </Reference>
-      <Popper placement={direction} modifiers={[offsetDistanceModifier(12)]}>
+      <Popper
+        placement={direction}
+        modifiers={[offsetDistanceModifier(12), ...popperModifiers]}
+      >
         {({ arrowProps, placement, ref, style }) =>
           showTooltip && (
             <div