Skip to content

Fix max-w on tags in the sidebar #5256

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix max-w on tags in the sidebar #5256

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion web/src/components/MemoExplorer/TagsSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ const TagsSection = observer((props: Props) => {
onClick={() => handleTagClick(tag)}
>
<HashIcon className="w-4 h-auto shrink-0" />
<div className="inline-flex flex-nowrap ml-0.5 gap-0.5 max-w-[calc(100%-16px)]">
<div className="inline-flex flex-nowrap ml-0.5 gap-0.5 max-w-[calc(100%-1em)]">
Copy link

Copilot AI Nov 18, 2025

Choose a reason for hiding this comment

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

The calculation calc(100%-1em) accounts for the HashIcon with w-4 class, which in Tailwind CSS is 1rem (not 1em). Consider using 1rem instead of 1em for consistency with Tailwind's spacing system, as w-4 equals 1rem (16px at default font size). While both may work similarly in many cases, rem is based on the root font size while em is based on the current element's font size, which could lead to subtle layout differences.

Suggested change
<div className="inline-flex flex-nowrap ml-0.5 gap-0.5 max-w-[calc(100%-1em)]">
<div className="inline-flex flex-nowrap ml-0.5 gap-0.5 max-w-[calc(100%-1rem)]">

Copilot uses AI. Check for mistakes.
Copy link

Copilot AI Nov 18, 2025

Choose a reason for hiding this comment

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

The margin-left spacing ml-0.5 (0.125rem or 2px) between the HashIcon and the content div is not accounted for in the max-width calculation. The calculation should be calc(100% - 1em - 0.125rem) to accurately account for both the icon width and the left margin, preventing potential overflow issues.

Suggested change
<div className="inline-flex flex-nowrap ml-0.5 gap-0.5 max-w-[calc(100%-1em)]">
<div className="inline-flex flex-nowrap ml-0.5 gap-0.5 max-w-[calc(100%-1em-0.125rem)]">

Copilot uses AI. Check for mistakes.
<span className={cn("truncate", isActive ? "font-medium" : "")}>{tag}</span>
{amount > 1 && <span className="opacity-60 shrink-0">({amount})</span>}
</div>
Expand Down
Loading