more edits

theme/components/Button.ts

@@ -109,18 +109,21 @@ const variantSimple = defineStyle((props) => {
 const variantSubtle = defineStyle((props) => {
   const { colorScheme: c } = props;
 
+  const activeBg = mode(`${ c }.50`, 'gray.800')(props);
+
   return {
     bg: 'transparent',
     color: mode(`${ c }.700`, 'gray.400')(props),
     _active: {
       color: mode(`${ c }.700`, 'gray.50')(props),
       bg: mode(`${ c }.50`, 'gray.800')(props),
-      _hover: {
-        color: mode(`${ c }.700`, 'gray.50')(props),
-      },
     },
     _hover: {
       color: `${ c }.400`,
+      _active: {
+        bg: props.isActive ? activeBg : 'transparent',
+        color: mode(`${ c }.700`, 'gray.50')(props),
+      },
     },
   };
 });
@@ -135,6 +138,7 @@ const variants = {
 const baseStyle = defineStyle({
   fontWeight: 600,
   borderRadius: 'base',
+  overflow: 'hidden',
 });
 
 const sizes = {

ui/shared/RoutedTabs/RoutedTabsMenu.tsx

@@ -23,7 +23,7 @@ interface Props {
 }
 
 const RoutedTabsMenu = ({ tabs, tabsCut, isActive, styles, onItemClick, buttonRef, activeTab }: Props) => {
-  const { isOpen, onToggle, onClose } = useDisclosure();
+  const { isOpen, onToggle, onClose, onOpen } = useDisclosure();
 
   const handleItemClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
     onClose();
@@ -34,7 +34,7 @@ const RoutedTabsMenu = ({ tabs, tabsCut, isActive, styles, onItemClick, buttonRe
   }, [ onClose, onItemClick, tabsCut ]);
 
   return (
-    <Popover isLazy placement="bottom-end" key="more">
+    <Popover isLazy placement="bottom-end" key="more" isOpen={ isOpen } onClose={ onClose } onOpen={ onOpen } closeDelay={ 0 }>
       <PopoverTrigger>
         <Button
           variant="subtle"