Message Requests: Add new "Report spam and block" button

ts/components/Modal.tsx

@@ -9,6 +9,7 @@ import { LocalizerType } from '../types/Util';
 import { ModalHost } from './ModalHost';
 import { Theme } from '../util/theme';
 import { getClassNamesFor } from '../util/getClassNamesFor';
+import { useHasWrapped } from '../util/hooks';
 
 type PropsType = {
   children: ReactNode;
@@ -85,19 +86,29 @@ export function Modal({
   );
 }
 
-Modal.ButtonFooter = ({
+Modal.ButtonFooter = function ButtonFooter({
   children,
   moduleClassName,
 }: Readonly<{
   children: ReactNode;
   moduleClassName?: string;
-}>): ReactElement => (
-  <div
-    className={getClassNamesFor(
-      BASE_CLASS_NAME,
-      moduleClassName
-    )('__button-footer')}
-  >
-    {children}
-  </div>
-);
+}>): ReactElement {
+  const [ref, hasWrapped] = useHasWrapped<HTMLDivElement>();
+
+  const className = getClassNamesFor(
+    BASE_CLASS_NAME,
+    moduleClassName
+  )('__button-footer');
+
+  return (
+    <div
+      className={classNames(
+        className,
+        hasWrapped ? `${className}--one-button-per-line` : undefined
+      )}
+      ref={ref}
+    >
+      {children}
+    </div>
+  );
+};