fix dialog overflow & user badges

src/lib/components/data/machine/MachineInfo.svelte

@@ -29,6 +29,7 @@
 
 	import MachineActions from './MachineActions.svelte';
 	import MachineStatus from './MachineStatus.svelte';
+	import { invertHex } from '$lib/utils/misc';
 	// import DeleteMachine from './DeleteMachine.svelte';
 	// import EditMachine from './EditMachine.svelte';
 
@@ -136,14 +137,20 @@
 	</Sheet.Description>
 
 	<div class="flex flex-wrap items-center gap-x-1.5 gap-y-2 pt-1">
+		<Badge
+			style="color: {invertHex(machine.color.replace(/^#/, ''))}; background-color: {machine.color}"
+		>
+			User: {machine.user?.name}
+		</Badge>
+
 		{#if machine.expiry}
 			{#if isExpired(machine.expiry)}
 				<Badge variant="destructive">
-					Session expired {new Date(machine.expiry).toDateString()}
+					Session expired: {new Date(machine.expiry).toDateString()}
 				</Badge>
 			{:else}
 				<Badge variant="positive">
-					Session expires {neverExpires(machine.expiry)
+					Session expires: {neverExpires(machine.expiry)
 						? 'never'
 						: formatDuration(Date.now() - new Date(machine.expiry).getTime())}
 				</Badge>

src/lib/components/ui/dialog/dialog-content.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-	import X from "lucide-svelte/icons/x";
-	import * as Dialog from "./index.js";
-	import { cn, flyAndScale } from "$lib/utils/shadcn.js";
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import X from 'lucide-svelte/icons/x';
+	import * as Dialog from './index.js';
+	import { cn, flyAndScale } from '$lib/utils/shadcn.js';
 
 	type $$Props = DialogPrimitive.ContentProps;
 
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = {
-		duration: 200,
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = flyAndScale;
+	export let transitionConfig: $$Props['transitionConfig'] = {
+		duration: 200
 	};
 	export { className as class };
 </script>
@@ -20,14 +20,14 @@
 		{transition}
 		{transitionConfig}
 		class={cn(
-			"bg-background fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg sm:rounded-lg md:w-full",
+			'fixed left-[50%] top-[50%] z-50 grid max-h-[80svh] w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-scroll border bg-background p-6 shadow-lg sm:rounded-lg md:w-full',
 			className
 		)}
 		{...$$restProps}
 	>
 		<slot />
 		<DialogPrimitive.Close
-			class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
+			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
 		>
 			<X class="h-4 w-4" />
 			<span class="sr-only">Close</span>

src/lib/mock/handlers.ts

@@ -168,7 +168,7 @@ export const handlers = [
 						name: usernames[userId]
 					},
 					ipAddresses: [
-						`100.64.${Math.trunc((id + 1) / 255)}.${(id + 1) % 255}`,
+						`100.64.${((id + 1) / 255).toFixed(0)}.${(id + 1) % 255}`,
 						'fd7a:115c:a1e0::' + (id + 1).toString(16)
 					]
 				};

src/lib/utils/misc.ts

@@ -7,3 +7,7 @@ export function debounce<T extends Array<any>>(callback: (...args: T) => void, w
 		}, wait);
 	};
 }
+
+export function invertHex(hex: string) {
+	return (Number(`0x1${hex}`) ^ 0xffffff).toString(16).substr(1).toUpperCase();
+}