Pipeline visualizer icon sizing

Author: SpicyPete

frontend/src/components/debug-helper/debug-dialog.tsx

@@ -690,21 +690,16 @@ export function DebugDialog({ open, onOpenChange }: { open: boolean; onOpenChang
         </DialogBody>
 
         <DialogFooter direction="row" justify="between">
-          <div className="flex items-center gap-3">
+          <span className="flex items-center gap-2">
             <Text className="text-muted-foreground" variant="small">
-              Dev-only · {IsDev ? 'enabled' : 'disabled'}
+              toggle
             </Text>
-            <span className="flex items-center gap-2">
-              <Text className="text-muted-foreground" variant="small">
-                toggle
-              </Text>
-              <KbdGroup>
-                <Kbd size="xs">⌃/⌘</Kbd>
-                <Kbd size="xs">⇧</Kbd>
-                <Kbd size="xs">D</Kbd>
-              </KbdGroup>
-            </span>
-          </div>
+            <KbdGroup>
+              <Kbd size="xs">⌃/⌘</Kbd>
+              <Kbd size="xs">⇧</Kbd>
+              <Kbd size="xs">D</Kbd>
+            </KbdGroup>
+          </span>
           <Button onClick={close} size="sm" variant="secondary-ghost">
             Close
           </Button>

frontend/src/components/pages/rp-connect/onboarding/connector-logo.tsx

@@ -1,4 +1,5 @@
 import { type ComponentName, componentLogoMap } from 'assets/connectors/component-logo-map';
+import { cn } from 'components/redpanda-ui/lib/utils';
 
 export const ConnectorLogo = ({
   name,
@@ -10,5 +11,16 @@ export const ConnectorLogo = ({
   style?: React.CSSProperties;
 }) => {
   const Component = componentLogoMap[name];
-  return Component ? <Component className={className} style={style} /> : null;
+  if (!Component) {
+    return null;
+  }
+  // Wrap in a sized container so taller-than-wide logos (e.g. MongoDB's leaf,
+  // viewBox 256×549) can't blow out the row height. The inner SVG fills the
+  // wrapper and `preserveAspectRatio="xMidYMid meet"` (SVG default) letterboxes
+  // the content to keep each logo's natural aspect ratio.
+  return (
+    <span className={cn('inline-flex shrink-0 items-center justify-center', className)} style={style}>
+      <Component className="block h-full max-h-full w-full max-w-full" />
+    </span>
+  );
 };

frontend/src/components/pages/rp-connect/pipeline/index.tsx

@@ -1064,7 +1064,7 @@ export default function PipelinePage() {
               creating a new user.
             </DialogDescription>
           </DialogHeader>
-          <DialogBody>
+          <DialogBody padding="none">
             {connectorTopics && connectorTopics.length > 1 && (
               <Alert variant="warning">
                 <AlertTitle>Multiple topics configured</AlertTitle>
@@ -1075,7 +1075,6 @@ export default function PipelinePage() {
               </Alert>
             )}
             <AddUserStep
-              className="border"
               hideTitle
               ref={userStepRef}
               showConsumerGroupFields={userDialog.target?.section === 'input'}