[Menu] When in an accordion, stackable menu doesn't stack as it should with certain screen widths

[Merlin04]

Bug Report

Steps to reproduce

1. Put a stackable menu with a lot of items inside an accordion
2. Open the accordion
3. Try resizing the window

Expected result

The menu should stack

Actual result

It doesn't in some screen widths, it overflows off the screen

Testcase

https://jsfiddle.net/deuc3fj8/

Screenshot (when possible)

See Merlin04/webweb#11

Version

2.7.7

[maidzen]

this shows the bug

[lubber-de]

That's a general issue and not related to accordion.
Currently stackable menu items only stack on mobile device with a maximum width of 767px. So it's still stacking even in an accordion, but your many menu items exceed even a tablet width

What you can only do at the moment is to adjust the @largestMobileScreen variable in menu.less to adjust it according to your needs (or use the override i provided in the jsfiddle below)

@fomantic/core Do you think we should change this from @largestMobileScreen to @largestTabletScreen ? That would fix the issue but will stack existing menus more often (breaking change)

Otherwise we should think about a general implementation of screen width dependent classes like tablet stackable, mobile only stackable

See here: https://jsfiddle.net/xbwnsto8/1/

[y0hami]

@lubber-de I think adding the tablet & mobile stackable isn't a bad idea, we already have tablet stackable in the table component

Fomantic-UI/src/definitions/collections/table.less

Line 404 in 44acd64

/*--------------