Skip to content
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

Jump to bottom

fix: Truncate long text within buttons #303

Closed
wants to merge 0 commits into from
Closed

fix: Truncate long text within buttons #303

wants to merge 0 commits into from

Conversation

chuck-ankit
Copy link

What changed?

The Button in the EditNameSettings.tsx component was updated to address the issue with overly long user names.

  • Added the max-w-[200px] class to limit the button width.
  • Applied the truncate class to truncate long strings.
  • Implemented a tooltip that appears on hover to show the full name for names longer than 15 characters.

Fixes #302 (Truncate long text within buttons)

Why?

This change addresses the issue where long user names were overflowing within the button. It ensures that buttons maintain a consistent width and provides a way to view the full name using a tooltip on hover.

How was this change made?

  • The max-w-[200px] class was applied to restrict the button width.
  • The truncate class was added to cut off overflowing text.
  • A tooltip component was added that displays the full user name for names exceeding 15 characters when hovered over.

How was this tested?

  • Tested with different user names to verify that names longer than 15 characters are properly truncated.
  • Hovered over long names to ensure the tooltip correctly displays the full name.
  • Verified the layout and button resizing under different screen sizes to ensure responsiveness.

Anything else?

  • No further adjustments are needed unless additional features are requested. Let me know if anything should be modified.

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Dec 21, 2024 •
edited
Loading

⚠️ No Changeset found

Latest commit: 45c068b

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 github-actions bot added frontend CSS, HTML, and JS changes backend Schema, query, and mutation changes labels Dec 21, 2024
evadecker
evadecker reviewed Dec 21, 2024
View reviewed changes
Copy link
Member

@evadecker evadecker left a comment

Choose a reason for hiding this comment

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

Hey @chuck-ankit, thanks for your contribution!

.gitignore Outdated
@@ -42,3 +42,5 @@ node_modules

# Local files
*.local

.env.local
Copy link
Member

Choose a reason for hiding this comment

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

It looks like the Convex initialization added this automatically; can you revert it since .env.local is already included above?

convex/README.md Outdated
@@ -0,0 +1,90 @@
# Welcome to your Convex functions directory!
Copy link
Member

Choose a reason for hiding this comment

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

Convex initialization may have added this file, too. Mind removing it?

src/components/settings/EditNameSetting/EditNameSetting.tsx Outdated
<div className="relative group">
<Button
icon={Pencil}
className="max-w-[200px] truncate"
Copy link
Member

Choose a reason for hiding this comment

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

We'll want to make this change on the shared Button component, instead of this specific button. The Button component is in src/components/common!

src/components/settings/EditNameSetting/EditNameSetting.tsx Outdated
Comment on lines 110 to 114
{user?.name && user.name.length > 15 && (
<span className="absolute hidden group-hover:block bg-gray-700 text-white text-sm px-2 py-1 rounded">
{user.name}
</span>
)}
Copy link
Member

Choose a reason for hiding this comment

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

I like your idea of showing a tooltip when the text is too long! We have a Tooltip component (also in src/components/common) that we can use for that instead of a custom element.

Bonus: If we set max-w-[30ch] using the ch unit, we can reliably show the Tooltip when the contents are more than 30 characters long. This will also make sure if we increase the font size on Button, the same number of characters will be displayed!

@evadecker evadecker changed the title Fix of Issue #302(Truncate long text within buttons) fix: Truncate long text within buttons Dec 21, 2024
@evadecker
Copy link
Member

Note: we should also add a changeset to this PR! You can add one by running pnpm changeset, selecting "patch", and entering a comment from the user's point of view like "Truncate long text within buttons"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@evadecker evadecker evadecker left review comments

Assignees
No one assigned
Labels
backend Schema, query, and mutation changes frontend CSS, HTML, and JS changes
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Truncate long text within buttons
2 participants
@chuck-ankit @evadecker