fix(web): prevent tool card footer clipping (#41430)

web/app/components/integrations/tool-provider-card.tsx

@@ -128,25 +128,25 @@ function IntegrationsToolProviderCard({
         </div>
       </div>
       <div className="flex h-6.5 w-full items-center gap-2 px-3 pt-1.5 pb-1">
-        <div className="flex h-4 min-w-0 shrink-0 items-center gap-0.5 system-xs-regular">
+        <div className="flex h-4 min-w-0 flex-1 items-center gap-0.5 system-xs-regular">
           {!!org && (
             <>
-              <div className="truncate text-text-tertiary" title={org}>
+              <div className="min-w-0 flex-1 truncate text-text-tertiary" title={org}>
                 {org}
               </div>
-              <div className="text-text-quaternary">/</div>
+              <div className="shrink-0 text-text-quaternary">/</div>
             </>
           )}
-          <div className="truncate text-text-tertiary" title={name}>
+          <div className="min-w-0 flex-1 truncate text-text-tertiary" title={name}>
             {name}
           </div>
         </div>
         {toolsCount > 0 && (
           <>
             <div className="shrink-0 system-xs-regular text-text-quaternary">·</div>
-            <div className="flex min-w-0 flex-1 items-center gap-1">
+            <div className="flex shrink-0 items-center gap-1">
               <RiLoginCircleLine className="size-3 shrink-0 text-text-tertiary" />
-              <div className="truncate system-xs-regular text-text-tertiary">
+              <div className="system-xs-regular text-text-tertiary">
                 {t(($) => $['mcp.toolsCount'], { ns: 'tools', count: toolsCount })}
               </div>
             </div>

web/app/components/plugins/card/base/org-info.tsx

@@ -9,18 +9,24 @@ type Props = Readonly<{
 
 const OrgInfo = ({ className, orgName, packageName, packageNameClassName }: Props) => {
   return (
-    <div className={cn('flex h-4 items-center space-x-0.5', className)}>
+    <div className={cn('flex h-4 min-w-0 items-center gap-0.5', className)}>
       {orgName && (
         <>
-          <span className="shrink-0 system-xs-regular text-text-tertiary">{orgName}</span>
+          <span
+            className="min-w-0 flex-1 truncate system-xs-regular text-text-tertiary"
+            title={orgName}
+          >
+            {orgName}
+          </span>
           <span className="shrink-0 system-xs-regular text-text-quaternary">/</span>
         </>
       )}
       <span
         className={cn(
-          'w-0 shrink-0 grow truncate system-xs-regular text-text-tertiary',
+          'w-0 min-w-0 grow truncate system-xs-regular text-text-tertiary',
           packageNameClassName,
         )}
+        title={packageName}
       >
         {packageName}
       </span>

web/app/components/tools/mcp/__tests__/provider-card.spec.tsx

@@ -192,6 +192,12 @@ describe('MCPCard', () => {
       render(<MCPCard {...defaultProps} data={dataWithNoTools} />, { wrapper: createWrapper() })
       expect(screen.getByText('tools.mcp.noConfigured')).toBeInTheDocument()
     })
+
+    it('should show update time when not configured', () => {
+      const dataNotConfigured = createMockData({ tools: [], is_team_authorization: false })
+      render(<MCPCard {...defaultProps} data={dataNotConfigured} />, { wrapper: createWrapper() })
+      expect(screen.getByText(/tools.mcp.updateTime/)).toBeInTheDocument()
+    })
   })
 
   describe('Selected State', () => {

web/app/components/tools/mcp/provider-card.tsx

@@ -64,14 +64,14 @@ const MCPCard = ({ currentProvider, data, onEdit, onDelete, handleSelect }: Prop
           </div>
         </div>
         <div className="flex items-center gap-1 rounded-b-xl pt-1.5 pr-2.5 pb-2.5 pl-4">
-          <div className="flex w-0 grow items-center gap-2">
+          <div className="flex min-w-0 flex-1 items-center gap-2">
             {data.tools.length > 0 && (
-              <div className="shrink-0 system-xs-regular text-text-tertiary">
+              <div className="min-w-0 truncate system-xs-regular text-text-tertiary">
                 {t(($) => $['mcp.toolsCount'], { ns: 'tools', count: data.tools.length })}
               </div>
             )}
             {!data.tools.length && (
-              <div className="shrink-0 system-xs-regular text-text-tertiary">
+              <div className="min-w-0 truncate system-xs-regular text-text-tertiary">
                 {t(($) => $['mcp.noTools'], { ns: 'tools' })}
               </div>
             )}

web/app/components/tools/provider/tool-card-skeleton.tsx

@@ -91,7 +91,7 @@ const MCPCardSkeleton = () => (
       </div>
     </div>
     <div className="flex items-center gap-1 rounded-b-xl pt-1.5 pr-2.5 pb-2.5 pl-4">
-      <div className="flex w-0 grow items-center gap-2">
+      <div className="flex min-w-0 flex-1 items-center gap-2">
         <SkeletonRectangle className="h-3 w-16 animate-pulse" />
         <SkeletonPoint />
         <SkeletonRectangle className="h-3 w-24 animate-pulse" />