UI fixes

scopes/component/ui/version-dropdown/version-dropdown.module.scss

@@ -1,5 +1,9 @@
+@import '~@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+
 .versionDropdown {
   height: 100%;
+  z-index: $modal-z-index;
+
   > div {
     height: 100%;
     display: flex;

scopes/lanes/ui/inputs/lane-selector/lane-selector.module.scss

@@ -4,6 +4,8 @@
   // otherwise when the dropdown is open it clashes with the content of the tree
   // (this is bizarre, the tree has no position absolute)
   z-index: $nav-z-index;
+  border-radius: 8px;
+
   &.disabled {
     > div {
       cursor: unset;

scopes/lanes/ui/navigation/lane-switcher/lane-switcher.module.scss

@@ -13,6 +13,8 @@
 .laneGalleryIcon {
   display: flex;
   flex: 0;
+  border-radius: 8px;
+  font-size: 14px;
 
   > span:first-child {
     margin-right: 0px;

scopes/lanes/ui/navigation/lane-switcher/lane-switcher.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, useEffect, useState } from 'react';
 import { useLanes } from '@teambit/lanes.hooks.use-lanes';
 import { LaneId } from '@teambit/lane-id';
 import { LaneSelector } from '@teambit/lanes.ui.inputs.lane-selector';
@@ -14,13 +14,20 @@ export type LaneSwitcherProps = {
 
 export function LaneSwitcher({ className, groupByScope = true, ...rest }: LaneSwitcherProps) {
   const { lanesModel } = useLanes();
+  const [viewedLane, setViewedLane] = useState(lanesModel?.viewedLane);
+
+  useEffect(() => {
+    if (viewedLane?.id && !lanesModel?.viewedLane?.id.isEqual(viewedLane?.id)) {
+      setViewedLane(lanesModel?.viewedLane);
+    }
+  }, [lanesModel?.viewedLane?.id.toString()]);
 
   const mainLaneId = lanesModel?.getDefaultLane()?.id;
   const nonMainLaneIds = lanesModel?.getNonMainLanes().map((lane) => lane.id) || [];
 
   const lanes: Array<LaneId> = (mainLaneId && [mainLaneId, ...nonMainLaneIds]) || nonMainLaneIds;
 
-  const selectedLaneId = lanesModel?.viewedLane?.id || mainLaneId;
+  const selectedLaneId = viewedLane?.id || mainLaneId;
   const selectedLaneGalleryHref = selectedLaneId && LanesModel.getLaneUrl(selectedLaneId);
 
   return (
@@ -35,7 +42,7 @@ export function LaneSwitcher({ className, groupByScope = true, ...rest }: LaneSw
       <MenuLinkItem
         exact={true}
         className={styles.laneGalleryIcon}
-        icon="comps"
+        icon="eye"
         href={selectedLaneGalleryHref}
       ></MenuLinkItem>
     </div>

scopes/ui-foundation/use-box/dropdown/dropdown.module.scss

@@ -1,4 +1,9 @@
 @import '~@teambit/base-ui.layout.breakpoints/_breakpoints.scss';
+@import '~@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+
+.useBox {
+  z-index: $modal-z-index;
+}
 
 .menu {
   padding: 0;

scopes/ui-foundation/use-box/menu/menu.module.scss

@@ -1,3 +1,9 @@
+@import '~@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+
+.container {
+  z-index: $modal-z-index;
+}
+
 .top {
   padding: 16px 24px 24px 24px;
   color: var(--bit-text-color-heavy, #2b2b2b);

scopes/ui-foundation/use-box/menu/menu.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useMemo, ReactNode } from 'react';
+import classNames from 'classnames';
 import { Icon } from '@teambit/evangelist.elements.icon';
 import orderBy from 'lodash.orderby';
 import flatten from 'lodash.flatten';
@@ -33,7 +34,7 @@ export function Menu({ methods, componentName, ...rest }: MenuProps) {
   const { Component } = OrderedMethods[activeTab] || {};
 
   return (
-    <div {...rest}>
+    <div {...rest} className={classNames(rest.className, styles.container)}>
       <div className={styles.top}>
         <div className={styles.title}>
           <Icon of="terminal" />

scopes/workspace/workspace/workspace.ui.runtime.tsx

@@ -235,7 +235,7 @@ export class WorkspaceUI {
       component: function Gallery() {
         return (
           <MenuLinkItem exact href="/" icon="comps">
-            Workspace Overview
+            Workspace overview
           </MenuLinkItem>
         );
       },