Search autocomplete option's main text shrinks before short text

[AndrewLester]

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

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.

[Deepanshu039]

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

[Deepthi562]

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

[srish]

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

[Deepthi562]

@srish can I still work on this?

[srish]

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

[tuxology]

We should update #467 to fix this 🙏

[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
  
  
• The second one places the username whenever the title is long. This one is more flexible but may look messy.
  
  

4. 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:
   
   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

[NdibeRaymond]

@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
  
  
• The second one places the username whenever the title is long. This one is more flexible but may look messy.
  
  

4. 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:
   
   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