Fix "login" button text wrap on mobile

huggingface · Jun 27, 2024 · 6ec1e8f · 6ec1e8f
1 parent 41ed283
commit 6ec1e8f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/lib/components/DisclaimerModal.svelte b/src/lib/components/DisclaimerModal.svelte
@@ -54,11 +54,14 @@
 				<form action="{base}/login" target="_parent" method="POST" class="w-full">
 					<button
 						type="submit"
-						class="flex w-full items-center justify-center whitespace-nowrap rounded-full border-2 border-black bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
+						class="flex w-full flex-wrap items-center justify-center whitespace-nowrap rounded-full border-2 border-black bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
 					>
 						Sign in
 						{#if envPublic.PUBLIC_APP_NAME === "HuggingChat"}
-							with <LogoHuggingFaceBorderless classNames="text-xl mr-1 ml-1.5 flex-none" /> Hugging Face
+							<span class="flex items-center">
+								&nbsp;with <LogoHuggingFaceBorderless classNames="text-xl mr-1 ml-1.5 flex-none" /> Hugging
+								Face
+							</span>
 						{/if}
 					</button>
 				</form>

diff --git a/src/lib/components/LoginModal.svelte b/src/lib/components/LoginModal.svelte
@@ -37,11 +37,13 @@
 			{#if $page.data.loginRequired}
 				<button
 					type="submit"
-					class="flex w-full items-center justify-center whitespace-nowrap rounded-full bg-black px-5 py-2 text-center text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
+					class="flex w-full flex-wrap items-center justify-center whitespace-nowrap rounded-full bg-black px-5 py-2 text-center text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
 				>
 					Sign in
 					{#if envPublic.PUBLIC_APP_NAME === "HuggingChat"}
-						with <LogoHuggingFaceBorderless classNames="text-xl mr-1 ml-1.5" /> Hugging Face
+						<span class="flex items-center">
+							&nbsp;with <LogoHuggingFaceBorderless classNames="text-xl mr-1 ml-1.5" /> Hugging Face
+						</span>
 					{/if}
 				</button>
 			{:else}