From 6f565afd44402e8ab04e2f7849dbffcb5aa6afeb Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sun, 21 Sep 2025 15:13:08 +0300
Subject: [PATCH] style/global menu: improve the full screen / zoom buttons,
 refactor

---
 apps/client/src/stylesheets/style.css            |  8 ++++----
 apps/client/src/stylesheets/theme-next/base.css  | 14 ++++++++++++++
 apps/client/src/stylesheets/theme-next/shell.css | 12 ------------
 apps/client/src/widgets/buttons/global_menu.tsx  |  4 +++-
 apps/client/src/widgets/react/FormList.tsx       |  7 ++++---
 5 files changed, 25 insertions(+), 20 deletions(-)

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 (
             <a
                 ref={linkRef}
+                tabIndex={0}
                 onClick={(e) => {
                     parentComponent?.triggerCommand(command);
                     setTimeout(() => updateZoomState(), 300)
                     e.stopPropagation();
                 }}
-                className={icon}
+                className={`dropdown-item-button ${icon}`}
             >{children}</a>
         )
     }
@@ -174,6 +175,7 @@ function ZoomControls({ parentComponent }: { parentComponent?: Component | null
     return isElectron() ? (
         <FormListItem
             icon="bx bx-empty"
+            container
             className="zoom-container"
         >
             {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<Tooltip.Options> = {
     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<HTMLLIElement>(null);
 
     if (checked) {
@@ -108,9 +109,9 @@ export function FormListItem({ className, icon, value, title, active, disabled,
     return (
         <li
             ref={itemRef}
-            class={`dropdown-item ${active ? "active" : ""} ${disabled ? "disabled" : ""} ${selected ? "selected" : ""} ${className ?? ""}`}
+            class={`dropdown-item ${active ? "active" : ""} ${disabled ? "disabled" : ""} ${selected ? "selected" : ""} ${container ? "dropdown-container-item": ""} ${className ?? ""}`}
             data-value={value} title={title}
-            tabIndex={0}
+            tabIndex={container ? -1 : 0}
             onClick={onClick}
             data-trigger-command={triggerCommand}
             dir={rtl ? "rtl" : undefined}