fix(listview): add nowrap to view mode container

[villebro]

SUMMARY

Add white-space: nowrap; to the listview view mode container to prevent the buttons from line wrapping.

AFTER

BEFORE

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

• Has associated issue: closes cosmetic: prevent line-breaks on table/card icons #18239
• Required feature flags:
• 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

[kasiazjc]

@villebro In this case I am not sure if we should do a no-wrap. Those view buttons side by side take up a lot of space and it's even more obvious when you have a few rows of filters. We could actually keep this logic that if there is more than one row the icons are stacked on the top of each other or improve the margins/spacings of the whole component + icons. Wdyt?

The view icon could also be a drop down radio button to save the space.

[villebro]

@villebro In this case I am not sure if we should do a no-wrap. Those view buttons side by side take up a lot of space and it's even more obvious when you have a few rows of filters. We could actually keep this logic that if there is more than one row the icons are stacked on the top of each other or improve the margins/spacings of the whole component + icons. Wdyt?

The view icon could also be a drop down radio button to save the space.

Thanks @kasiazjc for the review! In the current design, keeping the no-wrap kinda feels ok as the dropdowns usually aren't able to gobble up the whole available space on the right (=the no-wrapped buttons don't eat up valuable horizontal space). However, having said that, I think an alternative layout in the whole component that adjusts to different sizes better would probably be optimal. Did you have a particular layout in mind?

[codecov]

Codecov Report

Merging #18246 (8c541e8) into master (c40b337) will increase coverage by 0.00%.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master   #18246   +/-   ##
=======================================
  Coverage   66.30%   66.30%           
=======================================
  Files        1592     1592           
  Lines       62437    62439    +2     
  Branches     6292     6295    +3     
=======================================
+ Hits        41401    41403    +2     
  Misses      19383    19383           
  Partials     1653     1653           

Flag	Coverage Δ
javascript	51.37% <ø> (+<0.01%)	⬆️

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

Impacted Files	Coverage Δ
...rset-frontend/src/components/ListView/ListView.tsx	96.25% <ø> (ø)
...-frontend/src/explore/components/ControlHeader.jsx
...-frontend/src/explore/components/ControlHeader.tsx	82.60% <0.00%> (ø)

---

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 c40b337...8c541e8. Read the comment docs.

[kasiazjc]

@villebro Makes sense! So I thought about something like this.

The popover logic is something that we are implementing now for time columns in explore with @kgabryje. This way we would be able to save a little bit of precious space, let me know what you think (and do not mind the mocks, i found random ones in figma).

[villebro]

I like this @kasiazjc 👍 @rusackas @mistercrunch thoughts on rolling out this new design here?

[rusackas]

@villebro / @kasiazjc I'm OK with it... I can't say it's love though. I appreciate the saved real estate, but it doesn't seem like the biggest real estate hog in its vicinity. As far as the interaction itself, If the menu/dropdown opens on hover, it's not so bad. But otherwise, we're asking for two clicks for a toggle, which seems cumbersome.

We could make the toggler smaller, and even use some AntD components, similar to this

I think this PR solves the acute issue, so I'm approving... we can certainly continue to optimize if we feel like it, in this PR or another.

[villebro]

Merging this for now, going to follow up later when we've had more time to iterate on the designs