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.

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

Search autocomplete option's main text shrinks before short text #419

Open
AndrewLester opened this issue Apr 19, 2022 · 8 comments · May be fixed by #949
Open

Search autocomplete option's main text shrinks before short text #419

AndrewLester opened this issue Apr 19, 2022 · 8 comments · May be fixed by #949
Labels
bug Something isn't working good first issue Good for newcomers low priority

Comments

@AndrewLester
Copy link
Contributor

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 AndrewLester added the good first issue Good for newcomers label Apr 19, 2022
@Deepanshu039
Copy link
Contributor

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

@Deepthi562
Copy link

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

@srish
Copy link
Member

srish commented Apr 20, 2022

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

@tuxology tuxology added the bug Something isn't working label Apr 21, 2022
@Deepthi562
Copy link

@srish can I still work on this?

@srish
Copy link
Member

srish commented Apr 21, 2022

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

@tuxology
Copy link
Member

tuxology commented Feb 6, 2023

We should update #467 to fix this 🙏

@brrkrmn
Copy link
Collaborator

brrkrmn commented Oct 20, 2023

@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 brrkrmn linked a pull request Oct 24, 2023 that will close this issue
@NdibeRaymond
Copy link
Collaborator

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working good first issue Good for newcomers low priority
Projects
None yet
7 participants