fix: menu should work even with ssh target

app/routes/machines/components/menu.tsx

@@ -1,5 +1,6 @@
 import { Cog, Ellipsis, SquareTerminal } from 'lucide-react';
 import { useState } from 'react';
+import Button from '~/components/Button';
 import Menu from '~/components/Menu';
 import type { User } from '~/types';
 import cn from '~/utils/cn';
@@ -32,7 +33,7 @@ export default function MachineMenu({
 		node.hostInfo?.sshHostKeys && node.hostInfo?.sshHostKeys.length > 0;
 
 	return (
-		<>
+		<div className="flex items-center justify-end px-4 gap-1.5">
 			{modal === 'remove' && (
 				<Delete
 					machine={node}
@@ -90,71 +91,66 @@ export default function MachineMenu({
 				/>
 			)}
 
+			{supportsTailscaleSSH ? (
+				isFullButton ? (
+					<Button
+						className="flex items-center gap-x-2"
+						variant="heavy"
+						onPress={() => {
+							// We need to use JS to open the SSH URL
+							// in a new WINDOW since href can only
+							// do a new TAB.
+							window.open(
+								`${__PREFIX__}/ssh?hostname=${node.name}`,
+								'_blank',
+								'noopener,noreferrer,width=800,height=600',
+							);
+						}}
+					>
+						<SquareTerminal className="h-5" />
+						<p>SSH</p>
+					</Button>
+				) : (
+					<Button
+						onPress={() => {
+							// We need to use JS to open the SSH URL
+							// in a new WINDOW since href can only
+							// do a new TAB.
+							window.open(
+								`${__PREFIX__}/ssh?hostname=${node.name}`,
+								'_blank',
+								'noopener,noreferrer,width=800,height=600',
+							);
+						}}
+						className={cn(
+							'py-0.5 w-fit bg-transparent border-transparent',
+							'border group-hover:border-headplane-200',
+							'dark:group-hover:border-headplane-700',
+							'opacity-0 pointer-events-none group-hover:opacity-100',
+							'group-hover:pointer-events-auto',
+						)}
+					>
+						SSH
+					</Button>
+				)
+			) : undefined}
 			<Menu isDisabled={isDisabled}>
 				{isFullButton ? (
-					<div className="flex items-center justify-end gap-1.5 pr-4">
+					<Menu.Button className="flex items-center gap-x-2">
-						{supportsTailscaleSSH ? (
+						<Cog className="h-5" />
-							<Menu.Button
+						<p>Machine Settings</p>
-								className="flex items-center gap-x-2"
+					</Menu.Button>
-								variant="heavy"
-								onPress={() => {
-									// We need to use JS to open the SSH URL
-									// in a new WINDOW since href can only
-									// do a new TAB.
-									window.open(
-										// TODO: Use the actual real username lol
-										`${__PREFIX__}/ssh?hostname=${node.name}&username=tale`,
-										'_blank',
-										'noopener,noreferrer,width=800,height=600',
-									);
-								}}
-							>
-								<SquareTerminal className="h-5" />
-								<p>SSH</p>
-							</Menu.Button>
-						) : undefined}
-						<Menu.Button className="flex items-center gap-x-2">
-							<Cog className="h-5" />
-							<p>Machine Settings</p>
-						</Menu.Button>
-					</div>
 				) : (
-					<div className="flex items-center justify-end gap-1.5 pr-4">
+					<Menu.IconButton
-						{supportsTailscaleSSH ? (
+						label="Machine Options"
-							<Menu.Button
+						className={cn(
-								onPress={() => {
+							'py-0.5 w-10 bg-transparent border-transparent',
-									// We need to use JS to open the SSH URL
+							'border group-hover:border-headplane-200',
-									// in a new WINDOW since href can only
+							'dark:group-hover:border-headplane-700',
-									// do a new TAB.
+						)}
-									window.open(
+					>
-										// TODO: Use the actual real username lol
+						<Ellipsis className="h-5" />
-										`${__PREFIX__}/ssh?hostname=${node.name}&username=tale`,
+					</Menu.IconButton>
-										'_blank',
-										'noopener,noreferrer,width=800,height=600',
-									);
-								}}
-								className={cn(
-									'py-0.5 w-fit bg-transparent border-transparent',
-									'border group-hover:border-headplane-200',
-									'dark:group-hover:border-headplane-700',
-									'opacity-0 pointer-events-none group-hover:opacity-100',
-									'group-hover:pointer-events-auto',
-								)}
-							>
-								SSH
-							</Menu.Button>
-						) : undefined}
-						<Menu.IconButton
-							label="Machine Options"
-							className={cn(
-								'py-0.5 w-10 bg-transparent border-transparent',
-								'border group-hover:border-headplane-200',
-								'dark:group-hover:border-headplane-700',
-							)}
-						>
-							<Ellipsis className="h-5" />
-						</Menu.IconButton>
-					</div>
 				)}
 				<Menu.Panel
 					onAction={(key) => setModal(key as Modal)}
@@ -176,6 +172,6 @@ export default function MachineMenu({
 					</Menu.Section>
 				</Menu.Panel>
 			</Menu>
-		</>
+		</div>
 	);
 }