diff --git a/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx b/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx
index 639b5aede7..288565cf7b 100644
--- a/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx
+++ b/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx
@@ -3,11 +3,14 @@ import { createContext } from "preact";
import { useContext } from "preact/hooks";
import FNote from "../../entities/fnote";
+import utils from "../../services/utils";
import ActionButton, { ActionButtonProps } from "../react/ActionButton";
import Dropdown, { DropdownProps } from "../react/Dropdown";
import { useNoteLabel, useNoteProperty } from "../react/hooks";
import Icon from "../react/Icon";
+const cachedIsMobile = utils.isMobile();
+
export const LaunchBarContext = createContext<{
isHorizontalLayout: boolean;
}>({
@@ -26,7 +29,7 @@ export function LaunchBarActionButton({ className, ...props }: Omit
);
@@ -34,6 +37,7 @@ export function LaunchBarActionButton({ className, ...props }: Omit & { icon: string }) {
const { isHorizontalLayout } = useContext(LaunchBarContext);
+ const titlePosition = getTitlePosition(isHorizontalLayout);
return (
}
- titlePosition={isHorizontalLayout ? "bottom" : "right"}
+ titlePosition={titlePosition}
titleOptions={{ animation: false }}
dropdownOptions={{
...dropdownOptions,
popperConfig: {
- placement: isHorizontalLayout ? "bottom" : "right"
+ placement: titlePosition
}
}}
mobileBackdrop
@@ -67,3 +71,10 @@ export function useLauncherIconAndTitle(note: FNote) {
title: title ?? ""
};
}
+
+function getTitlePosition(isHorizontalLayout: boolean) {
+ if (cachedIsMobile) {
+ return "top";
+ }
+ return isHorizontalLayout ? "bottom" : "right";
+}