"Sign in with 🤗 Hugging Face" button for login modal can look strange at narrow widths

[Mardak]

Relatively minor issue with left side of this screenshot shows the beginning and end of the button text overflowing:

The current code happens to have newline/whitespace that could be preserved or somehow shorten the text?

chat-ui/src/lib/components/LoginModal.svelte

Lines 38 to 44 in 70e1e30

	<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"
	>
	Sign in
	{#if envPublic.PUBLIC_APP_NAME === "HuggingChat"}
	with <LogoHuggingFaceBorderless classNames="text-xl mr-1 ml-1.5" /> Hugging Face

[julien-c]

good catch, a PR is welcome!

[Mardak]

Specifically for the Firefox chatbot sidebar use case, we might end up enforcing a minimum width of say 420px and avoid this issue for huggingchat that only appears around 350px.