More Docker UI Alignment

Author: colinmcneil

src/extension/ui/src/components/tabs/YourClients.tsx

@@ -158,7 +158,7 @@ const MCPClientSettings = ({ mcpClientStates, onUpdate, setButtonsLoading, butto
                 <IconButton onClick={() => navigator.clipboard.writeText(DOCKER_MCP_COMMAND)}>
                     <ContentCopy />
                 </IconButton>
-                <Typography variant="caption" sx={theme => ({ backgroundColor: theme.palette.grey[200], padding: 1, borderRadius: 1, fontFamily: 'monospace', whiteSpace: 'nowrap', overflow: 'auto' })}>
+                <Typography variant="caption" sx={theme => ({ backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.default : theme.palette.grey[200], padding: 1, borderRadius: 1, fontFamily: 'monospace', whiteSpace: 'nowrap', overflow: 'auto', color: 'text.primary' })}>
                     {DOCKER_MCP_COMMAND}
                 </Typography>
             </Stack>

src/extension/ui/src/components/tabs/YourTools.tsx

@@ -44,8 +44,8 @@ const YourTools: React.FC<YourToolsProps> = ({
                 const unassignedSecrets = catalogItem?.secrets?.filter((s: any) => !secrets.find((s: any) => s.name === s)) || [];
                 if (!catalogItem) return <Grid2 size={{ xs: 12, sm: 6, md: 4 }} key={name}>
                     <Alert severity="error">
-                        <AlertTitle>Catalog item not found</AlertTitle>
-                        You have registered a tile named <strong>{name}</strong> but it is not in the catalog.If this is not intentional, the catalog may have changed since.
+                        <AlertTitle><strong>{name}</strong> not in catalog</AlertTitle>
+                        You have registered a tile named <strong>{name}</strong> but it is not in the catalog. If this is not intentional, the catalog may have changed since.
                     </Alert>
                 </Grid2>;
                 return (

src/extension/ui/src/components/tile/Tile.tsx

@@ -80,14 +80,14 @@ const Tile = ({ item, registered, onSecretChange, secrets, ActionsSlot }: TilePr
                     </Stack>
                 </DialogContent>
             </Dialog>
-            <Card sx={(theme) => ({ height: 140, borderColor: 'divider', borderWidth: 1, borderStyle: 'solid' })} >
+            <Card sx={{ height: 130, borderColor: 'divider', borderWidth: 1, borderStyle: 'solid' }} >
                 <Stack direction="column" height="100%" sx={{ justifyContent: 'space-between' }}>
                     <CardContent sx={{ paddingBottom: 0, paddingTop: 2 }}>
                         <Stack direction="column" spacing={0}>
                             <Stack direction="row" spacing={0} justifyContent="space-between">
                                 <CardMedia
                                     component="img"
-                                    sx={{ width: '3em', height: '3em', padding: 1, background: 'white', borderRadius: 1, boxSizing: 'border-box', mt: -1, ml: -1 }}
+                                    sx={{ width: '30px', height: '30px', padding: '2px', background: 'white', borderRadius: 1, boxSizing: 'border-box', mt: '-1px', ml: '-1px' }}
                                     alt={`Icon for ${item.name}`}
                                     image={item.icon}
                                 />
@@ -102,7 +102,7 @@ const Tile = ({ item, registered, onSecretChange, secrets, ActionsSlot }: TilePr
                             </Tooltip>
                         </Stack>
                     </CardContent>
-                    <CardActions sx={{ px: 1.5, height: 30 }}>
+                    <CardActions sx={{ px: 1, height: 30 }}>
                         {ActionsSlot}
                     </CardActions>
                 </Stack >