@agentiffai/design 1.2.1 → 1.3.3

package/dist/index.cjs

@@ -57,6 +57,7 @@ var tokens = {
     // Status colors (for workflow/SSE events)
     status: {
       pending: "#6B7280",
+      editing: "#3B82F6",
       idle: "#6B7280",
       running: "#459FB9",
       // Sky Blue (brand aligned)
@@ -144,22 +145,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,
@@ -1016,32 +1017,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]}`;
@@ -1064,6 +1069,8 @@ var Container2 = styled11__default.default.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. */
@@ -1093,7 +1100,7 @@ var UserStatusSlot = styled11__default.default.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 */
   > * {
@@ -1221,6 +1228,7 @@ var FolderGroupsSlot = styled11__default.default.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 */
   > * {
@@ -1237,18 +1245,68 @@ var FolderGroupsSlot = styled11__default.default.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__default.default.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__default.default.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 = react.useRef(null);
   const homeButtonRef = react.useRef(null);
+  const settingsButtonRef = react.useRef(null);
+  const logoutButtonRef = react.useRef(null);
   const { buttonProps: backButtonProps } = button.useButton(
     {
       onPress: onBackClick,
@@ -1263,10 +1321,28 @@ function NavVertical({
     },
     homeButtonRef
   );
+  const { buttonProps: settingsButtonProps } = button.useButton(
+    {
+      onPress: onSettingsClick,
+      "aria-label": "Settings"
+    },
+    settingsButtonRef
+  );
+  const { buttonProps: logoutButtonProps } = button.useButton(
+    {
+      onPress: onLogoutClick,
+      "aria-label": "Logout"
+    },
+    logoutButtonRef
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(Container3, { className, role: "navigation", "aria-label": ariaLabel, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TopSection, { children: onBackClick ? /* @__PURE__ */ jsxRuntime.jsx(BackButton, { ...backButtonProps, ref: backButtonRef, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "arrow-left-fill", size: 20, color: "white" }) }) : onHomeClick ? /* @__PURE__ */ jsxRuntime.jsx(BackButton, { ...homeButtonProps, ref: homeButtonRef, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "home-fill", size: 24, color: "white" }) }) : null }),
+    /* @__PURE__ */ jsxRuntime.jsx(TopSection, { children: onBackClick ? /* @__PURE__ */ jsxRuntime.jsx(BackButton, { ...backButtonProps, ref: backButtonRef, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "side-bar-fill", size: 20, color: "white" }) }) : onHomeClick ? /* @__PURE__ */ jsxRuntime.jsx(BackButton, { ...homeButtonProps, ref: homeButtonRef, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "side-bar-fill", size: 24, color: "white" }) }) : null }),
     /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(FolderGroupsSlot, { children: folderGroupsSlot })
+    /* @__PURE__ */ jsxRuntime.jsx(FolderGroupsSlot, { children: folderGroupsSlot }),
+    (onSettingsClick || onLogoutClick) && /* @__PURE__ */ jsxRuntime.jsxs(BottomSection, { children: [
+      onSettingsClick && /* @__PURE__ */ jsxRuntime.jsx(BottomButton, { ...settingsButtonProps, ref: settingsButtonRef, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "settings-3-line", size: 24, color: "white" }) }),
+      onLogoutClick && /* @__PURE__ */ jsxRuntime.jsx(BottomButton, { ...logoutButtonProps, ref: logoutButtonRef, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "logout-circle-r-line", size: 24, color: "white" }) })
+    ] })
   ] });
 }
 NavVertical.displayName = "NavVertical";
@@ -1366,10 +1442,22 @@ function Layout({
   navHorizontalUserSlot,
   navHorizontalActionsSlot,
   onNavBackClick,
+  onNavHomeClick,
+  onNavSettingsClick,
+  onNavLogoutClick,
   className
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(Container4, { className, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(NavVertical, { folderGroupsSlot: navVerticalSlot, onBackClick: onNavBackClick }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NavVertical,
+      {
+        folderGroupsSlot: navVerticalSlot,
+        onBackClick: onNavBackClick,
+        onHomeClick: onNavHomeClick,
+        onSettingsClick: onNavSettingsClick,
+        onLogoutClick: onNavLogoutClick
+      }
+    ),
     backgroundSlot && /* @__PURE__ */ jsxRuntime.jsx(BackgroundPane, { children: backgroundSlot }),
     /* @__PURE__ */ jsxRuntime.jsx(MainPane, { children: mainPaneSlot }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -1456,10 +1544,8 @@ function ActionButtonItem({ icon, label, onClick, isActive, size, isPrimary }) {
 }
 function ActionButtons({
   onCalendarClick,
-  onSettingsClick,
   onChatClick,
   isCalendarActive = false,
-  isSettingsActive = false,
   isChatActive = false,
   className
 }) {
@@ -1474,16 +1560,6 @@ function ActionButtons({
         size: 32
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ActionButtonItem,
-      {
-        icon: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "settings-3-fill", size: 16, color: tokens.colors.text.secondary }),
-        label: "Settings",
-        onClick: onSettingsClick,
-        isActive: isSettingsActive,
-        size: 32
-      }
-    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       ActionButtonItem,
       {
@@ -1507,30 +1583,31 @@ var Container6 = styled11__default.default.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__default.default.div`
@@ -2124,7 +2201,7 @@ styled11__default.default.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};
   }
 
