feat: adjust chart tab controls

libs/candles-chart/src/lib/candles-menu.tsx

@@ -59,11 +59,13 @@ export const CandlesMenu = () => {
     [Study.VOLUME]
   );
 
+  const triggerClasses = 'text-xs';
+
   return (
     <>
       <DropdownMenu
         trigger={
-          <DropdownMenuTrigger>
+          <DropdownMenuTrigger className={triggerClasses}>
             {t(`Interval: ${intervalLabels[interval]}`)}
           </DropdownMenuTrigger>
         }
@@ -90,7 +92,7 @@ export const CandlesMenu = () => {
       </DropdownMenu>
       <DropdownMenu
         trigger={
-          <DropdownMenuTrigger>
+          <DropdownMenuTrigger className={triggerClasses}>
             <Icon name={chartTypeIcon.get(chartType) as IconName} />
           </DropdownMenuTrigger>
         }
@@ -112,7 +114,11 @@ export const CandlesMenu = () => {
         </DropdownMenuContent>
       </DropdownMenu>
       <DropdownMenu
-        trigger={<DropdownMenuTrigger>{t('Overlays')}</DropdownMenuTrigger>}
+        trigger={
+          <DropdownMenuTrigger className={triggerClasses}>
+            {t('Overlays')}
+          </DropdownMenuTrigger>
+        }
       >
         <DropdownMenuContent>
           {Object.values(Overlay).map((overlay) => (
@@ -137,7 +143,11 @@ export const CandlesMenu = () => {
         </DropdownMenuContent>
       </DropdownMenu>
       <DropdownMenu
-        trigger={<DropdownMenuTrigger>{t('Studies')}</DropdownMenuTrigger>}
+        trigger={
+          <DropdownMenuTrigger className={triggerClasses}>
+            {t('Studies')}
+          </DropdownMenuTrigger>
+        }
       >
         <DropdownMenuContent>
           {Object.values(Study).map((study) => (

libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx

@@ -43,17 +43,18 @@ export const DropdownMenuTrigger = forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,
   DropdownMenuPrimitive.DropdownMenuTriggerProps
 >(({ className, children, ...props }, forwardedRef) => {
-  const defaultClasses = [
+  const triggerClasses = classNames(
     'text-sm py-1 px-2 rounded bg-transparent border whitespace-nowrap',
     'border-vega-light-200 dark:border-vega-dark-200',
     'hover:border-vega-light-300 dark:hover:border-vega-dark-300',
-  ].join(' ');
+    className
+  );
 
   return (
     <DropdownMenuPrimitive.Trigger
       asChild={true}
       ref={forwardedRef}
-      className={className || defaultClasses}
+      className={triggerClasses}
       {...props}
     >
       <button>{children}</button>

libs/ui-toolkit/src/components/tabs/tabs.tsx

@@ -79,7 +79,7 @@ export const Tabs = ({
             return (
               <TabsPrimitive.Content
                 value={child.props.id}
-                className="flex flex-nowrap gap-2 justify-end"
+                className="flex flex-nowrap gap-1 justify-end"
               >
                 {child.props.menu}
               </TabsPrimitive.Content>