Fix overflow for issue tracking feature

[csteez]

Summary of Changes

Very long JIRA titles are overflowing on to the next line. This shrinks the width at which overflow is used for the list of issues so that doesn't happen.

Tests

N/A

Documentation

N/A

CheckList

Make sure you have checked all steps below to ensure a timely review.

• PR title addresses the issue accurately and concisely. Example: "Updates the version of Flask to v1.0.2"
  • In case you are adding a dependency, check if the license complies with the ASF 3rd Party License Policy.
• PR includes a summary of changes, including screenshots of any UI changes.
• PR adds unit tests, updates existing unit tests, OR documents why no test additions or modifications are needed.
• In case of new functionality, my PR adds documentation that describes how to use it.
  • All the public python functions and the classes in the PR contain docstrings that explain what it does
• PR passes all tests documented in the developer guide

[codecov-io]

Codecov Report

Merging #406 into master will not change coverage by %.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #406   +/-   ##
=======================================
  Coverage   78.33%   78.33%           
=======================================
  Files         194      194           
  Lines        4819     4819           
  Branches      625      625           
=======================================
  Hits         3775     3775           
  Misses        998      998           
  Partials       46       46           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c762a8f...5b8ace4. Read the comment docs.

[ttannis]

@dwon is there a way of leveraging something that was defined in our layouts to have a better idea of what this could be? If and when layouts get updated I'm wondering if we can avoid having to manually re-evaluate and update the max-widths of elements in the left panel.

[csteez]

i was wondering something similar - happy to change to something that would be more maintainable.

[ttannis]

@cstead If there's no other options that Daniel might be savvy to given his familiarity with the layout work, I'm fine with this fix but wanted to check first.

[danwom]

Thinking through some alternatives...

1. max-width: calc(100% - { some constant } px This may not work so well with variable width ticket numbers. You just allocate a set width the ticket numbers, but this could break with some long ticket names. (IE, DATAHELP-1123 vs IT-SUPPORTDESK-1232 at another company)
2. Use flex basis, shrink, and grow to automatically let the summary grow into the remaining space. You may need to play around with the structure to get the ... text-overflow to work properly. There is a working example in the TableListItem where we truncate table names and descriptions.
3. Use the same width breakpoints with new constant values -- this is delicate and likely to break.

I'd probably try approach 2

[csteez]

@danwom Thanks so much for your help and advice! I couldn't get it to work with truncated on the direct div, but on a parent it worked great.

[ttannis]

@csteez I tried this out and experienced that the issue key would wrap on small screens too. If so, what seemed to work was wrapping the issue key in a <span> and adding min-width: fit-content; to .table-issue-link

[csteez]

@ttannis how of small a screen did you try it on? i'm not seeing it replicated on my local.

[ttannis]

My home laptop and shrinking the browser as skinny and Amundsen allows. I had other changes active while testing these styles though, so if you're not seeing that occur no problem, I'll just check if I can reproduce it in staging when this goes out.

[csteez]

sounds like what i did too. i did the span change anyway, and i already had min-width: fit-content; set