From 9046dfbaa613411a9ab23fae5ddb2913f49c5b76 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 5 Aug 2026 17:27:47 -0700
Subject: [PATCH] [eric] tools: status column gets real room and contained
 wrapping, connected rows stop clipping off the table

---
 frontend/src/app/pages/Tools/Tools.tsx                      | 2 +-
 .../src/app/pages/Tools/cards/BrowserPermissionCard.tsx     | 2 +-
 frontend/src/app/pages/Tools/cards/CustomToolCard.tsx       | 6 +++---
 .../src/app/pages/Tools/cards/IntegrationGalleryCard.tsx    | 2 +-
 frontend/src/app/pages/Tools/cards/ToolSection.tsx          | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/pages/Tools/Tools.tsx b/frontend/src/app/pages/Tools/Tools.tsx
index bb3eaa3d..c173a800 100644
--- a/frontend/src/app/pages/Tools/Tools.tsx
+++ b/frontend/src/app/pages/Tools/Tools.tsx
@@ -156,7 +156,7 @@ const Tools: React.FC<ToolsProps> = ({ onBrowseConnectors, expandToolId }) => {
           <PopularConnectorsRow integrations={popularUninstalled} loading={a.integrationLoading} onConnect={a.handleIntegrationToggle} />
         )}
         <Box sx={{ border: `1px solid ${c.border.subtle}`, borderRadius: '12px', overflow: 'hidden', bgcolor: c.bg.surface }}>
-          <Box sx={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 130px 150px', gap: 2, px: 2, py: 1.1, borderBottom: `1px solid ${c.border.subtle}` }}>
+          <Box sx={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 110px 200px', gap: 2, px: 2, py: 1.1, borderBottom: `1px solid ${c.border.subtle}` }}>
             <Typography sx={{ color: c.text.tertiary, fontSize: '0.8125rem' }}>Connector</Typography>
             <Typography sx={{ color: c.text.tertiary, fontSize: '0.8125rem' }}>Type</Typography>
             <Typography sx={{ color: c.text.tertiary, fontSize: '0.8125rem', textAlign: 'right' }}>Status</Typography>
diff --git a/frontend/src/app/pages/Tools/cards/BrowserPermissionCard.tsx b/frontend/src/app/pages/Tools/cards/BrowserPermissionCard.tsx
index 5e7f93c2..84d4e791 100644
--- a/frontend/src/app/pages/Tools/cards/BrowserPermissionCard.tsx
+++ b/frontend/src/app/pages/Tools/cards/BrowserPermissionCard.tsx
@@ -52,7 +52,7 @@ const BrowserPermissionCard: React.FC<BrowserPermissionCardProps> = ({
           <CardContent sx={{ py: 1.4, px: 2, '&:last-child': { pb: 1.4 } }}>
             <Box
               onClick={() => browserSectionEnabled && onToggleOpen()}
-              sx={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 130px 150px', alignItems: 'center', gap: 2, cursor: browserSectionEnabled ? 'pointer' : 'default' }}
+              sx={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 110px 200px', alignItems: 'center', gap: 2, cursor: browserSectionEnabled ? 'pointer' : 'default' }}
             >
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, minWidth: 0 }}>
                 <Box sx={{
diff --git a/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx b/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx
index 68a53d2b..34b2490f 100644
--- a/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx
+++ b/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx
@@ -104,7 +104,7 @@ const CustomToolCard: React.FC<CustomToolCardProps> = ({
                   >
                     <CardContent sx={{ py: 1.4, px: 2, '&:last-child': { pb: 1.4 } }}>
                       <Box
-                        sx={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 130px 150px', alignItems: 'center', gap: 2, cursor: isDisabled ? 'default' : 'pointer' }}
+                        sx={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 110px 200px', alignItems: 'center', gap: 2, cursor: isDisabled ? 'default' : 'pointer' }}
                         data-onboarding={isYoutube ? 'actions-youtube-chevron' : isReddit ? 'actions-reddit-chevron' : undefined}
                         onClick={() => !isDisabled && onToggleExpand(tool.id, isExpanded)}
                       >
@@ -137,7 +137,7 @@ const CustomToolCard: React.FC<CustomToolCardProps> = ({
                           </Box>
                         </Box>
                         <Typography sx={{ color: c.text.secondary, fontSize: '0.8125rem' }}>{isMcp ? (isStdio ? 'MCP · stdio' : 'MCP') : 'Custom'}</Typography>
-                        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 0.25 }}>
+                        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 0.25, minWidth: 0, overflow: 'hidden', '& .MuiChip-root': { maxWidth: '100%' }, '& .MuiButton-root': { whiteSpace: 'nowrap' } }}>
                           {tool.auth_status === 'connected' && (
                             <Typography sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.4, color: c.status.success, fontSize: '0.75rem', fontWeight: 600 }}>
                               <CheckCircleIcon sx={{ fontSize: 13 }} /> Connected
@@ -148,7 +148,7 @@ const CustomToolCard: React.FC<CustomToolCardProps> = ({
                               <SettingsIcon sx={{ fontSize: 13 }} /> Configured
                             </Typography>
                           )}
-                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25 }}>
+                          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 0.25, flexWrap: 'wrap', minWidth: 0, maxWidth: '100%' }}>
                             <CustomToolConnect
                               tool={tool}
                               ig={ig}
diff --git a/frontend/src/app/pages/Tools/cards/IntegrationGalleryCard.tsx b/frontend/src/app/pages/Tools/cards/IntegrationGalleryCard.tsx
index 5a89cb47..06ff162e 100644
--- a/frontend/src/app/pages/Tools/cards/IntegrationGalleryCard.tsx
+++ b/frontend/src/app/pages/Tools/cards/IntegrationGalleryCard.tsx
@@ -23,7 +23,7 @@ const IntegrationGalleryCard: React.FC<IntegrationGalleryCardProps> = ({ integra
                     sx={{ bgcolor: 'transparent', border: 'none', borderRadius: 0, boxShadow: 'none', borderBottom: `1px solid ${c.border.subtle}`, '&:last-of-type': { borderBottom: 'none' }, '&:hover': { bgcolor: c.bg.elevated }, transition: 'background-color 0.12s' }}
                   >
                     <CardContent sx={{ py: 1.4, px: 2, '&:last-child': { pb: 1.4 } }}>
-                      <Box sx={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 130px 150px', alignItems: 'center', gap: 2 }}>
+                      <Box sx={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 110px 200px', alignItems: 'center', gap: 2 }}>
                         <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, minWidth: 0 }}>
                           <Box sx={{
                             width: 34, height: 34, borderRadius: '9px', display: 'flex', alignItems: 'center', justifyContent: 'center',
diff --git a/frontend/src/app/pages/Tools/cards/ToolSection.tsx b/frontend/src/app/pages/Tools/cards/ToolSection.tsx
index ba9f434f..df9008a9 100644
--- a/frontend/src/app/pages/Tools/cards/ToolSection.tsx
+++ b/frontend/src/app/pages/Tools/cards/ToolSection.tsx
@@ -98,7 +98,7 @@ const ToolSection: React.FC<ToolSectionProps> = ({
     <CardContent sx={{ py: 1.4, px: 2, '&:last-child': { pb: 1.4 } }}>
       <Box
         onClick={() => enabled && onToggle()}
-        sx={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 130px 150px', alignItems: 'center', gap: 2, cursor: enabled ? 'pointer' : 'default' }}
+        sx={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 110px 200px', alignItems: 'center', gap: 2, cursor: enabled ? 'pointer' : 'default' }}
       >
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, minWidth: 0 }}>
           <Box sx={{