fix(horizontal filter bar filter labels): Increase max-width to 96px

[rtexelm]

SUMMARY

Allow the size of the label to represent more of the filter title before truncation. Size changed from 60px to 96px

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

BEFORE:

AFTER:

TESTING INSTRUCTIONS

Create a filter with a title long enough to overflow 96px

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags: HORIZONTAL_FILTER_BAR
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[john-bodley]

Thanks @rtexelm for the PR. Isn't the readability a function of screen size and thus should the maximum width be a relative (as opposed to absolute) measure?

[eschutho]

/testenv up

[github-actions]

@eschutho Ephemeral environment spinning up at http://54.185.241.142:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[yousoph]

/testenv up FEATURE_HORIZONTAL_FILTER_BAR= True

[rtexelm]

@john-bodley Yes I think it should be relative, however I determined that would be a more significant style change that might be better suited to a separate PR after consulting with the designers while this was in response to a particular request for it to be set to 96px

[github-actions]

@yousoph Ephemeral environment spinning up at http://35.87.101.189:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[eschutho]

@kasiazjc, in light of @john-bodley's comment what do you think about us just removing the max-width on this element altogether. The filters do a pretty good job of adjusting their width on their own. Here's what it would look like with no max width on the label.

Screen.Recording.2023-11-16.at.5.54.35.PM.mov

[villebro]

I tend to agree with @eschutho here. In my experience dashboard designers will usually tend to want the whole label to be visible, and if there's need for additional context that's not needed in the label, that can always be placed in the description to be displayed in the tooltip. So I vote for always showing the full label.

[kasiazjc]

@kasiazjc, in light of @john-bodley's comment what do you think about us just removing the max-width on this element altogether. The filters do a pretty good job of adjusting their width on their own. Here's what it would look like with no max width on the label.

Screen.Recording.2023-11-16.at.5.54.35.PM.mov

I think removing max makes sense in this case, and good point @villebro about using description if needed. Let's do it :)

[eschutho]

Suggest to remove the max-width altogether

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (d6fde3c) 69.00% compared to head (3396f4f) 69.00%.
Report is 48 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #25883      +/-   ##
==========================================
- Coverage   69.00%   69.00%   -0.01%     
==========================================
  Files        1938     1938              
  Lines       75831    75843      +12     
  Branches     8427     8427              
==========================================
+ Hits        52328    52332       +4     
- Misses      21334    21341       +7     
- Partials     2169     2170       +1     

Flag	Coverage Δ
javascript	56.22% <ø> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.