style/menus: improve the icon-caption alignment

apps/client/src/stylesheets/style.css

@@ -458,6 +458,7 @@ body.desktop .tabulator-popup-container,
 }
 
 body.desktop .dropdown-menu:not(#context-menu-container) .dropdown-item,
+body.desktop .dropdown-menu .dropdown-toggle,
 body #context-menu-container .dropdown-item > span,
 body.mobile .dropdown .dropdown-submenu > span {
     display: flex;

apps/client/src/stylesheets/theme-next/base.css

@@ -128,6 +128,16 @@ body.backdrop-effects-disabled {
     font-size: 0.9rem !important;
 }
 
+/* Use this class for non-legacy menus */
+.dropdown-menu.tn-dropdown-menu {
+    --menu-item-icon-vert-offset: 0;
+    white-space-collapse: discard;
+}
+
+.dropdown-menu.tn-dropdown-menu .bx {
+    margin-inline-end: 6px;
+}
+
 .dropdown-menu.tn-dropdown-menu-scrollable {
     /* Note: scrollable dropdowns does not support submenus */
     max-height: 90vh;

apps/client/src/widgets/layout/Breadcrumb.css

@@ -91,8 +91,6 @@
         /* Icon */
         li > span:first-child {
             opacity: .75;
-            padding-inline-end: 4px;
-            translate: none;
         };
     }
 

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

@@ -127,7 +127,7 @@ export default function Dropdown({ id, className, buttonClassName, isStatic, chi
             </button>
 
             <ul
-                class={`dropdown-menu ${isStatic ? "static" : ""} ${dropdownContainerClassName ?? ""} ${!noDropdownListStyle ? "tn-dropdown-list" : ""}`}
+                class={`dropdown-menu tn-dropdown-menu ${isStatic ? "static" : ""} ${dropdownContainerClassName ?? ""} ${!noDropdownListStyle ? "tn-dropdown-list" : ""}`}
                 style={dropdownContainerStyle}
                 aria-labelledby={ariaId}
                 ref={dropdownContainerRef}

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

@@ -231,7 +231,8 @@ export function FormDropdownSubmenu({ icon, title, children, dropStart, onDropdo
                     }
                 }}
             >
-                <Icon icon={icon} />{" "}
+                <Icon icon={icon} />
+                &nbsp;
                 {title}
             </span>
 

apps/client/src/widgets/ribbon/style.css

@@ -412,13 +412,6 @@ body[dir=rtl] .attribute-list-editor {
     min-width: 15em;
 }
 
-.note-actions .dropdown-item .bx {
-    position: relative;
-    top: 3px;
-    font-size: 120%;
-    margin-inline-end: 5px;
-}
-
 .note-actions .dropdown-item[disabled], .note-actions .dropdown-item[disabled]:hover {
     color: var(--muted-text-color) !important;
     background-color: transparent !important;