Hide "Prevously used" if there are no previously used instances

src/components/instance-select.astro

@@ -10,7 +10,10 @@ const { instance, errors } = Astro.props;
 ---
 
 <datalist id="popular-instances"></datalist>
-<label data-translate="instance">
+<label
+	class="mt1r"
+	data-translate="instance"
+>
 	Fediverse instance
 	<div class="instance-input">
 		<span id="https-label">https://</span>
@@ -41,13 +44,15 @@ const { instance, errors } = Astro.props;
 
 <div
 	id="saved-instances"
+	class="mt1r"
 	data-translate="previouslyUsed"
 >
 	Previously used:
-	<div></div>
+	<span class="list"></span>
 </div>
 
 <label
+	class="mt1r"
 	for="remember"
 	data-translate="rememberInstance"
 >
@@ -91,7 +96,7 @@ const { instance, errors } = Astro.props;
 			display: inline-block;
 		}
 
-		:global(span) {
+		:global(span.link) {
 			color: var(--s2f-accent-color-contrast);
 			cursor: pointer;
 			text-decoration: 1px solid underline currentColor;
@@ -107,8 +112,12 @@ const { instance, errors } = Astro.props;
 	const instanceElement = document.querySelector(
 		"#instance",
 	) as HTMLInputElement;
+	const savedInstancesElement = document.querySelector(
+		"#saved-instances",
+	) as HTMLDivElement;
 	$savedInstances.subscribe((instances) => {
 		if (instances.size === 0) {
+			savedInstancesElement.style.display = "none";
 			return;
 		}
 
@@ -117,7 +126,8 @@ const { instance, errors } = Astro.props;
 			instanceElement.value = getUrlDomain(savedInstances[0] as string);
 		}
 
-		document.querySelector("#saved-instances>div")!.replaceChildren(
+		savedInstancesElement.style.display = "block";
+		document.querySelector("#saved-instances>.list")!.replaceChildren(
 			...savedInstances
 				.flatMap((instance: string) => {
 					if (!instance) {
@@ -126,6 +136,7 @@ const { instance, errors } = Astro.props;
 
 					const host = getUrlDomain(instance);
 					const element = document.createElement("span");
+					element.classList.add("link");
 					element.textContent = host;
 					element.addEventListener("click", () => {
 						instanceElement.value = host;

src/pages/index.astro

@@ -96,6 +96,7 @@ if (Astro.request.method === "POST") {
 		<input
 			type="submit"
 			value="Publish"
+			class="mt1r"
 			data-translate="publish"
 			data-translate-attribute="value"
 		/>

src/styles/main.scss

@@ -94,9 +94,8 @@ strong {
 	font-weight: bolder;
 }
 
-form label {
+label {
 	display: block;
-	margin-bottom: 1rem;
 }
 
 input,
@@ -178,3 +177,7 @@ p.error {
 	color: var(--s2f-error-color);
 	margin: 0 0 1rem;
 }
+
+.mt1r {
+	margin-top: 1rem !important;
+}