Fix "in contacts" tooltip exceeding desired boundary

See [#4907][0].

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

ts/components/InContactsIcon.tsx

@@ -9,15 +9,26 @@ import { LocalizerType } from '../types/Util';
 
 type PropsType = {
   className?: string;
+  tooltipContainerRef?: React.RefObject<HTMLElement>;
   i18n: LocalizerType;
 };
 
 export const InContactsIcon = (props: PropsType): JSX.Element => {
-  const { className, i18n } = props;
+  const { className, i18n, tooltipContainerRef } = props;
 
   /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
   return (
-    <Tooltip content={i18n('contactInAddressBook')}>
+    <Tooltip
+      content={i18n('contactInAddressBook')}
+      popperModifiers={[
+        {
+          name: 'preventOverflow',
+          options: {
+            boundary: tooltipContainerRef?.current || undefined,
+          },
+        },
+      ]}
+    >
       <span
         aria-label={i18n('contactInAddressBook')}
         className={classNames('module-in-contacts-icon__icon', className)}

ts/components/Tooltip.stories.tsx

@@ -81,6 +81,26 @@ story.add('Sticky', () => (
   </Tooltip>
 ));
 
+story.add('With Applied Popper Modifiers', () => {
+  return (
+    <Tooltip
+      {...createProps({
+        direction: TooltipPlacement.Bottom,
+      })}
+      popperModifiers={[
+        {
+          name: 'offset',
+          options: {
+            offset: [80, 80],
+          },
+        },
+      ]}
+    >
+      {Trigger}
+    </Tooltip>
+  );
+});
+
 story.add('Dark Theme', () => (
   <Tooltip
     {...createProps({

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

ts/components/conversation/ConversationHeader.tsx

@@ -113,12 +113,15 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private menuTriggerRef: React.RefObject<any>;
 
+  public headerRef: React.RefObject<HTMLDivElement>;
+
   public constructor(props: PropsType) {
     super(props);
 
     this.state = { isNarrow: false, modalState: ModalState.NothingOpen };
 
     this.menuTriggerRef = React.createRef();
+    this.headerRef = React.createRef();
     this.showMenuBound = this.showMenu.bind(this);
   }
 
@@ -163,6 +166,7 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
           <InContactsIcon
             className="module-ConversationHeader__header__info__title__in-contacts-icon"
             i18n={i18n}
+            tooltipContainerRef={this.headerRef}
           />
         ) : null}
       </div>
@@ -596,7 +600,11 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
       );
     }
 
-    return <div className="module-ConversationHeader__header">{contents}</div>;
+    return (
+      <div className="module-ConversationHeader__header" ref={this.headerRef}>
+        {contents}
+      </div>
+    );
   }
 
   public render(): ReactNode {

ts/util/lint/exceptions.json

@@ -12792,6 +12792,22 @@
     "updated": "2020-05-20T20:10:43.540Z",
     "reasonDetail": "Used to reference popup menu"
   },
+  {
+    "rule": "React-createRef",
+    "path": "ts/components/conversation/ConversationHeader.js",
+    "line": "        this.headerRef = react_1.default.createRef();",
+    "reasonCategory": "usageTrusted",
+    "updated": "2021-01-18T22:24:05.937Z",
+    "reasonDetail": "Used to reference popup menu boundaries element"
+  },
+  {
+    "rule": "React-createRef",
+    "path": "ts/components/conversation/ConversationHeader.tsx",
+    "line": "    this.headerRef = React.createRef();",
+    "reasonCategory": "usageTrusted",
+    "updated": "2021-01-18T22:24:05.937Z",
+    "reasonDetail": "Used to reference popup menu boundaries element"
+  },
   {
     "rule": "React-useRef",
     "path": "ts/components/conversation/ConversationHero.tsx",