WEBDIENSTE/openswarm
1
0
Fork 0
mirror of https://github.com/openswarm-ai/openswarm.git synced 2026-09-26 19:44:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

[eric] tools: status column gets real room and contained wrapping, connected rows stop clipping off the table

Browse Source
This commit is contained in:
ciregenz
2026-08-05 17:27:47 -07:00
parent bc1435d78f
commit 9046dfbaa6
5 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/pages/Tools/Tools.tsx
+1 -1
View File
@@ -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>
frontend/src/app/pages/Tools/cards/BrowserPermissionCard.tsx
+1 -1
View File
@@ -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={{
frontend/src/app/pages/Tools/cards/CustomToolCard.tsx
+3 -3
View File
@@ -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}
frontend/src/app/pages/Tools/cards/IntegrationGalleryCard.tsx
+1 -1
View File
@@ -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',
frontend/src/app/pages/Tools/cards/ToolSection.tsx
+1 -1
View File
@@ -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={{