Firefox .col-menu-item collapsing

[mzlock]

Current styles:

.col-menu {
  min-width: 144px;
}
.col-menu-item {
  width: 100%;
}

Firefox is taking these styles literally, so the .col-menu is always the minimum width and doesn't stretch to fit larger children. The larger children then get cut off.

This seems to fix it cross-browser:

.col-menu-item {
  min-width: 100%;
  (remove) width: 100%;
}

[nhunzaker]

This is a fantastic issue. I'll integrate this now.

[nhunzaker]

Brings up another question. What do you think about wrapping the text like:

What do you think?

[nhunzaker]

For comparison:

[nhunzaker]

Technically, we reference Material Design for the CK UI, this is what they have to say about menus:

https://www.google.com/design/spec/components/menus.html

[efatsi]

1 vote for leaving things in one line

[nhunzaker]

@efatsi this is the only edge case we need to figure out how to cover:

A small screen size was necessary for the example, but I could see this being an issue on larger screens too. For example:

[nhunzaker]

We could make the menu open from the outside in (as opposed to always hanging from the right to left) to account for that specific issue.

[nhunzaker]

Okay. Here's where I'm at:

[efatsi]

:+1: :+1: :+1: :+1: :+1:

[nhunzaker]

@efatsi I'll send out a patch release to fix the firefox bug, then I'll submit a PR with the menu change.