fix: repos with long name partially stack #2534

adiati98 · 2024-01-25T22:41:00Z

Description

This PR fixes the long repos' names that are partially stacked at the back of another name in the search input of the Explore tab.

The changes made here:

Add Tailwind className:
- truncate to truncate overflowing text.
- tracking-tighter to reduce letter spacing for better space.
- inline-block to the <span> .
Remove Tailwind classNames:
- overflow-hidden as it's included in the truncate.
- break-all as we don't want to add line breaks.

Note: Changes made based on this conversation.

What type of PR is this? (check all applicable)

Related Tickets & Documents

Fixes #2335

Mobile & Desktop Screenshots/Recordings

Before

After

~~### After~~

Steps to QA

Go to https://opensauced.pizza/ and sign in.
Click the "Explore" tab.
Type, for example, "gpt" in the "Search Repository" input.
You can see repos with long name are no longer stack on top of other repo's name.

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

* fix: lint suggestions

…erflow-result-items

netlify · 2024-01-25T22:41:04Z

✅ Deploy Preview for oss-insights ready!

Name	Link
🔨 Latest commit	`50ef5cf`
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/660f64b942d65d0008e01d70
😎 Deploy Preview	https://deploy-preview-2534--oss-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-01-25T22:41:06Z

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	`50ef5cf`
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/660f64b9a2f0cd000859aea0
😎 Deploy Preview	https://deploy-preview-2534--design-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

takanome-dev

Wonder why there is no ellipsis after the text is truncated but another solution is to add inline-block in the span classes

adiati98 · 2024-01-26T12:20:45Z

Wonder why there is no ellipsis after the text is truncated but another solution is to add inline-block in the span classes

This result is different from mine, locally. As you can see on the after screenshot in the PR form, I only get a single line for repo names, and the longer ones are cut. But without ellipsis.

Based on the docs, truncate gives ellipsis to truncate overflow text if needed.

I also wonder why px-4 here only gives padding left but not the right (again, locally on my end).

So, let me try your solution.

…erflow-result-items

* fix: remove truncate from div in line 147

adiati98 · 2024-01-31T14:05:25Z

Wonder why there is no ellipsis after the text is truncated but another solution is to add inline-block in the span classes

@takanome-dev I follow your suggestion and made the changes as below:

Added inline-block className to the span.
Removed the truncate and tracking-tighter as they are no longer necessary.

I've tried several things and I found that only longer repo names are truncated and have ellipsis. But the longer owner names stay as is. That's why for longer owner names, ellipsis are not showing.

It will take me a while to figure this out if you want to have the suggestion in one line and ellipsis, and I don't want to hold this issue back. So, feel free to unassign me and give this to someone else. Thank you. 😊

cc: @nickytonline

takanome-dev · 2024-01-31T14:26:00Z

Hey @adiati98, the changes looks good to me 👍 Let's hear what @open-sauced/engineering think about it

…erflow-result-items

nickytonline

We definitely want each item in the list to be on one line and contain ... if it's too long. I'm wrapping up some feature work atm, but if you're still stuck on this @adiati98, I can take a peek to provide suggestions.

adiati98 · 2024-02-19T20:10:16Z

I'm honestly still stuck if we want to do ellipsis, @nickytonline .
Because ellipsis only applies to a longer repository name, but not the longer organization name.

When there's a longer organization name, they will stack on top of each other. And I haven't found a solution for this.

…erflow-result-items

adiati98 · 2024-03-15T19:32:33Z

@nickytonline I've made the changes as per Bekah's suggestion to apply width in the <span>.

It didn't work for the longer organization name when I tried earlier (before my last commit) as I mentioned in this comment.

But after setting the width, it now works! The longer organization names are not in two lines as shown below.

However, as a note, for very long organization name, there's only ellipsis shown for the repo name as below.

components/atoms/Search/search.tsx

nickytonline · 2024-04-03T14:57:16Z

components/atoms/Search/search.tsx

-                  cursor === index && "_cursorActive bg-slate-100",
-                  "px-4 py-2 overflow-hidden break-all hover:bg-light-slate-2"
-                )}
+                className={clsx(cursor === index && "_cursorActive bg-slate-100", "px-4 py-2 hover:bg-light-slate-2")}


refactor (blocking): Instead of styling each span, configure it for all spans in it's parent.

Suggested change

className={clsx(cursor === index && "_cursorActive bg-slate-100", "px-4 py-2 hover:bg-light-slate-2")}

className={clsx(cursor === index && "_cursorActive bg-slate-100", "px-4 py-2 hover:bg-light-slate-2", "[&_span]:max-w-[12.3rem]")}

Is md:max-w-[11rem] required @adiati98? I'm only asking as the value is smaller for a larger screen.

@nickytonline let me check it locally and get back to you.

@nickytonline I've tested the suggestions locally, committed, and pushed them. We don't need the md:max-w-[11rem].
Below is the screenshot of the result. The blue box is longer repo name is truncated. And the green box is longer organization name, with the whole repo name gets truncated.

