Merge branch 'MAILWEB-6441-make-refresh-icon-not-moving' into 'main'

Make refresh button not moving

See merge request web/clients!16681

Author: MargeBot

applications/mail/src/app/components/sidebar/LocationAside.tsx

@@ -80,7 +80,7 @@ const LocationAside = ({
             {itemOptions && (
                 <span
                     className={clsx(
-                        'group-hover:opacity-100 group-hover:opacity-100-no-width shrink-0 hidden md:flex mr-custom right-custom',
+                        'group-hover:opacity-100 group-hover:opacity-100-no-width shrink-0 hidden md:flex mr-custom right-custom navigation-more-dropdown',
                         isOptionDropdownOpened && 'is-active'
                     )}
                     style={{ '--mr-custom': 'calc(var(--space-1) * -1)', '--right-custom': 'var(--space-2)' }}

applications/mail/src/app/components/sidebar/SidebarFolder.tsx

@@ -80,6 +80,7 @@ const SidebarFolder = ({
             id={id}
             onFocus={onFocus}
             isOptionDropdownOpened={isOptionDropdownOpened}
+            className="navigation-item--folder"
             content={
                 <div className="flex flex-nowrap items-center gap-2" data-level={level}>
                     {folder.subfolders?.length ? (

applications/mail/src/app/components/sidebar/SidebarItem.scss

@@ -1,3 +1,28 @@
-[aria-current='page'].navigation-link .reload-spinner {
-	display: block;
+[aria-current='page'].navigation-link {
+	.reload-spinner {
+		display: block;
+	}
+}
+
+.navigation-item--folder,
+.navigation-item--label {
+	[aria-current='page'].navigation-link {
+		// Make dropdown always visible for folders/labels when selected
+		.navigation-more-dropdown {
+			opacity: 1;
+			visibility: visible;
+			pointer-events: all;
+			margin-inline: var(--space-1) calc(var(--space-2) * -1);
+			inset-inline-end: var(--space-1);
+			position: relative;
+		}
+
+		.navigation-counter-item {
+			display: none;
+		}
+
+		.reload-spinner {
+			margin-inline-end: var(--space-1);
+		}
+	}
 }

applications/mail/src/app/components/sidebar/SidebarItem.tsx

@@ -62,6 +62,7 @@ interface Props {
     collapsed?: boolean;
     moveToFolder: (params: MoveParams) => void;
     applyLabels: (params: ApplyLabelsParams) => void;
+    className?: string;
 }
 
 const SidebarItem = ({
@@ -86,6 +87,7 @@ const SidebarItem = ({
     collapsed = false,
     moveToFolder,
     applyLabels,
+    className,
 }: Props) => {
     const { call } = useEventManager();
     const history = useHistory();
@@ -170,6 +172,7 @@ const SidebarItem = ({
             className={clsx([
                 dragOver && 'navigation__dragover',
                 'group-hover-hide-container group-hover-opacity-container',
+                className,
             ])}
             data-testid={`sidebar-label:${text}`}
         >

applications/mail/src/app/components/sidebar/SidebarLabels.tsx

@@ -45,6 +45,7 @@ const SidebarLabel = ({
             onFocus={updateFocusItem}
             moveToFolder={moveToFolder}
             applyLabels={applyLabels}
+            className="navigation-item--label"
             itemOptions={
                 <SidebarLabelActions type={'label'} element={label} onToggleDropdown={setIsOptionDropdownOpened} />
             }