fix: ui fix for labels of sidebarNavItem

[JabSYsEmb]

The labels of sidebarNavItem were erroneously displaying underlines despite having the no-underline class applied.

The no-underline class alone was not affecting the span element's style as expected. This is because the text-decoration property was being inherited from the parent element. By setting the display property of the label to "inline-block", we prevent it from inheriting the underline style when the anchor is hovered over.

before

after

[changeset-bot]

⚠️ No Changeset found

Latest commit: b19959f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
shadcn-svelte	✅ Ready (View Log)	Visit Preview	b19959f

[huntabyte]

Hey there, the underline seems to be spanning beyond the word by a character!

[JabSYsEmb]

a whitespace is added between the label and the text of the anchor element but I am not sure why it's added let me try to fix that also

[JabSYsEmb]

hey,

There is two options to get rid of the whitespace after the text which are the following:

• wrap the {item.title} with a span element and set its margin right to -4px as here:

// ...
>
					<span class="-me-1">{item.title}</span>
					{#if item.label}
// ....

• to remove the space between html elements as follow:

// ....
				>
					{item.title}{#if item.label}
						<span
							class="ml-2 inline-block self-center rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000]"
						>
// ....

I quote from a website:
" A common problem when using inline-block elements is that whitespace in HTML becomes visual space in the site design (similar to having space between words). " resource

Which solutions do you think are more suitable in this situation?

[huntabyte]

The space is fine, we just don't want it underlined. If we wrap the title in a span and apply the underline class to that it should work right?

[huntabyte]

Thank you!