fix bugs

Author: FgrReloaded

apps/web/src/app/(home)/_components/CommandDisplay.tsx

@@ -18,7 +18,7 @@ export function CommandDisplay({ command }: CommandDisplayProps) {
 
 	return (
 		<div className="relative group">
-			<div className="bg-gray-950/20 backdrop-blur-xl border border-gray-800 rounded-lg p-4 font-mono text-sm text-gray-300 overflow-x-auto">
+			<div className="bg-gray-950/20 w-fit backdrop-blur-xl border border-gray-800 rounded-lg p-4 font-mono text-sm text-gray-300 overflow-x-auto">
 				<button
 					type="button"
 					onClick={copyToClipboard}

apps/web/src/app/(home)/_components/CustomizableStack.tsx

@@ -146,7 +146,9 @@ const CustomizableStack = () => {
 		}
 
 		if (activeNodes.auth !== "better-auth") {
-			flags.splice(flags.indexOf("-y"), 1);
+			if (flags.includes("-y")) {
+				flags.splice(flags.indexOf("-y"), 1);
+			}
 			flags.push("--no-auth");
 		}
 
@@ -159,14 +161,14 @@ const CustomizableStack = () => {
 			<div className="absolute -top-16 left-1/2 -translate-x-1/2 z-50 w-96">
 				<CommandDisplay command={generateCommand()} />
 			</div>
-			<div className="bg-gray-950/10 p-4 absolute top-4 right-4 z-50 w-96 rounded-xl border border-gray-800 backdrop-blur-3xl">
-				<div className="text-sm text-gray-300">
+			<div className="bg-gray-950/10 p-4 absolute top-4 right-4 z-50 w-80 rounded-xl border border-gray-800 backdrop-blur-3xl">
+				<div className="text-sm text-gray-300 text-center">
 					Select technologies from the left panel to customize your stack. The
 					graph will automatically update connections.
 				</div>
 			</div>
 			<div className="absolute inset-0 backdrop-blur-3xl bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 rounded-xl" />
-			<div className="h-[600px] relative backdrop-blur-sm bg-gray-950/50 rounded-xl overflow-hidden border border-gray-800">
+			<div className="h-[600px] pl-28 relative backdrop-blur-sm bg-gray-950/50 rounded-xl overflow-hidden border border-gray-800">
 				<ReactFlow
 					nodes={nodes}
 					edges={edges}

apps/web/src/app/(home)/_components/TechNodeComponent.tsx

@@ -33,11 +33,13 @@ export function TechNodeComponent({ data }: { data: TechNodeData }) {
 
 	return (
 		<div className="relative group">
-			<Handle
-				type="target"
-				position={Position.Top}
-				className="!w-1.5 !h-1.5 !bg-indigo-400/70"
-			/>
+			{data.label !== "Bun" && (
+				<Handle
+					type="target"
+					position={Position.Top}
+					className="!w-1.5 !h-1.5 !bg-indigo-400/70"
+				/>
+			)}
 
 			<div className={`${baseStyles} ${activeStyles} backdrop-blur-3xl`}>
 				<div className="text-white font-medium text-sm tracking-wide mb-1.5">