Improved header spacing and centering scope pills on small screens.

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>

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) {