zubhub icon indicating copy to clipboard operation
zubhub copied to clipboard
verified publisher icon unstructuredstudio

Search autocomplete option's main text shrinks before short text

Open AndrewLester opened this issue 3 years ago • 8 comments

Describe the bug Search autocomplete option's main text is shrinking before their short text when the option's space is limited. See below: image

To Reproduce

  1. Go to https://zubhub.unstructured.studio/
  2. Shrink screen to mobile size
  3. Click on the search bar
  4. Type a query
  5. Notice the main search (project title) shrinks before its short text (creator name)

Expected behavior The creator name gets shrunk first (truncated by ellipsis), then the main text. To do this, you'll probably want to add flex shrink to the shortText inside the Option component. Give the shortText a higher flex shrink than the main text.

AndrewLester avatar Apr 19 '22 01:04 AndrewLester

@tuxology , @srish I would like to work on this issue.

Deepanshu039 avatar Apr 20 '22 07:04 Deepanshu039

@AndrewLester, I would like to work on this. Please assign. Thank you.

Deepthi562 avatar Apr 20 '22 09:04 Deepthi562

Thanks @AndrewLester for filing the issue! Assigning it to @Deepanshu039 on first come first serve basis :)

srish avatar Apr 20 '22 19:04 srish

@srish can I still work on this?

Deepthi562 avatar Apr 21 '22 18:04 Deepthi562

@Deepthi562 Only one person can work on an issue at a time :)

srish avatar Apr 21 '22 22:04 srish

We should update #467 to fix this 🙏

tuxology avatar Feb 06 '23 02:02 tuxology

@tuxology I was working on this issue but want to ask some questions before opening a PR

  1. I realized that in NavBar.jsx, when searching for projects, the options are filtered to only show the logged-in user's projects. Is this what we want? I think the user should be able to search for other people's projects so I'm not sure if this is intentional.
  2. Is it okay to show the project title in two lines for small screen so that more content is shown? I used textWrap to wrap text up to 2 lines but the ellipsis is not compatible with textWrap so the title does not look like it continues. I was thinking of using -webkit-line-clamp which allows for ellipsis.
  3. I tried 2 different implementations to style. Which one do you think is better?
  • The first one keeps the username next to title for large screens and places it under title for small screens Screenshot 2023-10-20 at 10 48 14 Screenshot 2023-10-20 at 10 48 28
  • The second one places the username whenever the title is long. This one is more flexible but may look messy. Screenshot 2023-10-20 at 10 56 11 Screenshot 2023-10-20 at 10 56 22
  1. Another thing, we currently do not have a limit for the username, so it can be very long, which makes the search options to look like this: Screenshot 2023-10-20 at 11 50 09 Should I account for this in this PR or leave it because long usernames also distort many other things in other views, so there can be a limit for that in the validation schema

brrkrmn avatar Oct 20 '23 07:10 brrkrmn

@tuxology I was working on this issue but want to ask some questions before opening a PR

  1. I realized that in NavBar.jsx, when searching for projects, the options are filtered to only show the logged-in user's projects. Is this what we want? I think the user should be able to search for other people's projects so I'm not sure if this is intentional.
  2. Is it okay to show the project title in two lines for small screen so that more content is shown? I used textWrap to wrap text up to 2 lines but the ellipsis is not compatible with textWrap so the title does not look like it continues. I was thinking of using -webkit-line-clamp which allows for ellipsis.
  3. I tried 2 different implementations to style. Which one do you think is better?
  • The first one keeps the username next to title for large screens and places it under title for small screens Screenshot 2023-10-20 at 10 48 14 Screenshot 2023-10-20 at 10 48 28
  • The second one places the username whenever the title is long. This one is more flexible but may look messy. Screenshot 2023-10-20 at 10 56 11 Screenshot 2023-10-20 at 10 56 22
  1. Another thing, we currently do not have a limit for the username, so it can be very long, which makes the search options to look like this: Screenshot 2023-10-20 at 11 50 09 Should I account for this in this PR or leave it because long usernames also distort many other things in other views, so there can be a limit for that in the validation schema

I think I can attempt to answer most of your questions @brrkrmn:

  1. Great observation. You are right this is wrong in my opinion. I implemented the first version of the search endpoint so this is either an oversight on my part or on the part of whoever modified it later. @tuxology any reason this is like this? wondering if this is a thoughtful decision or just regression. If it is regression we might need to fix it. Feel free to create an issue for this @brrkrmn if it turns out to be a regression.
  2. I don't think I have the answer to this. Do we have a design for this in the figma files? if not you can create an issue for this and maybe some of the designers we have around can take it up.
  3. I think we need a second option where the username is always placed on the second line no matter what. That is more consistent and makes more sense to me.
  4. This is also either an oversight or a regression. I don't think you should try to handle it here, this is something that should be addressed when the username is being assigned. Also this is a potential issue that you can create @brrkrmn

NdibeRaymond avatar Nov 12 '23 03:11 NdibeRaymond