feat(ui): add badges for advanced settings

invokeai/frontend/web/src/common/components/InvAccordion/InvAccordionButton.tsx

@@ -3,12 +3,19 @@ import {
   Spacer,
 } from '@chakra-ui/react';
 import { InvBadge } from 'common/components/InvBadge/wrapper';
+import { truncate } from 'lodash-es';
+import { useMemo } from 'react';
 
 import type { InvAccordionButtonProps } from './types';
 import { InvAccordionIcon } from './wrapper';
 
 export const InvAccordionButton = (props: InvAccordionButtonProps) => {
-  const { children, badges, ...rest } = props;
+  const { children, badges: _badges, ...rest } = props;
+  const badges = useMemo<string[] | undefined>(
+    () =>
+      _badges?.map((b) => truncate(String(b), { length: 24, omission: '...' })),
+    [_badges]
+  );
   return (
     <ChakraAccordionButton {...rest}>
       {children}

invokeai/frontend/web/src/common/components/InvBadge/theme.ts

@@ -1,7 +1,7 @@
 import { defineStyle, defineStyleConfig } from '@chakra-ui/react';
 
 const baseStyle = defineStyle((props) => ({
-  fontSize: '10px',
+  fontSize: '9px',
   px: 2,
   py: 1,
   minW: 4,
@@ -11,6 +11,10 @@ const baseStyle = defineStyle((props) => ({
   color: 'base.900',
   fontWeight: 'bold',
   letterSpacing: 0.5,
+  wordBreak: 'break-all',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden'
 }));
 
 export const badgeTheme = defineStyleConfig({