Allow long button groups to wrap

[iainbeeston]

trafficstars

Description

I have a lot of tabs for one of my resources. At the moment the buttons do not wrap around, they overflow out of the container and beyond the page. By adding flex-wrap to the button group, it wraps and wraps around to create two rows of buttons instead,

Fixes # (issue)

Checklist:

• [x] I have performed a self-review of my own code
• [ ] I have commented my code, particularly in hard-to-understand areas
• [ ] I have made corresponding changes to the documentation
• [ ] I have added tests that prove my fix is effective or that my feature works

Manual review steps

1. Create a resource with lots of tabs
2. View the page in the app
3. Confirm that the tabs wrap and are all visible

Manual reviewer: please leave a comment with output from the test if that's the case.

[qlty-cloud-legacy[bot]]

Code Climate has analyzed commit 532f6139 and detected 0 issues on this pull request.

View more on Code Climate.

[codecov[bot]]

Codecov Report

Merging #1137 (532f613) into main (19092ff) will not change coverage. The diff coverage is n/a.

@@           Coverage Diff           @@
##             main    #1137   +/-   ##
=======================================
  Coverage   94.28%   94.28%           
=======================================
  Files         543      543           
  Lines       10781    10781           
=======================================
  Hits        10165    10165           
  Misses        616      616           

Impacted Files	Coverage Δ
spec/system/avo/default_field_spec.rb	95.12% <0.00%> (ø)

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

[adrianthedev]

Hey Iain,

That way of letting the tabs flow off the screen was kind of intentional.

I'm not a fan of how these look when collapsed, but I sent this task to the designer to see what he can about it.

[iainbeeston]

Oh that’s interesting - the row gap isn’t working, I must have made a mistake with the @apply. But I’m sure a designer can do a better job than me

[adrianthedev]

Nah, that's my fault. I just pasted that in the DOM, and tailwind probably didn't generate that class. I'm still waiting for the designer to weigh in.

[adrianthedev]

I think we have a better lead on how to fix this issue. The collapsible tabs will never look nice if we just collapse them. But pills will. Adding a new option that enables you to switch the display from tabs to pills will solve the issue in the best manner possible.

Closing this in favor of https://github.com/avo-hq/avo/pull/1155