@agentiffai/design 1.2.1 → 1.3.3

package/dist/index.js

@@ -51,6 +51,7 @@ var tokens = {
     // Status colors (for workflow/SSE events)
     status: {
       pending: "#6B7280",
+      editing: "#3B82F6",
       idle: "#6B7280",
       running: "#459FB9",
       // Sky Blue (brand aligned)
@@ -138,22 +139,22 @@ var tokens = {
       monospace: "'Roboto Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace"
     },
     fontSize: {
-      xs: "0.75rem",
-      // 12px
-      sm: "0.875rem",
-      // 14px
-      base: "1rem",
-      // 16px
+      xs: "0.875rem",
+      // 14px (was 12px, increased for better readability)
+      sm: "1rem",
+      // 16px (was 14px, increased for better readability)
+      base: "1.125rem",
+      // 18px (was 16px, increased for better readability)
       lg: "1.125rem",
-      // 18px
+      // 18px (heading size, unchanged)
       xl: "1.25rem",
-      // 20px
+      // 20px (heading size, unchanged)
       "2xl": "1.5rem",
-      // 24px
+      // 24px (heading size, unchanged)
       "3xl": "1.875rem",
-      // 30px
+      // 30px (heading size, unchanged)
       "4xl": "2.25rem"
-      // 36px
+      // 36px (heading size, unchanged)
     },
     fontWeight: {
       light: 300,
@@ -1010,32 +1011,36 @@ var IconNames = {
   MIC_OFF: "mic-off-fill",
   HEADPHONE: "headphone-fill",
   VOLUME_MUTE: "volume-mute-fill",
-  SETTINGS: "settings-3-fill",
-  SETTINGS_FILL: "settings-fill",
-  SETTINGS_LINE: "settings-line",
+  SETTINGS_3_LINE: "settings-3-line",
   HOME: "home-fill",
   ADD_CIRCLE: "add-circle-fill",
   COMPASS_DISCOVER: "compass-discover-fill",
   DOWNLOAD: "download-2-fill",
   ARROW_LEFT: "arrow-left-fill",
   CALENDAR: "calendar-fill",
-  CHAT: "chat-1-fill"
+  CHAT: "chat-1-fill",
+  FLOW_CHART: "flow-chart",
+  LOGOUT_CIRCLE_R_FILL: "logout-circle-r-fill",
+  LOGOUT_CIRCLE_R_LINE: "logout-circle-r-line",
+  SIDE_BAR_FILL: "side-bar-fill"
 };
 var iconFiles = {
   "mic-fill": "Icon-mic-fill.svg",
   "mic-off-fill": "Icon-mic-off-fill.svg",
   "headphone-fill": "Icon-headphone-fill.svg",
   "volume-mute-fill": "Icon-volume-mute-fill.svg",
-  "settings-3-fill": "Icon-settings-3-fill.svg",
-  "settings-fill": "Icon-settings-fill.svg",
-  "settings-line": "Icon-settings-line.svg",
+  "settings-3-line": "Icon-settings-3-line.svg",
   "home-fill": "Icon-home-fill.svg",
   "add-circle-fill": "Icon-add-circle-fill.svg",
   "compass-discover-fill": "Icon-compass-discover-fill.svg",
   "download-2-fill": "Icon-download-2-fill.svg",
   "arrow-left-fill": "Icon-arrow-left-fill.svg",
   "calendar-fill": "Icon-calendar-fill.svg",
-  "chat-1-fill": "Icon-chat-1-fill.svg"
+  "chat-1-fill": "Icon-chat-1-fill.svg",
+  "flow-chart": "Icon-flow-chart.svg",
+  "logout-circle-r-fill": "Icon-logout-circle-r-fill.svg",
+  "logout-circle-r-line": "Icon-logout-circle-r-line.svg",
+  "side-bar-fill": "Icon-side-bar-fill.svg"
 };
 function getIconPath(name) {
   return `${ICON_BASE_PATH}/${iconFiles[name]}`;
@@ -1058,6 +1063,8 @@ var Container2 = styled11.nav`
   right: 0;
   background-color: ${tokens.colors.background.darker};
   border-top: 1px solid ${tokens.colors.border.subtle};
+  /* Add vertical padding to prevent content overlap */
+  padding-top: 4px;
   /* Use safe-area-inset-bottom for Android navigation buttons.
      The env() value will be 0 on devices without soft nav buttons.
      Fallback to 0 if env() is not supported. */
@@ -1087,7 +1094,7 @@ var UserStatusSlot = styled11.div`
   display: flex;
   align-items: center;
   min-width: 0; /* Allow flex item to shrink */
-  flex: 0 1 auto;
+  flex: 1 1 auto; /* Allow slot to grow and take available space */
 
   /* Handle overflow for long usernames */
   > * {
@@ -1215,6 +1222,7 @@ var FolderGroupsSlot = styled11.div`
   gap: ${tokens.spacing.sm};
   padding: 0 ${tokens.spacing.md} ${tokens.spacing.md};
   flex: 1;
+  padding-bottom: 120px; /* Prevent overlap with bottom section (2 buttons @ 40px + 1 gap @ 8px + padding @ 32px) */
 
   /* Server/workspace icons styling */
   > * {
@@ -1231,18 +1239,68 @@ var FolderGroupsSlot = styled11.div`
 
   /* Responsive adjustments */
   @media (max-width: ${tokens.breakpoints.tablet}px) {
-    padding: 0 6px ${tokens.spacing.md}; /* Reduce horizontal padding on mobile */
+    padding: 0 6px ${tokens.spacing.md} 96px; /* Reduce horizontal padding on mobile */
+  }
+`;
+var BottomSection = styled11.div`
+  position: absolute;
+  bottom: 0; /* At the bottom of the nav container */
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${tokens.spacing.sm};
+  padding: ${tokens.spacing.md} 0;
+  background-color: ${tokens.colors.background.darker};
+
+  @media (prefers-color-scheme: dark) {
+    background-color: ${tokens.colors.background.darkest};
+  }
+`;
+var BottomButton = styled11.button`
+  width: 40px;
+  height: 40px;
+  border-radius: 0;
+  border: none;
+  background-color: transparent;
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all ${tokens.transitions.normal};
+
+  &:hover {
+    opacity: 0.7;
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${tokens.colors.border.focus};
+    outline-offset: 2px;
   }
 `;
 function NavVertical({
   onBackClick,
   onHomeClick,
+  onSettingsClick,
+  onLogoutClick,
   folderGroupsSlot,
   className,
   "aria-label": ariaLabel = "Vertical navigation sidebar"
 }) {
   const backButtonRef = useRef(null);
   const homeButtonRef = useRef(null);
+  const settingsButtonRef = useRef(null);
+  const logoutButtonRef = useRef(null);
   const { buttonProps: backButtonProps } = useButton(
     {
       onPress: onBackClick,
@@ -1257,10 +1315,28 @@ function NavVertical({
     },
     homeButtonRef
   );
+  const { buttonProps: settingsButtonProps } = useButton(
+    {
+      onPress: onSettingsClick,
+      "aria-label": "Settings"
+    },
+    settingsButtonRef
+  );
+  const { buttonProps: logoutButtonProps } = useButton(
+    {
+      onPress: onLogoutClick,
+      "aria-label": "Logout"
+    },
+    logoutButtonRef
+  );
   return /* @__PURE__ */ jsxs(Container3, { className, role: "navigation", "aria-label": ariaLabel, children: [
-    /* @__PURE__ */ jsx(TopSection, { children: onBackClick ? /* @__PURE__ */ jsx(BackButton, { ...backButtonProps, ref: backButtonRef, children: /* @__PURE__ */ jsx(Icon, { name: "arrow-left-fill", size: 20, color: "white" }) }) : onHomeClick ? /* @__PURE__ */ jsx(BackButton, { ...homeButtonProps, ref: homeButtonRef, children: /* @__PURE__ */ jsx(Icon, { name: "home-fill", size: 24, color: "white" }) }) : null }),
+    /* @__PURE__ */ jsx(TopSection, { children: onBackClick ? /* @__PURE__ */ jsx(BackButton, { ...backButtonProps, ref: backButtonRef, children: /* @__PURE__ */ jsx(Icon, { name: "side-bar-fill", size: 20, color: "white" }) }) : onHomeClick ? /* @__PURE__ */ jsx(BackButton, { ...homeButtonProps, ref: homeButtonRef, children: /* @__PURE__ */ jsx(Icon, { name: "side-bar-fill", size: 24, color: "white" }) }) : null }),
     /* @__PURE__ */ jsx(Separator, {}),
-    /* @__PURE__ */ jsx(FolderGroupsSlot, { children: folderGroupsSlot })
+    /* @__PURE__ */ jsx(FolderGroupsSlot, { children: folderGroupsSlot }),
+    (onSettingsClick || onLogoutClick) && /* @__PURE__ */ jsxs(BottomSection, { children: [
+      onSettingsClick && /* @__PURE__ */ jsx(BottomButton, { ...settingsButtonProps, ref: settingsButtonRef, children: /* @__PURE__ */ jsx(Icon, { name: "settings-3-line", size: 24, color: "white" }) }),
+      onLogoutClick && /* @__PURE__ */ jsx(BottomButton, { ...logoutButtonProps, ref: logoutButtonRef, children: /* @__PURE__ */ jsx(Icon, { name: "logout-circle-r-line", size: 24, color: "white" }) })
+    ] })
   ] });
 }
 NavVertical.displayName = "NavVertical";
@@ -1360,10 +1436,22 @@ function Layout({
   navHorizontalUserSlot,
   navHorizontalActionsSlot,
   onNavBackClick,
+  onNavHomeClick,
+  onNavSettingsClick,
+  onNavLogoutClick,
   className
 }) {
   return /* @__PURE__ */ jsxs(Container4, { className, children: [
-    /* @__PURE__ */ jsx(NavVertical, { folderGroupsSlot: navVerticalSlot, onBackClick: onNavBackClick }),
+    /* @__PURE__ */ jsx(
+      NavVertical,
+      {
+        folderGroupsSlot: navVerticalSlot,
+        onBackClick: onNavBackClick,
+        onHomeClick: onNavHomeClick,
+        onSettingsClick: onNavSettingsClick,
+        onLogoutClick: onNavLogoutClick
+      }
+    ),
     backgroundSlot && /* @__PURE__ */ jsx(BackgroundPane, { children: backgroundSlot }),
     /* @__PURE__ */ jsx(MainPane, { children: mainPaneSlot }),
     /* @__PURE__ */ jsx(
@@ -1450,10 +1538,8 @@ function ActionButtonItem({ icon, label, onClick, isActive, size, isPrimary }) {
 }
 function ActionButtons({
   onCalendarClick,
-  onSettingsClick,
   onChatClick,
   isCalendarActive = false,
-  isSettingsActive = false,
   isChatActive = false,
   className
 }) {
@@ -1468,16 +1554,6 @@ function ActionButtons({
         size: 32
       }
     ),
-    /* @__PURE__ */ jsx(
-      ActionButtonItem,
-      {
-        icon: /* @__PURE__ */ jsx(Icon, { name: "settings-3-fill", size: 16, color: tokens.colors.text.secondary }),
-        label: "Settings",
-        onClick: onSettingsClick,
-        isActive: isSettingsActive,
-        size: 32
-      }
-    ),
     /* @__PURE__ */ jsx(
       ActionButtonItem,
       {
@@ -1501,30 +1577,31 @@ var Container6 = styled11.button`
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: center;
-  gap: ${tokens.spacing.sm};
-  padding: ${tokens.spacing.sm};
+  gap: ${tokens.spacing.xs};
+  padding: 6px;
+  margin: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.md};
   border: none;
   background: ${tokens.colors.surface.subtle};
   color: inherit;
   font-family: ${tokens.typography.fontFamily.primary};
   transition: background-color ${tokens.transitions.fast}, opacity ${tokens.transitions.fast};
-  cursor: ${(props) => props.$isDisabled ? "not-allowed" : "pointer"};
-  opacity: ${(props) => props.$isDisabled ? 0.5 : 1};
+  cursor: ${(props) => props.$isDisabled ? "default" : "pointer"};
+  opacity: ${(props) => props.$isDisabled ? 0.7 : 1};
   text-align: left;
-  width: 100%;
+  width: calc(100% - ${tokens.spacing.lg});
 
   &:hover:not(:disabled) {
-    background-color: ${tokens.colors.surface.overlay};
+    background-color: ${(props) => props.$isDisabled ? tokens.colors.surface.subtle : tokens.colors.surface.overlay};
   }
 
   &:focus-visible {
-    outline: 2px solid ${tokens.colors.border.focus};
+    outline: ${(props) => props.$isDisabled ? "none" : `2px solid ${tokens.colors.border.focus}`};
     outline-offset: 2px;
   }
 
   &:active:not(:disabled) {
-    background-color: ${tokens.colors.surface.overlayActive};
+    background-color: ${(props) => props.$isDisabled ? tokens.colors.surface.subtle : tokens.colors.surface.overlayActive};
   }
 `;
 var IconWrapper2 = styled11.div`
@@ -2118,7 +2195,7 @@ styled11.button`
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
     padding: ${tokens.spacing.sm} ${tokens.spacing.md};
-    font-size: 13px;
+    font-size: ${tokens.typography.fontSize.sm};
     gap: ${tokens.spacing.sm};
   }
 
@@ -2379,7 +2456,7 @@ var ItemName = styled11.span`
   min-width: 0;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    font-size: 13px;
+    font-size: ${tokens.typography.fontSize.sm};
   }
 
   ${ItemContainer}:hover & {
@@ -2471,7 +2548,7 @@ styled11.div`
   padding-top: 0;
   background-color: ${tokens.colors.overlay};
   color: ${tokens.colors.text.secondary};
-  font-size: 13px;
+  font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.relaxed};
   animation: slideDown ${tokens.transitions.normal};
 
@@ -2558,7 +2635,7 @@ var ConnectionDescription = styled11.p`
 var GoogleButton = styled11.button`
   width: 100%;
   padding: ${tokens.spacing.md} ${tokens.spacing.lg};
-  font-size: 15px;
+  font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.semibold};
   color: ${(props) => props.$isConnected ? tokens.colors.text.primary : tokens.colors.text.primary};
   background: ${(props) => props.$isConnected ? tokens.colors.background.light : `linear-gradient(135deg, ${tokens.colors.platform.facebook}, ${tokens.colors.platform.whatsapp})`};
@@ -2694,8 +2771,8 @@ function WorkflowGroupItem({
   return /* @__PURE__ */ jsxs(CategoryDisclosure, { id: groupId, children: [
     /* @__PURE__ */ jsx(Heading, { level: 4, children: /* @__PURE__ */ jsxs(CategoryHeader, { slot: "trigger", style: { paddingLeft: "8px" }, children: [
       /* @__PURE__ */ jsxs(CategoryTitle, { children: [
-        /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", fontWeight: 500 }, children: group.workflowName }),
-        /* @__PURE__ */ jsxs("span", { style: { fontSize: "11px", color: tokens.colors.text.tertiary, marginLeft: "8px" }, children: [
+        /* @__PURE__ */ jsx("span", { style: { fontSize: tokens.typography.fontSize.base, fontWeight: 500 }, children: group.workflowName }),
+        /* @__PURE__ */ jsxs("span", { style: { fontSize: tokens.typography.fontSize.sm, color: tokens.colors.text.tertiary, marginLeft: "8px" }, children: [
           "(",
           group.runs.length,
           ")"
@@ -3172,7 +3249,7 @@ function PaneSectionHeader({
   brand = "Google",
   onBackClick,
   onSettingsClick,
-  settingsIcon = "settings-fill",
+  settingsIcon = "flow-chart",
   className,
   "aria-label": ariaLabel = "Pane section header"
 }) {
@@ -3190,7 +3267,7 @@ function PaneSectionHeader({
   const { buttonProps: settingsButtonProps } = useButton(
     {
       onPress: onSettingsClick,
-      "aria-label": "Settings"
+      "aria-label": "Workflow configuration"
     },
     settingsButtonRef
   );
@@ -3361,7 +3438,7 @@ var NotificationItemWrapper = styled11.button`
   cursor: pointer;
   text-align: left;
   transition: all ${tokens.transitions.normal};
-  border-radius: ${(props) => props.$isSelected ? tokens.borderRadius.lg : tokens.borderRadius.lg};
+  border-radius: ${(props) => props.$isSelected ? tokens.borderRadius.md : tokens.borderRadius.md};
 
   /* Default state - transparent background */
   background-color: ${(props) => props.$isSelected ? tokens.colors.secondary : "transparent"};
@@ -3641,7 +3718,7 @@ var StyledUserMessage = styled11.button`
   font-family: ${tokens.typography.fontFamily.primary};
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.regular};
-  line-height: 1.4;
+  line-height: ${tokens.typography.lineHeight.normal};
   border: none;
   cursor: default;
   user-select: none;
@@ -3983,6 +4060,11 @@ var Card = styled11.div`
   font-family: ${tokens.typography.fontFamily.primary};
   transition: border-color ${tokens.transitions.fast};
 
+  @media (max-width: 480px) {
+    padding: ${tokens.spacing.sm};
+    gap: ${tokens.spacing.xs};
+  }
+
   &:hover {
     border-color: ${tokens.colors.border.hover};
   }
@@ -3995,6 +4077,10 @@ var ContentHeader = styled11.div`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.sm};
+
+  @media (max-width: 480px) {
+    gap: ${tokens.spacing.xs};
+  }
 `;
 var IconWrapper3 = styled11.div`
   width: 40px;
@@ -4002,7 +4088,7 @@ var IconWrapper3 = styled11.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: ${tokens.borderRadius.md};
+  border-radius: ${tokens.borderRadius.sm};
   background: ${tokens.colors.background.light};
   flex-shrink: 0;
 `;
@@ -8073,12 +8159,12 @@ var fadeIn2 = keyframes`
 `;
 var CardContainer = styled11.div`
   background: ${tokens.colors.background.dark};
-  border-radius: ${tokens.borderRadius.lg};
+  border-radius: ${tokens.borderRadius.xl};
   padding: ${tokens.spacing.md};
   position: relative;
   transition: all ${tokens.transitions.normal};
-  border: 2px solid ${({ $isActive, $isEditing, $platformColor }) => $isEditing ? $platformColor : $isActive ? $platformColor : tokens.colors.border.default};
-  box-shadow: ${({ $isActive, $isEditing, $platformColor }) => $isEditing ? `${tokens.shadows.lg}, 0 4px 16px ${$platformColor}40` : $isActive ? `${tokens.shadows.lg}, 0 4px 12px ${$platformColor}33` : tokens.shadows.md};
+  border: 1px solid ${({ $isActive, $isEditing, $platformColor }) => $isEditing ? $platformColor : $isActive ? $platformColor : tokens.colors.border.default};
+  box-shadow: ${({ $isActive, $isEditing, $platformColor }) => $isEditing ? `${tokens.shadows.lg}, 0 0 20px ${$platformColor}40` : $isActive ? `${tokens.shadows.lg}, 0 0 20px ${$platformColor}33` : tokens.shadows.md};
 
   &:hover {
     border-color: ${({ $platformColor }) => `${$platformColor}80`};
@@ -8098,7 +8184,7 @@ var PlatformIcon = styled11.span`
   justify-content: center;
   width: 32px;
   height: 32px;
-  border-radius: ${tokens.borderRadius.md};
+  border-radius: ${tokens.borderRadius.sm};
   background: ${({ $platformColor }) => `${$platformColor}20`};
   color: ${({ $platformColor }) => $platformColor};
   font-size: ${tokens.typography.fontSize.base};
@@ -8147,7 +8233,7 @@ var PostContentEditable = styled11.textarea`
   color: ${tokens.colors.text.primary};
   background: ${tokens.colors.background.darker};
   border: 1px solid ${tokens.colors.border.default};
-  border-radius: ${tokens.borderRadius.md};
+  border-radius: ${tokens.borderRadius.sm};
   padding: ${tokens.spacing.md};
   margin-bottom: ${tokens.spacing.sm};
   letter-spacing: 0.01em;
@@ -8211,7 +8297,7 @@ var ProgressBarFill2 = styled11.div`
 `;
 var ImagePreviewContainer = styled11.div`
   margin-bottom: ${tokens.spacing.sm};
-  border-radius: ${tokens.borderRadius.md};
+  border-radius: ${tokens.borderRadius.sm};
   overflow: hidden;
   border: 1px solid ${tokens.colors.border.default};
 `;
@@ -8233,7 +8319,7 @@ var ImagePlaceholder = styled11.div`
     #cc2366 75%,
     #bc1888 100%
   );
-  border-radius: ${tokens.borderRadius.md};
+  border-radius: ${tokens.borderRadius.sm};
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -8248,7 +8334,7 @@ var PlaceholderIcon = styled11.div`
   width: 48px;
   height: 48px;
   border: 2px solid white;
-  border-radius: ${tokens.borderRadius.md};
+  border-radius: ${tokens.borderRadius.sm};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -8835,7 +8921,7 @@ var Card2 = styled11.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.md};
-  padding: ${tokens.spacing.lg};
+  padding: ${tokens.spacing.md};
   background: ${tokens.colors.background.dark};
   border-radius: ${tokens.borderRadius.xl};
   border: 1px solid ${tokens.colors.border.default};
@@ -8927,7 +9013,7 @@ var TransactionItem = styled11.div`
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.sm};
   background: ${tokens.colors.background.darker};
-  border-radius: ${tokens.borderRadius.md};
+  border-radius: ${tokens.borderRadius.sm};
 `;
 var TransactionIcon = styled11.span`
   width: 24px;
@@ -9093,12 +9179,22 @@ var WorkflowName2 = styled11.h3`
   font-weight: ${tokens.typography.fontWeight.semibold};
   color: ${tokens.colors.text.primary};
   line-height: ${tokens.typography.lineHeight.tight};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
 `;
 var Description2 = styled11.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
   line-height: ${tokens.typography.lineHeight.normal};
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-break: break-word;
+  min-width: 0;
 `;
 var CardFooter = styled11.div`
   display: flex;
@@ -9107,11 +9203,13 @@ var CardFooter = styled11.div`
   gap: ${tokens.spacing.sm};
   padding-top: ${tokens.spacing.sm};
   border-top: 1px solid ${tokens.colors.border.subtle};
+  width: 100%;
 `;
 var IntegrationList = styled11.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
+  flex-shrink: 0;
 `;
 var IntegrationIconWrapper = styled11.span`
   display: flex;
@@ -9123,6 +9221,7 @@ var IntegrationIconWrapper = styled11.span`
   background: ${tokens.colors.background.light};
   opacity: ${({ $connected }) => $connected ? 1 : 0.4};
   position: relative;
+  flex-shrink: 0;
 
   ${({ $connected }) => !$connected && `
     &::after {
@@ -9142,8 +9241,10 @@ var IntegrationIcon = styled11.img`
 var Indicators = styled11.div`
   display: flex;
   align-items: center;
-  gap: ${tokens.spacing.sm};
+  flex-wrap: wrap;
+  gap: ${tokens.spacing.xs};
   margin-left: auto;
+  min-width: 0;
 `;
 var IndicatorPill = styled11.span`
   display: inline-flex;