From 3a562bb714ca22f56472d0df5bfbd062c2c4b612 Mon Sep 17 00:00:00 2001
From: Kaname <56084970+kaname-png@users.noreply.github.com>
Date: Sat, 10 Sep 2022 17:45:47 +0000
Subject: [PATCH] feat(routes): improve ui for apps, databases and services
 logs

---
 .../applications/[id]/logs/_BuildLog.svelte       | 15 +++++----------
 .../routes/applications/[id]/logs/index.svelte    | 14 ++++----------
 .../databases/[id]/_Databases/_Databases.svelte   |  2 +-
 .../src/routes/databases/[id]/logs/index.svelte   |  9 +++++++--
 .../ui/src/routes/services/[id]/logs/index.svelte | 14 ++++----------
 5 files changed, 21 insertions(+), 33 deletions(-)

diff --git a/apps/ui/src/routes/applications/[id]/logs/_BuildLog.svelte b/apps/ui/src/routes/applications/[id]/logs/_BuildLog.svelte
index 6d1947e83..894eecfaa 100644
--- a/apps/ui/src/routes/applications/[id]/logs/_BuildLog.svelte
+++ b/apps/ui/src/routes/applications/[id]/logs/_BuildLog.svelte
@@ -154,20 +154,15 @@
 			{/if}
 		</div>
 		{#if logs.length > 0}
-			<div
-				class="font-mono leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
-				bind:this={logsEl}
-			>
+			<div class="font-mono w-full rounder bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded-md mb-20 flex flex-col whitespace-nowrap -mt-12 scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1">
 				{#each logs as log}
-					<div>{log.line + '\n'}</div>
+					<p>{log.line + '\n'}</p>
 				{/each}
 			</div>
 		{:else}
-			<div
-				class="font-mono leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
-			>
-				No logs found.
-			</div>
+		<div class="font-mono w-full rounder bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded-md mb-20 flex flex-col whitespace-nowrap -mt-12 scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1">
+			No logs found.
+		</div>
 		{/if}
 	{/if}
 </div>
diff --git a/apps/ui/src/routes/applications/[id]/logs/index.svelte b/apps/ui/src/routes/applications/[id]/logs/index.svelte
index 5db212df4..d0829e867 100644
--- a/apps/ui/src/routes/applications/[id]/logs/index.svelte
+++ b/apps/ui/src/routes/applications/[id]/logs/index.svelte
@@ -177,16 +177,10 @@
 				</button>
 				<Tooltip triggeredBy="#follow">Follow Logs</Tooltip>
 			</div>
-			<div
-				class="font-mono w-full leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
-				bind:this={logsEl}
-				on:scroll={detect}
-			>
-				<div class="px-2 pr-14">
-					{#each logs as log}
-						{log + '\n'}
-					{/each}
-				</div>
+			<div class="font-mono w-full rounder bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded-md mb-20 flex flex-col whitespace-nowrap -mt-12 scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1">
+				{#each logs as log}
+					<p>{log + '\n'}</p>
+				{/each}
 			</div>
 		</div>
 	{/if}
diff --git a/apps/ui/src/routes/databases/[id]/_Databases/_Databases.svelte b/apps/ui/src/routes/databases/[id]/_Databases/_Databases.svelte
index c65d288c3..6dd2dee8a 100644
--- a/apps/ui/src/routes/databases/[id]/_Databases/_Databases.svelte
+++ b/apps/ui/src/routes/databases/[id]/_Databases/_Databases.svelte
@@ -114,7 +114,7 @@
 			{#if $appSession.isAdmin}
 				<button
 					type="submit"
-					class="btn btn-sm w-full lg:fit-content"
+					class="btn btn-sm w-full lg:w-auto"
 					class:loading
 					class:bg-databases={!loading}
 					disabled={loading}>{$t('forms.save')}</button
diff --git a/apps/ui/src/routes/databases/[id]/logs/index.svelte b/apps/ui/src/routes/databases/[id]/logs/index.svelte
index 0a296487f..b1a120de9 100644
--- a/apps/ui/src/routes/databases/[id]/logs/index.svelte
+++ b/apps/ui/src/routes/databases/[id]/logs/index.svelte
@@ -134,7 +134,12 @@
 				</button>
 				<Tooltip triggeredBy="#follow">Follow Logs</Tooltip>
 			</div>
-			<div
+			<div class="font-mono w-full rounder bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded-md mb-20 flex flex-col whitespace-nowrap -mt-12 scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1">
+				{#each logs as log}
+					<p>{log + '\n'}</p>
+				{/each}
+			</div>
+			<!-- <div
 				class="font-mono w-full leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
 				bind:this={logsEl}
 				on:scroll={detect}
@@ -144,7 +149,7 @@
 						{log + '\n'}
 					{/each}
 				</div>
-			</div>
+			</div> -->
 		</div>
 	{/if}
 </div>
diff --git a/apps/ui/src/routes/services/[id]/logs/index.svelte b/apps/ui/src/routes/services/[id]/logs/index.svelte
index dc875852e..38fd6d254 100644
--- a/apps/ui/src/routes/services/[id]/logs/index.svelte
+++ b/apps/ui/src/routes/services/[id]/logs/index.svelte
@@ -150,16 +150,10 @@
 				</button>
 				<Tooltip triggeredBy="#follow">Follow Logs</Tooltip>
 			</div>
-			<div
-				class="font-mono w-full leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
-				bind:this={logsEl}
-				on:scroll={detect}
-			>
-				<div class="px-2 pr-14">
-					{#each logs as log}
-						{log + '\n'}
-					{/each}
-				</div>
+			<div class="font-mono w-full rounder bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded-md mb-20 flex flex-col whitespace-nowrap -mt-12 scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1">
+				{#each logs as log}
+					<p>{log.line + '\n'}</p>
+				{/each}
 			</div>
 		</div>
 	{/if}