From c2dfdcd35073f4c3e6dce9a4bba889c5c17046cd Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <DebaucheryLibrarian@unknown.name>
Date: Mon, 18 Mar 2024 02:00:04 +0100
Subject: [PATCH] Improved header spacing and centering scope pills on small
 screens.

---
 components/header/header.vue | 33 +++++++++++++++++++++++++++++----
 components/scenes/scenes.vue |  4 ++++
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/components/header/header.vue b/components/header/header.vue
index a4cfe14..b31a94d 100644
--- a/components/header/header.vue
+++ b/components/header/header.vue
@@ -120,8 +120,11 @@
 			>
 				<a
 					:href="`/login?r=${encodeURIComponent(currentPath)}`"
-					class="login button button-submit"
-				>Log in</a>
+					class="login button button-submit nolink"
+				>
+					<span class="login-text">Log in</span>
+					<Icon icon="enter" />
+				</a>
 			</div>
 		</div>
 	</header>
@@ -172,7 +175,6 @@ async function logout() {
 .logo {
 	display: flex;
 	width: 8rem;
-	height: 3rem;
 	box-sizing: border-box;
 	padding: .75rem;
 	margin-right: 1rem;
@@ -282,7 +284,14 @@ async function logout() {
 }
 
 .login {
-	text-decoration: none;
+	display: flex;
+	align-items: center;
+
+	.icon {
+		display: none;
+		padding: 0;
+		fill: var(--text-light);
+	}
 }
 
 .menu {
@@ -348,5 +357,21 @@ async function logout() {
 		width: 0;
 		flex-grow: 1;
 	}
+
+	.logo {
+		margin-right: .75rem;
+	}
+
+	.userpanel {
+		padding-left: 1rem;
+	}
+
+	.login-text {
+		display: none;
+	}
+
+	.login .icon {
+		display: block;
+	}
 }
 </style>
diff --git a/components/scenes/scenes.vue b/components/scenes/scenes.vue
index de6ff14..3b23188 100644
--- a/components/scenes/scenes.vue
+++ b/components/scenes/scenes.vue
@@ -339,6 +339,10 @@ function updateFilter(prop, value, reload = true) {
 	.scenes {
 		grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
 	}
+
+	.scopes {
+		justify-content: center;
+	}
 }
 
 @media(--small-20) {