Компоновка приложений угловых компонентов с помощью AngularDart

Элементы навигации материала перекрываются с заголовком приложения с макетом угловых компонентов приложения при ширине устройства 320 пикселей, а расстояние между элементами навигации больше, чем требуется. Так как же исправить эти две вещи с помощью макета приложения? Помощь!

app_component.html

  <material-drawer temporary #drawer="drawer"
                   [attr.end]="true"
                   [attr.overlay]="true">
      <div *deferredContent>
          Here is some drawer content.
      </div>
  </material-drawer>
  <material-content>
      <header class="material-header shadow">
          <div class="material-header-row">
              <span class="material-header-title">My Application</span>
              <div class="material-spacer"></div>
             nav class="material-navigation">
                  <material-button class="material-favorite-button" icon 
                   (trigger)="drawer.toggle()">
                      <material-icon icon="favorite"></material-icon>
                  </material-button>
            </nav>
            <nav class="material-navigation">
            <material-button class="material-more-button" icon (trigger)="">
                <material-icon icon="more_vert"></material-icon>
            </material-button>
            </nav>
          </div>
       </header>
    <div class="app_name">

    </div>
    <div class="controls">
       <h3>Options</h3>

       <material-toggle [(checked)]="end" label="end">
       </material-toggle>

       <material-toggle [(checked)]="overlay" label="overlay">
       </material-toggle>
    </div>
</material-content>

app_component.css

header{

}

.material-header-row {
  background-color: #212121;
  align-content: center;
 }

@media screen and (max-width: 320px) {

  header {
      width: 100%;
  }
 }

Даже макет приложения также не отвечает на медиа шириной 320 пикселей и 480 пикселей.