Default AppBar height is too tall

[EvHaus]

Using material-ui 0.14.0-rc2

According to https://www.google.com/design/spec/layout/structure.html#structure-app-bar the default height of the AppBar should be 56 but the material-ui max-height on the AppBar is set to 64

And this is confirmed when loading any material-ui apps on an Android phone. The default height is definitely bigger than what native Material Design apps use.

The height is also not easily changed because internal DOM nodes set various padding and line-height values which all need to be overridden. It's very frustrating.

[EvHaus]

Looks like the reason this is happening is because the default Spacings for material-ui are set for "desktop" use with no easily pluggable "mobile" spacings. To get around this, I had to create a custom theme and set:

import Spacing from 'material-ui/lib/styles/spacing';

spacing: Object.assign(Spacing, {
    desktopKeylineIncrement: 56
})

It's a bit strange that all spacing values are prefixed with 'desktop' and there are no 'mobile' prefixed spacing values defined and used anywhere. Is this by design?

[alitaheri]

not by design, I don't think so. @oliviertassinari Should the prefix even be there?

[oliviertassinari]

The height is also not easily changed because internal DOM nodes set various padding and line-height values which all need to be overridden. It's very frustrating.

You can simply change this theme value https://github.com/callemall/material-ui/blob/master/src/styles/theme-manager.js#L15.

the default height of the AppBar should be 56 but the material-ui max-height on the AppBar is set to 64

There are the material specs:

• Mobile Landscape: 48
• Mobile Portrait: 56
• Tablet/Desktop: 64

It's a bit strange that all spacing values are prefixed with 'desktop' and there are no 'mobile' prefixed

That's because it's not yet implemented. But yes it would be great to make this lib responsive, that would help me with the react-native implementation.

[mbrookes]

@oliviertassinari - should responsiveness go in the roadmap? There are a few issues now that relate to this in one form or another.

[oliviertassinari]

Should responsiveness go in the roadmap?

Yes, I think so!

[nathanmarks]

Refer to #3614 for a discussion on adding responsive component + layout support to the lib