Fix styling

src/components/misc/api-config.vue

@@ -21,9 +21,9 @@
 				</div>
 			</div>
 		</div>
-		<span v-else>
-			Using Vikunja installation at {{ apiDomain() }}. <a @click="() => configureApi = true">change</a>
-		</span>
+		<div class="api-url-info" v-else>
+			Sign in to your Vikunja account on <span v-tooltip="apiUrl">{{ apiDomain() }}</span> <a @click="() => configureApi = true">change</a>
+		</div>
 
 		<div class="notification is-success mt-2" v-if="successMsg !== '' && errorMsg === ''">
 			{{ successMsg }}
@@ -159,9 +159,3 @@ export default {
 	},
 }
 </script>
-
-<style scoped>
-.api-config {
-	margin-bottom: .75rem;
-}
-</style>

src/styles/components/_all.scss

@@ -21,3 +21,4 @@
 @import 'namespaces';
 @import 'legal';
 @import 'keyboard-shortcuts';
+@import 'api-config';

src/styles/components/api-config.scss

@@ -0,0 +1,12 @@
+.api-config {
+  margin-bottom: .75rem;
+}
+
+.api-url-info {
+  font-size: .9rem;
+  text-align: right;
+
+  span {
+    border-bottom: 1px dashed $primary;
+  }
+}