ui: improvements

apps/ui/src/routes/databases/[id]/_Databases/_Databases.svelte

@@ -121,7 +121,7 @@
 				>
 			{/if}
 		</div>
-		<div class="grid gap-4 grid-cols-2 auto-rows-max lg:px-10 px-2">
+		<div class="grid gap-2 grid-cols-2 auto-rows-max lg:px-10 px-2">
 			<label for="name">{$t('forms.name')}</label>
 			<input
 				class="w-full"
@@ -225,7 +225,7 @@
 	<div class="flex space-x-1 pb-5 font-bold">
 		<h1 class="title">{$t('application.features')}</h1>
 	</div>
-	<div class="grid gap-4 grid-cols-2 auto-rows-max lg:px-10 px-2">
+	<div class="grid gap-2 grid-cols-2 auto-rows-max lg:px-10 px-2">
 		<Setting
 			id="isPublic"
 			loading={publicLoading}

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">
+	<nav class="header lg:flex-row flex-col-reverse">
-		<button
+		<div class="flex flex-row space-x-2 font-bold pt-10 lg:pt-0">
-			id="delete"
+			<div class="flex flex-col items-center justify-center">
-			on:click={() => deleteDestination(destination)}
+				<div class="title">Configurations</div>
-			type="submit"
+			</div>
-			disabled={!$appSession.isAdmin && isDestinationDeletable}
+		</div>
-			class:hover:text-red-500={$appSession.isAdmin && isDestinationDeletable}
+		<div class="lg:block hidden flex-1" />
-			class="icons bg-transparent text-sm"
+		<div class="flex flex-row flex-wrap space-x-3 justify-center lg:justify-start lg:py-0">
-			class:text-stone-600={!isDestinationDeletable}><DeleteIcon /></button
+			<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 />

apps/ui/src/routes/services/[id]/_Services/_Services.svelte

@@ -260,7 +260,7 @@
 			</div>
 		{/if}
 
-		<div class="grid gap-4 grid-cols-1 grid-rows-1 lg:px-10 px-2">
+		<div class="grid gap-2 grid-cols-1 grid-rows-1 lg:px-10 px-2">
 			<div class="mt-2 grid grid-cols-2 items-center">
 				<label for="name">{$t('forms.name')}</label>
 				<input name="name" id="name" class="w-full" bind:value={service.name} required />
@@ -383,7 +383,18 @@
 			</div>
 		{/if}
 
-		<div class="grid grid-flow-row gap-2 lg:px-10 px-2 pt-4">
+		<div class="grid grid-flow-row gap-2 lg:px-10 px-2 pt-2">
+			<div class="grid grid-cols-2 items-center">
+				<Setting
+					id="dualCerts"
+					disabled={$status.service.isRunning}
+					dataTooltip={$t('forms.must_be_stopped_to_modify')}
+					bind:setting={dualCerts}
+					title={$t('application.ssl_www_and_non_www')}
+					description={$t('services.generate_www_non_www_ssl')}
+					on:click={() => !$status.service.isRunning && changeSettings('dualCerts')}
+				/>
+			</div>
 			<div class="grid grid-cols-2 items-center">
 				<label for="exposePort"
 					>Exposed Port <Explainer
@@ -402,17 +413,7 @@
 					placeholder="12345"
 				/>
 			</div>
-			<div class="grid grid-cols-2 items-center">
+		
-				<Setting
-					id="dualCerts"
-					disabled={$status.service.isRunning}
-					dataTooltip={$t('forms.must_be_stopped_to_modify')}
-					bind:setting={dualCerts}
-					title={$t('application.ssl_www_and_non_www')}
-					description={$t('services.generate_www_non_www_ssl')}
-					on:click={() => !$status.service.isRunning && changeSettings('dualCerts')}
-				/>
-			</div>
 		</div>
 		{#if service.type === 'plausibleanalytics'}
 			<PlausibleAnalytics bind:service {readOnly} />

apps/ui/src/routes/sources/[id]/_Github.svelte

@@ -103,7 +103,7 @@
 					</div>
 				{/if}
 			</div>
-			<div class="grid gap-4 grid-cols-2 auto-rows-max">
+			<div class="grid gap-2 grid-cols-2 auto-rows-max">
 				<label for="name" class="text-base font-bold text-stone-100">Name</label>
 				<input class="w-full" name="name" id="name" required bind:value={source.name} />
 				<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
@@ -158,7 +158,7 @@
 					</div>
 				{/if}
 			</div>
-			<div class="grid gap-4 grid-cols-2 auto-rows-max mt-4">
+			<div class="grid gap-2 grid-cols-2 auto-rows-max mt-4">
 				<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
 				<input class="w-full" name="name" id="name" required bind:value={source.name} />
 				<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>