Skip to content

Conversation

@TomK32
Copy link

@TomK32 TomK32 commented Nov 17, 2025

In Firefox on Linux the tags on the sidebar are truncated even shorter tags. It might be my larger than usual min fonts or something because Chromium on the same machine doesn't have this problem. Anways, changing the 16px to 1em works fine with short and long tags.
Screenshot 2025-11-17 at 13-04-15 Memos

@TomK32 TomK32 requested a review from boojack as a code owner November 17, 2025 12:22
@TomK32 TomK32 changed the title Remove the max-w from tags in the sidebar Fix max-w on tags in the sidebar Nov 17, 2025
@TomK32 TomK32 force-pushed the fix-sidebar-tags branch 2 times, most recently from ab7ebc6 to 38d4627 Compare November 17, 2025 12:28
@boojack boojack requested a review from Copilot November 18, 2025 01:50
Copilot finished reviewing on behalf of boojack November 18, 2025 01:52
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

This PR fixes a tag truncation issue in Firefox on Linux by changing the max-width calculation for tags in the sidebar from pixel-based (16px) to font-relative units (1em). This ensures proper rendering across different font size settings and browsers.

  • Changed max-w-[calc(100%-16px)] to max-w-[calc(100%-1em)] in TagsSection component

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

>
<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.
>
<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 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants