Datagrid: Lookup icon overlaps text

[tobywicksinfor]

Describe the bug
The lookup/search icon displayed in a lookup data grid cell can overlap the text in the cell when the column width is smaller than the width of the text.

To Reproduce
Steps to reproduce the behavior:

1. npm run start
2. http://localhost:4000/components/datagrid/test-editable-lookup.html

Expected behavior
The text is shortened (and potentially an ellipsis displayed) so that the lookup and text do not overlap.

Version
IDS Enterprise Components - v4.24.0-dev

Screenshots

Platform

• OS Version: Windows 10 OS Version 1809
• Browser Name: Chrome
• Browser Version: 78.0.3904.97 (Official Build) (64-bit) (cohort: Stable)

Additional context
Perhaps related to #2174 and/or #2270.

[jbrcna]

The issue still persists when you just resize the column. if you edit the lookup field (product id) , it aligns accordingly
verified in https://4250-rc1-enterprise.demo.design.infor.com/components/datagrid/test-editable-lookup.html

also, there's another observation and filed as a separate issue. #3386

[tmcconechy]

To be clear , im only able to make this fix for edit mode. Its not possible for non edit mode (hover).
But can check. We possibly punt on this last issue

[tmcconechy]

Pushing a change for rc 2 - that uses the ellipsis setting so it will flow to ellipsis now.

[jbrcna]

The issue is now resolved. tagging this ticket as PASSED and DONE
Verified https://4250-rc2-enterprise.demo.design.infor.com/components/datagrid/test-editable-lookup.html