From 23b954804e0d5a681a3aaee5ae0aa90b6d8b2e7a Mon Sep 17 00:00:00 2001
From: oplik0 <opliko.reg@protonmail.com>
Date: Mon, 24 Oct 2022 08:36:25 +0200
Subject: [PATCH] fix: styling

---
 src/App.svelte         |  4 +++-
 src/lib/KeyCard.svelte | 14 ++++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 81c4d0b..8e98a1d 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -35,7 +35,9 @@
 
 <Breadcrumbs />
 <Nav items={routes} />
-<Router {routes} />
+<main>
+	<Router {routes} />
+</main>
 
 <style>
 	:global(body) {
diff --git a/src/lib/KeyCard.svelte b/src/lib/KeyCard.svelte
index 707bead..0512a0c 100644
--- a/src/lib/KeyCard.svelte
+++ b/src/lib/KeyCard.svelte
@@ -166,12 +166,14 @@
 		<svelte:fragment slot="content">
 			<div class="expanded-content">
 				{#if key.name}
-					<TextBlock variant="bodyStrong">uuid: {key.uuid}</TextBlock>
+					<TextBlock variant="caption" class="uuid-content">
+						{key.uuid}
+					</TextBlock>
 				{/if}
 				<TextBlock variant="bodyStrong">semver: v{key.version}</TextBlock>
-				<TextBlock variant="bodyStrong"
-					>variant: {key.secure ? "secure" : "hacker"}</TextBlock
-				>
+				<TextBlock variant="bodyStrong">
+					variant: {key.secure ? "secure" : "hacker"}
+				</TextBlock>
 				<div>
 					<Button variant="hyperlink" href="#/totp/{key.uuid}">TOTP</Button>
 
@@ -370,6 +372,10 @@
 	:global(.overflow-visible > .expander-content-anchor) {
 		overflow: visible !important;
 	}
+	:global(.uuid-content) {
+		max-width: min-content;
+		text-align: center;
+	}
 	.selected_file {
 		fill: var(--fds-accent-default);
 	}