@@ -2385,7 +2462,7 @@ var ItemName = styled11__default.default.span`
   min-width: 0;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    font-size: 13px;
+    font-size: ${tokens.typography.fontSize.sm};
   }
 
   ${ItemContainer}:hover & {
@@ -2477,7 +2554,7 @@ styled11__default.default.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};
 
@@ -2564,7 +2641,7 @@ var ConnectionDescription = styled11__default.default.p`
 var GoogleButton = styled11__default.default.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})`};
@@ -2700,8 +2777,8 @@ function WorkflowGroupItem({
   return /* @__PURE__ */ jsxRuntime.jsxs(CategoryDisclosure, { id: groupId, children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Heading, { level: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(CategoryHeader, { slot: "trigger", style: { paddingLeft: "8px" }, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(CategoryTitle, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "13px", fontWeight: 500 }, children: group.workflowName }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "11px", color: tokens.colors.text.tertiary, marginLeft: "8px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: tokens.typography.fontSize.base, fontWeight: 500 }, children: group.workflowName }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: tokens.typography.fontSize.sm, color: tokens.colors.text.tertiary, marginLeft: "8px" }, children: [
           "(",
           group.runs.length,
           ")"
@@ -3178,7 +3255,7 @@ function PaneSectionHeader({
   brand = "Google",
   onBackClick,
   onSettingsClick,
-  settingsIcon = "settings-fill",
+  settingsIcon = "flow-chart",
   className,
   "aria-label": ariaLabel = "Pane section header"
 }) {
@@ -3196,7 +3273,7 @@ function PaneSectionHeader({
   const { buttonProps: settingsButtonProps } = button.useButton(
     {
       onPress: onSettingsClick,
-      "aria-label": "Settings"
+      "aria-label": "Workflow configuration"
     },
     settingsButtonRef
   );
@@ -3367,7 +3444,7 @@ var NotificationItemWrapper = styled11__default.default.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"};
@@ -3647,7 +3724,7 @@ var StyledUserMessage = styled11__default.default.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;
@@ -3989,6 +4066,11 @@ var Card = styled11__default.default.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};
   }
@@ -4001,6 +4083,10 @@ var ContentHeader = styled11__default.default.div`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.sm};
+
+  @media (max-width: 480px) {
+    gap: ${tokens.spacing.xs};
+  }
 `;
 var IconWrapper3 = styled11__default.default.div`
   width: 40px;
@@ -4008,7 +4094,7 @@ var IconWrapper3 = styled11__default.default.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;
 `;
@@ -8079,12 +8165,12 @@ var fadeIn2 = styled11.keyframes`
 `;
 var CardContainer = styled11__default.default.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`};
@@ -8104,7 +8190,7 @@ var PlatformIcon = styled11__default.default.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};
@@ -8153,7 +8239,7 @@ var PostContentEditable = styled11__default.default.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;
@@ -8217,7 +8303,7 @@ var ProgressBarFill2 = styled11__default.default.div`
 `;
 var ImagePreviewContainer = styled11__default.default.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};
 `;
@@ -8239,7 +8325,7 @@ var ImagePlaceholder = styled11__default.default.div`
     #cc2366 75%,
     #bc1888 100%
   );
-  border-radius: ${tokens.borderRadius.md};
+  border-radius: ${tokens.borderRadius.sm};
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -8254,7 +8340,7 @@ var PlaceholderIcon = styled11__default.default.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;
@@ -8841,7 +8927,7 @@ var Card2 = styled11__default.default.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};
@@ -8933,7 +9019,7 @@ var TransactionItem = styled11__default.default.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__default.default.span`
   width: 24px;
@@ -9099,12 +9185,22 @@ var WorkflowName2 = styled11__default.default.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__default.default.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__default.default.div`
   display: flex;
@@ -9113,11 +9209,13 @@ var CardFooter = styled11__default.default.div`
   gap: ${tokens.spacing.sm};
   padding-top: ${tokens.spacing.sm};
   border-top: 1px solid ${tokens.colors.border.subtle};
+  width: 100%;
 `;
 var IntegrationList = styled11__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
+  flex-shrink: 0;
 `;
 var IntegrationIconWrapper = styled11__default.default.span`
   display: flex;
@@ -9129,6 +9227,7 @@ var IntegrationIconWrapper = styled11__default.default.span`
   background: ${tokens.colors.background.light};
   opacity: ${({ $connected }) => $connected ? 1 : 0.4};
   position: relative;
+  flex-shrink: 0;
 
   ${({ $connected }) => !$connected && `
     &::after {
@@ -9148,8 +9247,10 @@ var IntegrationIcon = styled11__default.default.img`
 var Indicators = styled11__default.default.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__default.default.span`
   display: inline-flex;