ui: improvements

apps/ui/src/routes/destinations/[id]/_Destination.svelte

@@ -1,25 +1,14 @@
-
 <script lang="ts">
 	export let destination: any;
 	export let settings: any;
-	export let state: any;
 	import LocalDocker from './_LocalDocker.svelte';
 	import RemoteDocker from './_RemoteDocker.svelte';
 </script>
 
-<div class="flex h-20 items-center space-x-2 p-5 px-6 font-bold">
-	<div class="-mb-5 flex-col">
-		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
-			Configuration
-		</div>
-		<span class="text-xs">{destination.name}</span>
-	</div>
-</div>
-
 <div class="mx-auto max-w-6xl px-6">
 	{#if destination.remoteEngine}
-		<RemoteDocker bind:destination {settings} {state} />
+		<RemoteDocker bind:destination {settings} />
 	{:else}
-		<LocalDocker bind:destination {settings} {state} />
+		<LocalDocker bind:destination {settings} />
 	{/if}
-</div>
+</div>

apps/ui/src/routes/destinations/[id]/_LocalDocker.svelte

@@ -142,24 +142,24 @@
 </script>
 
 <form on:submit|preventDefault={handleSubmit} class="py-4">
-	<div class="grid gap-4 grid-cols-2 grid-rows-1">
+	<div class="flex space-x-2">
 		<button
 			type="submit"
-			class="btn btn-sm w-full"
+			class="btn btn-sm"
 			class:bg-destinations={!loading.save}
 			class:loading={loading.save}
 			disabled={loading.save}
 			>{$t('forms.save')}
 		</button>
 		<button
-			class="btn btn-sm w-full"
+			class="btn btn-sm"
 			class:loading={loading.restart}
 			class:bg-error={!loading.restart}
 			disabled={loading.restart}
 			on:click|preventDefault={forceRestartProxy}>{$t('destination.force_restart_proxy')}</button
 		>
 	</div>
-	<div class="grid gap-4 grid-cols-2 auto-rows-max mt-10 items-center">
+	<div class="grid gap-2 grid-cols-2 auto-rows-max mt-10 items-center">
 		<label for="name" class="text-base font-bold text-stone-100 w-full">{$t('forms.name')}</label>
 		<input
 			class="w-full"

apps/ui/src/routes/destinations/[id]/_RemoteDocker.svelte

@@ -166,7 +166,6 @@
 
 <form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
 	<div class="flex space-x-1 pb-5">
-		<div class="title font-bold">{$t('forms.configuration')}</div>
 		{#if $appSession.isAdmin}
 			<button
 				type="submit"

apps/ui/src/routes/destinations/[id]/__layout.svelte

@@ -88,17 +88,25 @@
 </script>
 
 {#if $page.params.id !== 'new'}
-	<nav class="nav-side">
-		<button
-			id="delete"
-			on:click={() => deleteDestination(destination)}
-			type="submit"
-			disabled={!$appSession.isAdmin && isDestinationDeletable}
-			class:hover:text-red-500={$appSession.isAdmin && isDestinationDeletable}
-			class="icons bg-transparent text-sm"
-			class:text-stone-600={!isDestinationDeletable}><DeleteIcon /></button
-		>
+	<nav class="header lg:flex-row flex-col-reverse">
+		<div class="flex flex-row space-x-2 font-bold pt-10 lg:pt-0">
+			<div class="flex flex-col items-center justify-center">
+				<div class="title">Configurations</div>
+			</div>
+		</div>
+		<div class="lg:block hidden flex-1" />
+		<div class="flex flex-row flex-wrap space-x-3 justify-center lg:justify-start lg:py-0">
+			<button
+				id="delete"
+				on:click={() => deleteDestination(destination)}
+				type="submit"
+				disabled={!$appSession.isAdmin && isDestinationDeletable}
+				class:hover:text-red-500={$appSession.isAdmin && isDestinationDeletable}
+				class="icons bg-transparent text-sm"
+				class:text-stone-600={!isDestinationDeletable}><DeleteIcon /></button
+			>
+			<Tooltip triggeredBy="#delete">{deletable()}</Tooltip>
+		</div>
 	</nav>
-	<Tooltip triggeredBy="#delete">{deletable()}</Tooltip>
 {/if}
 <slot />