diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index 84276e9c4..f456d3332 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -415,7 +415,7 @@ body.desktop .tabulator-popup-container {
}
.dropdown-menu a:hover:not(.disabled),
-.dropdown-item:hover:not(.disabled, .dropdown-item-container),
+.dropdown-item:hover:not(.disabled, .dropdown-container-item),
.tabulator-menu-item:hover {
color: var(--hover-item-text-color) !important;
background-color: var(--hover-item-background-color) !important;
@@ -423,9 +423,9 @@ body.desktop .tabulator-popup-container {
cursor: pointer;
}
-.dropdown-item-container,
-.dropdown-item-container:hover,
-.dropdown-item-container:active {
+.dropdown-container-item,
+.dropdown-item.dropdown-container-item:hover,
+.dropdown-container-item:active {
background: transparent;
cursor: default;
}
diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css
index a1885a9a3..660c824d2 100644
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -295,6 +295,20 @@ body.mobile .dropdown-menu .dropdown-item.submenu-open .dropdown-toggle::after {
transform: rotate(270deg);
}
+/* Dropdown item button (used in zoom buttons in global menu) */
+
+li.dropdown-item a.dropdown-item-button {
+ border: unset;
+}
+
+li.dropdown-item a.dropdown-item-button.bx {
+ color: var(--menu-text-color) !important;
+}
+
+li.dropdown-item a.dropdown-item-button:focus-visible {
+ outline: 2px solid var(--input-focus-outline-color) !important;
+}
+
/*
* TOASTS
*/
diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css
index f40a4655a..f09b662b1 100644
--- a/apps/client/src/stylesheets/theme-next/shell.css
+++ b/apps/client/src/stylesheets/theme-next/shell.css
@@ -304,18 +304,6 @@ body.layout-horizontal > .horizontal {
color: var(--tooltip-foreground-color) !important;
}
-/*
- * Global menu
- */
-
- .global-menu div.zoom-buttons a {
- border: unset;
-}
-
-.global-menu div.zoom-buttons a.bx {
- color: var(--menu-text-color) !important;
-}
-
/*
* Calendar
*/
diff --git a/apps/client/src/widgets/buttons/global_menu.tsx b/apps/client/src/widgets/buttons/global_menu.tsx
index 67452774c..70e43887f 100644
--- a/apps/client/src/widgets/buttons/global_menu.tsx
+++ b/apps/client/src/widgets/buttons/global_menu.tsx
@@ -161,12 +161,13 @@ function ZoomControls({ parentComponent }: { parentComponent?: Component | null
return (
{
parentComponent?.triggerCommand(command);
setTimeout(() => updateZoomState(), 300)
e.stopPropagation();
}}
- className={icon}
+ className={`dropdown-item-button ${icon}`}
>{children}
)
}
@@ -174,6 +175,7 @@ function ZoomControls({ parentComponent }: { parentComponent?: Component | null
return isElectron() ? (
{t("global_menu.zoom")}
diff --git a/apps/client/src/widgets/react/FormList.tsx b/apps/client/src/widgets/react/FormList.tsx
index f3d6d9427..6e7c7ab51 100644
--- a/apps/client/src/widgets/react/FormList.tsx
+++ b/apps/client/src/widgets/react/FormList.tsx
@@ -84,6 +84,7 @@ interface FormListItemOpts {
disabled?: boolean;
checked?: boolean | null;
selected?: boolean;
+ container?: boolean;
onClick?: (e: MouseEvent) => void;
triggerCommand?: CommandNames;
description?: string;
@@ -96,7 +97,7 @@ const TOOLTIP_CONFIG: Partial = {
fallbackPlacements: [ "right" ]
}
-export function FormListItem({ className, icon, value, title, active, disabled, checked, onClick, selected, rtl, triggerCommand, description, ...contentProps }: FormListItemOpts) {
+export function FormListItem({ className, icon, value, title, active, disabled, checked, container, onClick, selected, rtl, triggerCommand, description, ...contentProps }: FormListItemOpts) {
const itemRef = useRef(null);
if (checked) {
@@ -108,9 +109,9 @@ export function FormListItem({ className, icon, value, title, active, disabled,
return (