use tw-hidden instead of display:none

Author: changchaishi

templates/repo/create.tmpl

@@ -44,8 +44,8 @@
 					<div class="inline required field {{if .Err_RepoName}}error{{end}}">
 						<label for="repo_name">{{ctx.Locale.Tr "repo.repo_name"}}</label>
 						<input id="repo_name" name="repo_name" value="{{.repo_name}}" autofocus required maxlength="100">
-						<span id="repo_name_public_profile_hint" style="display:none" class="help">{{ctx.Locale.Tr "repo.repo_name_public_profile_hint"}}</span>
-						<span id="repo_name_private_profile_hint" style="display:none" class="help">{{ctx.Locale.Tr "repo.repo_name_private_profile_hint"}}</span>
+						<span id="repo_name_public_profile_hint" class="help tw-hidden">{{ctx.Locale.Tr "repo.repo_name_public_profile_hint"}}</span>
+						<span id="repo_name_private_profile_hint" class="help tw-hidden">{{ctx.Locale.Tr "repo.repo_name_private_profile_hint"}}</span>
 						<span class="help">{{ctx.Locale.Tr "repo.repo_name_helper"}}</span>
 					</div>
 					<div class="inline field">

web_src/js/features/repo-create.ts

@@ -5,14 +5,14 @@ const repoPrivateHint = document.querySelector<HTMLInputElement>('#repo_name_pri
 export function initRepoCreate() {
   repoName?.addEventListener('input', () => {
     if (repoName?.value === '.profile') {
-      repoPublicHint.style.display = 'inline-block';
+      repoPublicHint.classList.remove('tw-hidden');
     } else {
-      repoPublicHint.style.display = 'none';
+      repoPublicHint.classList.add('tw-hidden');
     }
     if (repoName?.value === '.profile-private') {
-      repoPrivateHint.style.display = 'inline-block';
+      repoPrivateHint.classList.remove('tw-hidden');
     } else {
-      repoPrivateHint.style.display = 'none';
+      repoPrivateHint.classList.add('tw-hidden');
     }
   });
 }