* fix: revert span classname

nickytonline

This looks great @adiati98, could we make the 12.3 rem a little bit bigger, like 12.4 or 12.5 or does it get cut off (not ellipsis) at 12.4?

adiati98 · 2024-04-04T21:35:41Z

@nickytonline making 12.3 rem to 12.4 rem or 12.5 rem do almost the same result, where the longer organization name gets the whole repo name truncated.

However, I tried two sizes:

With 13 rem, and the result is better. The suggestion with longer repo name is shown longer before gets truncated (in the blue box) and the longer organization name can get at least a letter before gets truncated (green box).
With 13.4 rem. Longer organization name has two letters before gets truncated. However, bigger than this caused getting cut off.

nickytonline · 2024-04-04T21:41:26Z

@nickytonline making 12.3 rem to 12.4 rem or 12.5 rem do almost the same result, where the longer organization name gets the whole repo name truncated.

However, I tried two sizes:

With 13 rem, and the result is better. The suggestion with longer repo name is shown longer before gets truncated (in the blue box) and the longer organization name can get at least a letter before gets truncated (green box).

With 13.4 rem. Longer organization name has two letters before gets truncated. However, bigger than this caused getting cut off.

The 13rem one looks good. Thanks for your patience in this @adiati98!

adiati98 · 2024-04-04T21:46:23Z

@nickytonline thank you also for your patience going back and forth with this! 🙏

I'm not on my computer anymore. So, either I'll fix it tomorrow or if you can do it, Nick. 😊

nickytonline · 2024-04-04T22:09:06Z

@nickytonline thank you also for your patience going back and forth with this! 🙏

I'm not on my computer anymore. So, either I'll fix it tomorrow or if you can do it, Nick. 😊

No rush. Whenever you have a chance to push the changes.

adiati98 · 2024-04-05T10:31:42Z

@nickytonline thank you also for your patience going back and forth with this! 🙏

I'm not on my computer anymore. So, either I'll fix it tomorrow or if you can do it, Nick. 😊

No rush. Whenever you have a chance to push the changes.

Done 😊

## [2.16.2-beta.1](v2.16.1...v2.16.2-beta.1) (2024-04-05) ### 🐛 Bug Fixes * now common OG image functions are in a utility file ([#3132](#3132)) ([450d874](450d874)) * repos with long name partially stack ([#2534](#2534)) ([1ed303b](1ed303b))

## [2.17.0](v2.16.1...v2.17.0) (2024-04-10) ### 🧑‍💻 Code Refactoring * remove `/hub` and `/pages` subfolder routing ([#2963](#2963)) ([5c090f3](5c090f3)) ### 🍕 Features * add range selection to contributor profile page ([#3125](#3125)) ([641f9b2](641f9b2)) * add Skeleton to Repo Page ([#3124](#3124)) ([d661ffa](d661ffa)) * initial `/starsearch` layout ([#3148](#3148)) ([5c3d61b](5c3d61b)) * matched Contritbutor Insight edit page style to workspace UI ([#3109](#3109)) ([c9e3872](c9e3872)) * matched Repository Insight edit page style to workspace UI ([#3092](#3092)) ([c65b053](c65b053)) * repo charts style fixes ([#3151](#3151)) ([9b7197b](9b7197b)) * search for repositories ([#3140](#3140)) ([10ede95](10ede95)) ### 🤖 Build System * update to Next.js 13.5.6 ([#3149](#3149)) ([b65b84c](b65b84c)) ### 🐛 Bug Fixes * now common OG image functions are in a utility file ([#3132](#3132)) ([450d874](450d874)) * pass selected repositories to new repository insight creation ([#3107](#3107)) ([3c57f94](3c57f94)) * repos with long name partially stack ([#2534](#2534)) ([1ed303b](1ed303b)) * swap text for stars/forks in repo page OG image ([#3145](#3145)) ([22fa602](22fa602)) * text area input does not focus when active and add highlight input is always focussed in post a highlight form ([#3008](#3008)) ([e9b9fed](e9b9fed)) * update API URL in contributor card edge function for pull requests ([#3157](#3157)) ([668a26b](668a26b)) * use OpenGraph image URL and remove server request from user profile ([#3137](#3137)) ([4e27f55](4e27f55)), closes [#3066](#3066)

adiati98 added 2 commits January 25, 2024 23:04

fix: add truncate and tracking-tighter className to suggestion

3c4c58b

* fix: lint suggestions

Merge branch 'beta' of https://github.com/open-sauced/app into fix/ov…

a3632af

…erflow-result-items

takanome-dev reviewed Jan 26, 2024

View reviewed changes

brandonroberts added the requested changes label Jan 30, 2024

adiati98 added 2 commits January 31, 2024 13:30

Merge branch 'beta' of https://github.com/open-sauced/app into fix/ov…

3067e96

…erflow-result-items

