fix: Icon misalignment in document restore menu

app/components/ContextMenu/MenuItem.tsx

@@ -1,5 +1,6 @@
 import { LocationDescriptor } from "history";
 import { CheckmarkIcon } from "outline-icons";
+import { ellipsis } from "polished";
 import * as React from "react";
 import { mergeRefs } from "react-merge-refs";
 import { MenuItem as BaseMenuItem } from "reakit/Menu";
@@ -76,7 +77,7 @@ const MenuItem = (
             </MenuIconWrapper>
           )}
           {icon && <MenuIconWrapper aria-hidden>{icon}</MenuIconWrapper>}
-          {children}
+          <Title>{children}</Title>
         </MenuAnchor>
       );
     },
@@ -101,6 +102,10 @@ const Spacer = styled.svg`
   flex-shrink: 0;
 `;
 
+const Title = styled.div`
+  ${ellipsis()}
+`;
+
 type MenuAnchorProps = {
   level?: number;
   disabled?: boolean;
@@ -129,10 +134,6 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
   white-space: nowrap;
   position: relative;
 
-  svg:not(:last-child) {
-    margin-right: 4px;
-  }
-
   svg {
     flex-shrink: 0;
     opacity: ${(props) => (props.disabled ? ".5" : 1)};
@@ -154,6 +155,7 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
       cursor: var(--pointer);
 
       svg {
+        color: ${props.theme.accentText};
         fill: ${props.theme.accentText};
       }
     }