[BUG] fix suggestion list cutoff issue

[ananzh]

Description

In this PR, we fixed the suggestion list cutoff in an easy way. We remove width 250px and add block display to allow browser to select a width and add ellipsis at the bottom.

However, we might have longer input that can't fit into the search. When we truncate the search, the elements look the same which might be still an issue for customer usage. We definitely need more feedbacks on the cutoff behavior.

Issue resolved:

#2555

Previous:

Current:

Check List

• All tests pass
  • yarn test:jest
  • yarn test:jest_integration
  • yarn test:ftr
• New functionality includes testing.
• New functionality has been documented.
• Update CHANGELOG.md
• Commits are signed per the DCO using --signoff

[ananzh]

This is a quick fix for the bug to improve current cx usage experience. This is not a permanent fix for suggestion list cutoff behavior.
We opened another follow-up issue for suggestion list cutoff behavior is opened here:
#2606

[codecov-commenter]

Codecov Report

Merging #2607 (84f5db8) into main (f29f734) will decrease coverage by 0.00%.
The diff coverage is n/a.

❗ Current head 84f5db8 differs from pull request most recent head 4fa3e08. Consider uploading reports for the commit 4fa3e08 to get more accurate results

@@            Coverage Diff             @@
##             main    #2607      +/-   ##
==========================================
- Coverage   66.81%   66.81%   -0.01%     
==========================================
  Files        3207     3207              
  Lines       61136    61136              
  Branches     9313     9313              
==========================================
- Hits        40851    40849       -2     
- Misses      18055    18056       +1     
- Partials     2230     2231       +1     

Impacted Files	Coverage Δ
...ic/application/models/sense_editor/sense_editor.ts	64.00% <0.00%> (-0.89%)	⬇️

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[ashwin-pc]

From the screenshot, longer strings that are cutoff still look okay to me. Suggestions arent expected to be complete and having a horizontal scrollbar in the suggestion window is not good ux.

[kavilla]

From the screenshot, longer strings that are cutoff still look okay to me. Suggestions arent expected to be complete and having a horizontal scrollbar in the suggestion window is not good ux.

+1, also I wonder if this intentional behavior? Like if hover over and it shows the full string. Is there intention that we can add features here

[kgcreative]

From the screenshot, longer strings that are cutoff still look okay to me. Suggestions arent expected to be complete and having a horizontal scrollbar in the suggestion window is not good ux.

+1, also I wonder if this intentional behavior? Like if hover over and it shows the full string. Is there intention that we can add features here

I would +1 that this is an acceptable fix. Honestly, if there are features added, I would expect that they would automatically take up space on the left or right, so having the width of the container to be automatic with a max-width of 100% still makes sense to me. I think the only item I would add here is that it would be useful to see a truncation elipsis at the end of the cutoff, but that can be explored in a subsequent follow-up. (As far as I know these items are not selectable in their current form, click just loads the string into the search box and then users can select from there, so this feels like a preview that's intended to truncate, and somewhere a max-width got introduced that artificially constrains it.

[kgcreative]

tl;dr: LGTM 🚀

[ananzh]

I changed the fix to allow ellipsis shown at the bottom. Also update commit msg. Thanks for @AMoo-Miki 's idea!

[manasvinibs]

LGTM

[opensearch-trigger-bot]

The backport to 1.x failed:

The process '/usr/bin/git' failed with exit code 1

To backport manually, run these commands in your terminal:

# Fetch latest updates from GitHub
git fetch
# Create a new working tree
git worktree add .worktrees/backport-1.x 1.x
# Navigate to the new working tree
cd .worktrees/backport-1.x
# Create a new branch
git switch --create backport/backport-2607-to-1.x
# Cherry-pick the merged commit of this pull request and resolve the conflicts
git cherry-pick -x --mainline 1 195cc8ef39e0399b50da8e48afd5cc7df20ac81f
# Push it to GitHub
git push --set-upstream origin backport/backport-2607-to-1.x
# Go back to the original working tree
cd ../..
# Delete the working tree
git worktree remove .worktrees/backport-1.x

Then, create a pull request where the base branch is 1.x and the compare/head branch is backport/backport-2607-to-1.x.