Skip to content

fix long names being clipped #342

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ingoau merged 4 commits into from
Jun 7, 2025
Merged

fix long names being clipped #342

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0135fdb
disable wrapping and overflow on hover
ingoau Jun 7, 2025
833dcd4
allow sidebar to overflow
ingoau Jun 7, 2025
91d322e
undo that, it doesnt work :(
ingoau Jun 7, 2025
7a6086a
just make the sidebar wider lol
ingoau Jun 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion src/lib/components/app-sidebar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@

<svelte:document onkeydown={handleKeydown} />

<Sidebar.Root collapsible="icon" bind:ref {...restProps}>
<Sidebar.Root collapsible="icon" bind:ref {...restProps} class="w-72">
<Sidebar.Header>
<Sidebar.Menu>
<Sidebar.MenuItem>
Expand Down Expand Up @@ -209,12 +209,19 @@
<a
href={item.url}
{...props}
class={clsx(
'group/link z-50 text-nowrap hover:overflow-visible',
props.class || ''
)}
target={item.url.startsWith('http') ? '_blank' : undefined}
rel={item.url.startsWith('http')
? 'noopener noreferrer'
: undefined}
>
{item.title}
<div
class="absolute right-0 h-full w-[25%] bg-gradient-to-r from-transparent to-sidebar group-hover/link:opacity-0"
></div>
Comment on lines +222 to +224
Copy link
Contributor

@coderabbitai coderabbitai bot Jun 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Creative gradient overlay solution with accessibility considerations.

The gradient overlay that fades on hover is an elegant approach to indicate clipped content. However, consider these accessibility improvements:

  1. Touch device compatibility: Users on touch devices can't hover to reveal full text
  2. Keyboard navigation: Ensure focus states also reveal the full text
  3. Discoverability: The hover behavior might not be obvious to users

Consider adding focus state support:

-class="absolute right-0 h-full w-[25%] bg-gradient-to-r from-transparent to-sidebar group-hover/link:opacity-0"
+class="absolute right-0 h-full w-[25%] bg-gradient-to-r from-transparent to-sidebar group-hover/link:opacity-0 group-focus-within/link:opacity-0"

Also consider adding title attributes to the links for better accessibility when text is clipped.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div
class="absolute right-0 h-full w-[25%] bg-gradient-to-r from-transparent to-sidebar group-hover/link:opacity-0"
></div>
<div
class="absolute right-0 h-full w-[25%] bg-gradient-to-r from-transparent to-sidebar group-hover/link:opacity-0 group-focus-within/link:opacity-0"
></div>
🤖 Prompt for AI Agents 
In src/lib/components/app-sidebar.svelte around lines 222 to 224, the gradient
overlay that fades on hover does not support touch devices or keyboard
navigation and lacks discoverability. To fix this, add CSS styles to also
trigger the gradient fade on focus states for keyboard users, ensuring the full
text is revealed when links receive focus. Additionally, add descriptive title
attributes to the links whose text might be clipped to improve accessibility and
provide context for screen readers and touch users.

</a>
{/snippet}
</Sidebar.MenuSubButton>
Expand Down