Wrap headings on mobile ToC (#8531)

* Truncate heading overflow on mobile ToC

* wrap

app/menus/TableOfContentsMenu.tsx

@@ -3,6 +3,7 @@ import { TableOfContentsIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { MenuButton, useMenuState } from "reakit/Menu";
+import styled from "styled-components";
 import Button from "~/components/Button";
 import ContextMenu from "~/components/ContextMenu";
 import Template from "~/components/ContextMenu/Template";
@@ -23,7 +24,6 @@ function TableOfContentsMenu() {
     Infinity
   );
 
-  // @ts-expect-error check
   const items: MenuItem[] = React.useMemo(() => {
     const i = [
       {
@@ -34,17 +34,20 @@ function TableOfContentsMenu() {
       ...headings.map((heading) => ({
         type: "link",
         href: `#${heading.id}`,
-        title: t(heading.title),
+        title: <HeadingWrapper>{t(heading.title)}</HeadingWrapper>,
         level: heading.level - minHeading,
       })),
-    ];
+    ] as MenuItem[];
 
     if (i.length === 1) {
       i.push({
         type: "link",
         href: "#",
-        title: t("Headings you add to the document will appear here"),
-        // @ts-expect-error check
+        title: (
+          <HeadingWrapper>
+            {t("Headings you add to the document will appear here")}
+          </HeadingWrapper>
+        ),
         disabled: true,
       });
     }
@@ -71,4 +74,10 @@ function TableOfContentsMenu() {
   );
 }
 
+const HeadingWrapper = styled.div`
+  max-width: 100%;
+  white-space: normal;
+  overflow-wrap: anywhere;
+`;
+
 export default observer(TableOfContentsMenu);