fix: ui

apps/ui/src/lib/components/ContextMenu.svelte

@@ -1,4 +1,4 @@
-<nav class="header justify-between px-0 mb-5" style="border-bottom: 2px solid #666;">
+<nav class="header justify-between px-2 mb-5 lg:px-10">
 	<slot />
-  <slot name="actions"></slot>
+	<slot name="actions" />
 </nav>

apps/ui/src/lib/components/badges/DestinationBadge.svelte

@@ -1,14 +1,13 @@
 <script>
-	import Tooltip from "../Tooltip.svelte";
+	import Tooltip from '../Tooltip.svelte';
 	import { initials } from '$lib/common';
 	export let name;
 	export let thingId;
 	let id = 'destination' + thingId;
-  
 </script>
 
 {#if (name || '').length > 0}
-  <span class="badge rounded uppercase text-xs	" id={id}>
+	<span class="badge rounded uppercase text-xs	" {id}>
 		{initials(name)}
 	</span>
 	<Tooltip triggeredBy="#{id}" placement="right">{name}</Tooltip>

apps/ui/src/lib/components/badges/StatusBadge.svelte

@@ -1,21 +1,22 @@
 <script lang="ts">
-  import {getStatus} from '$lib/container/status'
+	import { getStatus } from '$lib/container/status';
 
 	import { onDestroy, onMount } from 'svelte';
 	export let thing: any;
-  let getting = getStatus(thing)
+	let getting = getStatus(thing);
 	let refreshing: any;
 	let status: any;
 	// AutoUpdates Status every 5 seconds
 	onMount(() => {
 		refreshing = setInterval(() => {
-      getStatus(thing).then( (r) => status = r )
+			getStatus(thing).then((r) => (status = r));
-    }, 5000)
+		}, 5000);
-  })
+	});
 	onDestroy(() => {
 		clearInterval(refreshing);
-  })
+	});
 </script>
+
 {#await getting}
 	<span class="badge badge-lg rounded uppercase">...</span>
 {:then status}

apps/ui/src/lib/components/badges/TeamsBadge.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Tooltip from "../Tooltip.svelte";
+	import Tooltip from '../Tooltip.svelte';
 	import { initials } from '$lib/common';
 	export let teams: any;
 	export let thing: any;
@@ -7,11 +7,10 @@
 </script>
 
 <span>
-  🏢
 	{#each teams as team}
-    <a href={`/iam/teams/${team.id}`} {id} style="color: #99f8; text-decoration: none;">
+		<a href={`/iam/teams/${team.id}`} {id} class="no-underline">
-			{initials(team.name)}
+			Team: {initials(team.name)}
 		</a>
-    <Tooltip triggeredBy="#{id}" placement="right" color="bg-sky-500/50">{team.name}</Tooltip>
+		<Tooltip triggeredBy="#{id}" placement="right" color="bg-destinations">{team.name}</Tooltip>
 	{/each}
 </span>

apps/ui/src/lib/components/grids/Grid3.svelte

@@ -1,3 +1,5 @@
-<div class="grid grid-col gap-8 auto-cols-max grid-cols-1 md:grid-cols-2 lg:md:grid-cols-3 xl:grid-cols-4 p-4" >
+<div
+	class="grid grid-col gap-8 auto-cols-max grid-cols-1 md:grid-cols-2 lg:md:grid-cols-3 xl:grid-cols-4 p-4 lg:px-10"
+>
 	<slot />
 </div>

apps/ui/src/routes/servers/index.svelte

@@ -58,18 +58,17 @@
 	{/if}
 </div>
 
-<div class="flex items-center mt-10">
+<ContextMenu>
 	<h1 class="title lg:text-3xl">Destinations</h1>
-</div>
+</ContextMenu>
 
 {#if destinations.length > 0}
-	<div class="divider" />
 	<Grid3>
 		{#if destinations.length > 0}
 			{#each destinations as destination}
 				<a class="no-underline mb-5" href={`/destinations/${destination.id}`}>
 					<div
-						class="w-full rounded p-5 bg-coolgray-200 hover:bg-destinations indicator duration-150"
+						class="w-full rounded p-5 bg-coolgray-200 indicator duration-150"
 					>
 						<div class="w-full flex flex-row">
 							<div class="absolute top-0 left-0 -m-5 h-10 w-10">