diff --git a/app/actions/definitions/settings.tsx b/app/actions/definitions/settings.tsx
index 432872807..9372b1b0e 100644
--- a/app/actions/definitions/settings.tsx
+++ b/app/actions/definitions/settings.tsx
@@ -36,7 +36,8 @@ export const changeToSystemTheme = createAction({
});
export const changeTheme = createAction({
- name: ({ t }) => t("Change theme"),
+ name: ({ t, isContextMenu }) =>
+ isContextMenu ? t("Appearance") : t("Change theme"),
placeholder: ({ t }) => t("Change theme to"),
icon: () =>
stores.ui.resolvedTheme === "light" ? : ,
diff --git a/app/components/ContextMenu/MenuItem.tsx b/app/components/ContextMenu/MenuItem.tsx
index 89538ed61..bc707a5d3 100644
--- a/app/components/ContextMenu/MenuItem.tsx
+++ b/app/components/ContextMenu/MenuItem.tsx
@@ -107,6 +107,7 @@ export const MenuAnchorCSS = css<{ level?: number; disabled?: boolean }>`
font-size: 16px;
cursor: default;
user-select: none;
+ white-space: nowrap;
svg:not(:last-child) {
margin-right: 4px;
diff --git a/app/components/ContextMenu/Template.tsx b/app/components/ContextMenu/Template.tsx
index 0997f3fd8..9c10a490b 100644
--- a/app/components/ContextMenu/Template.tsx
+++ b/app/components/ContextMenu/Template.tsx
@@ -7,7 +7,7 @@ import {
MenuButton,
MenuItem as BaseMenuItem,
} from "reakit/Menu";
-import styled from "styled-components";
+import styled, { useTheme } from "styled-components";
import Flex from "~/components/Flex";
import MenuIconWrapper from "~/components/MenuIconWrapper";
import { actionToMenuItem } from "~/actions";
@@ -46,16 +46,15 @@ const Submenu = React.forwardRef(
ref: React.LegacyRef
) => {
const { t } = useTranslation();
- const menu = useMenuState({
- modal: true,
- });
+ const theme = useTheme();
+ const menu = useMenuState();
return (
<>
{(props) => (
- {title}
+ {title}
)}