fix: Icon misalignment in document restore menu

app/menus/DocumentMenu.tsx

@@ -8,7 +8,7 @@ import { VisuallyHidden } from "reakit/VisuallyHidden";
 import { toast } from "sonner";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { s, ellipsis } from "@shared/styles";
+import { s } from "@shared/styles";
 import { UserPreference } from "@shared/types";
 import { getEventFiles } from "@shared/utils/files";
 import Document from "~/models/Document";
@@ -16,7 +16,6 @@ import ContextMenu from "~/components/ContextMenu";
 import OverflowMenuButton from "~/components/ContextMenu/OverflowMenuButton";
 import Separator from "~/components/ContextMenu/Separator";
 import Template from "~/components/ContextMenu/Template";
-import Flex from "~/components/Flex";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
 import Switch from "~/components/Switch";
 import { actionToMenuItem } from "~/actions";
@@ -146,12 +145,8 @@ function DocumentMenu({
               handleRestore(ev, {
                 collectionId: collection.id,
               }),
-            title: (
-              <Flex align="center">
-                <CollectionIcon collection={collection} />
-                <CollectionName>{collection.name}</CollectionName>
-              </Flex>
-            ),
+            icon: <CollectionIcon collection={collection} />,
+            title: collection.name,
           });
         }
 
@@ -383,8 +378,4 @@ const Style = styled.div`
   `};
 `;
 
-const CollectionName = styled.div`
-  ${ellipsis()}
-`;
-
 export default observer(DocumentMenu);

app/menus/NewChildDocumentMenu.tsx

@@ -34,34 +34,30 @@ function NewChildDocumentMenu({ document, label }: Props) {
             {
               type: "route",
               title: (
-                <span>
-                  <Trans
-                    defaults="New document in <em>{{ collectionName }}</em>"
-                    values={{
-                      collectionName,
-                    }}
-                    components={{
-                      em: <strong />,
-                    }}
-                  />
-                </span>
+                <Trans
+                  defaults="New document in <em>{{ collectionName }}</em>"
+                  values={{
+                    collectionName,
+                  }}
+                  components={{
+                    em: <strong />,
+                  }}
+                />
               ),
               to: newDocumentPath(document.collectionId),
             },
             {
               type: "route",
               title: (
-                <span>
-                  <Trans
-                    defaults="New document in <em>{{ collectionName }}</em>"
-                    values={{
-                      collectionName: document.title,
-                    }}
-                    components={{
-                      em: <strong />,
-                    }}
-                  />
-                </span>
+                <Trans
+                  defaults="New document in <em>{{ collectionName }}</em>"
+                  values={{
+                    collectionName: document.title,
+                  }}
+                  components={{
+                    em: <strong />,
+                  }}
+                />
               ),
               to: newDocumentPath(document.collectionId, {
                 parentDocumentId: document.id,

app/menus/NewTemplateMenu.tsx

@@ -3,8 +3,6 @@ import { PlusIcon } 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 { ellipsis } from "@shared/styles";
 import Button from "~/components/Button";
 import ContextMenu from "~/components/ContextMenu";
 import Header from "~/components/ContextMenu/Header";
@@ -39,7 +37,7 @@ function NewTemplateMenu() {
           filtered.push({
             type: "route",
             to: newTemplatePath(collection.id),
-            title: <CollectionName>{collection.name}</CollectionName>,
+            title: collection.name,
             icon: <CollectionIcon collection={collection} />,
           });
         }
@@ -70,8 +68,4 @@ function NewTemplateMenu() {
   );
 }
 
-const CollectionName = styled.div`
-  ${ellipsis()}
-`;
-
 export default observer(NewTemplateMenu);