fix: add inline-block class to span

dd94e53

* fix: remove truncate from div in line 147

takanome-dev added awaiting review and removed requested changes labels Jan 31, 2024

adiati98 and others added 2 commits February 15, 2024 19:41

Merge branch 'beta' of https://github.com/open-sauced/app into fix/ov…

6e3bfe1

…erflow-result-items

Merge branch 'beta' into fix/overflow-result-items

0c09d80

nickytonline reviewed Feb 19, 2024

View reviewed changes

Merge branch 'beta' into fix/overflow-result-items

754bd4f

adiati98 mentioned this pull request Mar 14, 2024

Bug: Long repos' name are partially stack at the back of another name when searching with the search input in the Explore tab #2335

Closed

2 tasks

adiati98 added 2 commits March 15, 2024 10:03

fix: set max width to the suggestion in span element and apply truncate

5950f81

Merge branch 'beta' of https://github.com/open-sauced/app into fix/ov…

5e46bf3

…erflow-result-items

BekahHW requested a review from nickytonline April 3, 2024 12:59

Merge branch 'beta' into fix/overflow-result-items

7347869

nickytonline reviewed Apr 3, 2024

View reviewed changes

adiati98 and others added 4 commits April 3, 2024 21:06

Merge branch 'beta' into fix/overflow-result-items

7b43aaf

Merge branch 'beta' into fix/overflow-result-items

295f064

fix: configure span in its parent

6f25587

* fix: revert span classname

Merge branch 'beta' into fix/overflow-result-items

07567f1

nickytonline approved these changes Apr 4, 2024

View reviewed changes

adiati98 added 2 commits April 4, 2024 23:25

Merge branch 'beta' into fix/overflow-result-items

ef7cd41

Merge branch 'beta' into fix/overflow-result-items

7d2f823

fix: change max width of span from 12.3 to 13rem

50ef5cf

brandonroberts approved these changes Apr 5, 2024

View reviewed changes

brandonroberts merged commit 1ed303b into open-sauced:beta Apr 5, 2024
11 checks passed

adiati98 deleted the fix/overflow-result-items branch April 5, 2024 19:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: repos with long name partially stack #2534

fix: repos with long name partially stack #2534

adiati98 commented Jan 25, 2024 •

edited

netlify bot commented Jan 25, 2024 •

edited

netlify bot commented Jan 25, 2024 •

edited

takanome-dev left a comment •

edited

adiati98 commented Jan 26, 2024 •

edited

adiati98 commented Jan 31, 2024

takanome-dev commented Jan 31, 2024

nickytonline left a comment

adiati98 commented Feb 19, 2024

adiati98 commented Mar 15, 2024

nickytonline Apr 3, 2024

adiati98 Apr 3, 2024

adiati98 Apr 4, 2024

nickytonline left a comment

adiati98 commented Apr 4, 2024 •

edited

nickytonline commented Apr 4, 2024

adiati98 commented Apr 4, 2024

nickytonline commented Apr 4, 2024

adiati98 commented Apr 5, 2024

	className={clsx(cursor === index && "_cursorActive bg-slate-100", "px-4 py-2 hover:bg-light-slate-2")}
	className={clsx(cursor === index && "_cursorActive bg-slate-100", "px-4 py-2 hover:bg-light-slate-2", "[&_span]:max-w-[12.3rem]")}

fix: repos with long name partially stack #2534

fix: repos with long name partially stack #2534

Conversation

adiati98 commented Jan 25, 2024 • edited

Description

The changes made here:

What type of PR is this? (check all applicable)

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Before

After

Steps to QA

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

netlify bot commented Jan 25, 2024 • edited

✅ Deploy Preview for oss-insights ready!

netlify bot commented Jan 25, 2024 • edited

✅ Deploy Preview for design-insights ready!

takanome-dev left a comment • edited

Choose a reason for hiding this comment

adiati98 commented Jan 26, 2024 • edited

adiati98 commented Jan 31, 2024

takanome-dev commented Jan 31, 2024

nickytonline left a comment

Choose a reason for hiding this comment

adiati98 commented Feb 19, 2024

adiati98 commented Mar 15, 2024

nickytonline Apr 3, 2024

Choose a reason for hiding this comment

adiati98 Apr 3, 2024

Choose a reason for hiding this comment

adiati98 Apr 4, 2024

Choose a reason for hiding this comment

nickytonline left a comment

Choose a reason for hiding this comment

adiati98 commented Apr 4, 2024 • edited

nickytonline commented Apr 4, 2024

adiati98 commented Apr 4, 2024

nickytonline commented Apr 4, 2024

adiati98 commented Apr 5, 2024

adiati98 commented Jan 25, 2024 •

edited

netlify bot commented Jan 25, 2024 •

edited

netlify bot commented Jan 25, 2024 •

edited

takanome-dev left a comment •

edited

adiati98 commented Jan 26, 2024 •

edited

adiati98 commented Apr 4, 2024 •

edited