fix(client): global menu blur-behind not working

apps/client/src/widgets/buttons/global_menu.tsx

@@ -34,9 +34,10 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
             text={<>
                 {isVerticalLayout && <VerticalLayoutIcon />}
                 {isUpdateAvailable && <div class="global-menu-button-update-available">
-                    <span className="bx bx-sync global-menu-button-update-available-button" title={t("update_available.update_available")}></span>    
+                    <span className="bx bx-sync global-menu-button-update-available-button" title={t("update_available.update_available")}></span>
                 </div>}
             </>}
+            noDropdownListStyle
         >
 
             <MenuItem command="openNewWindow" icon="bx bx-window-open" text={t("global_menu.open_new_window")} />
@@ -47,8 +48,8 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
             <ToggleWindowOnTop />
             <KeyboardActionMenuItem command="toggleZenMode" icon="bx bxs-yin-yang" text={t("global_menu.toggle-zen-mode")} />
             <FormDropdownDivider />
-            
+
-            <SwitchToOptions />        
+            <SwitchToOptions />
             <MenuItem command="showLaunchBarSubtree" icon={`bx ${isMobile() ? "bx-mobile" : "bx-sidebar"}`} text={t("global_menu.configure_launchbar")} />
             <AdvancedMenu />
             <MenuItem command="showOptions" icon="bx bx-cog" text={t("global_menu.options")} />
@@ -117,7 +118,7 @@ function KeyboardActionMenuItem({ text, command, ...props }: MenuItemProps<Keybo
     />
 }
 
-function VerticalLayoutIcon() {    
+function VerticalLayoutIcon() {
     const logoRef = useRef<SVGSVGElement>(null);
     useStaticTooltip(logoRef);
 
@@ -140,7 +141,7 @@ function VerticalLayoutIcon() {
     )
 }
 
-function ZoomControls({ parentComponent }: { parentComponent?: Component | null }) {   
+function ZoomControls({ parentComponent }: { parentComponent?: Component | null }) {
     const [ zoomLevel, setZoomLevel ] = useState(100);
 
     function updateZoomState() {
@@ -169,7 +170,7 @@ function ZoomControls({ parentComponent }: { parentComponent?: Component | null
             >{children}</a>
         )
     }
-    
+
     return isElectron() ? (
         <FormListItem
             icon="bx bx-empty"
@@ -199,7 +200,7 @@ function ToggleWindowOnTop() {
         <MenuItem
             icon="bx bx-pin"
             text={t("title_bar_buttons.window-on-top")}
-            active={isAlwaysOnTop}            
+            active={isAlwaysOnTop}
             command={() => {
                 const newState = !isAlwaysOnTop;
                 focusedWindow?.setAlwaysOnTop(newState);
@@ -213,8 +214,8 @@ function useTriliumUpdateStatus() {
     const [ latestVersion, setLatestVersion ] = useState<string>();
     const [ checkForUpdates ] = useTriliumOptionBool("checkForUpdates");
     const isUpdateAvailable = utils.isUpdateAvailable(latestVersion, glob.triliumVersion);
-    
+
-    async function updateVersionStatus() {    
+    async function updateVersionStatus() {
         const RELEASES_API_URL = "https://api.github.com/repos/TriliumNext/Trilium/releases/latest";
 
         const resp = await fetch(RELEASES_API_URL);
@@ -236,4 +237,4 @@ function useTriliumUpdateStatus() {
     }, [ checkForUpdates ]);
 
     return { isUpdateAvailable, latestVersion };
-}
+}

apps/client/src/widgets/react/Dropdown.tsx

@@ -16,12 +16,13 @@ export interface DropdownProps {
     /** If set to true, then the dropdown button will be considered an icon action (without normal border and sized for icons only). */
     iconAction?: boolean;
     noSelectButtonStyle?: boolean;
+    noDropdownListStyle?: boolean;
     disabled?: boolean;
     text?: ComponentChildren;
     forceShown?: boolean;
 }
 
-export default function Dropdown({ className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, forceShown }: DropdownProps) {
+export default function Dropdown({ className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown }: DropdownProps) {
     const dropdownRef = useRef<HTMLDivElement | null>(null);
     const triggerRef = useRef<HTMLButtonElement | null>(null);
 
@@ -29,7 +30,7 @@ export default function Dropdown({ className, buttonClassName, isStatic, childre
 
     useEffect(() => {
         if (!triggerRef.current) return;
-        
+
         const dropdown = BootstrapDropdown.getOrCreateInstance(triggerRef.current);
         if (forceShown) {
             dropdown.show();
@@ -48,11 +49,11 @@ export default function Dropdown({ className, buttonClassName, isStatic, childre
 
     useEffect(() => {
         if (!dropdownRef.current) return;
-        
+
         const $dropdown = $(dropdownRef.current);
         $dropdown.on("show.bs.dropdown", onShown);
         $dropdown.on("hide.bs.dropdown", onHidden);
-        
+
         // Add proper cleanup
         return () => {
             $dropdown.off("show.bs.dropdown", onShown);
@@ -81,7 +82,7 @@ export default function Dropdown({ className, buttonClassName, isStatic, childre
             </button>
 
             <ul
-                class={`dropdown-menu ${isStatic ? "static" : ""} ${dropdownContainerClassName ?? ""} tn-dropdown-list`}
+                class={`dropdown-menu ${isStatic ? "static" : ""} ${dropdownContainerClassName ?? ""} ${!noDropdownListStyle ? "tn-dropdown-list" : ""}`}
                 style={dropdownContainerStyle}
                 aria-labelledby={ariaId}
             >
@@ -89,4 +90,4 @@ export default function Dropdown({ className, buttonClassName, isStatic, childre
             </ul>
         </div>
     )
-}
+}