[Sugestão] Header com uma melhor responsividade.

Seu texto está claro, mas pode ser aprimorado para uma melhor fluidez e precisão. Aqui está uma versão revisada:

Durante a aula, os instrutores construíram o header com o Angular Material. No entanto, em telas grandes, o elemento não possui um limite de largura, e em telas menores, o preenchimento (padding) aplicado é excessivo, fazendo com que os elementos fiquem muito comprimidos, inclusive em tamanhos de tablet.

Para corrigir esses problemas e melhorar a responsividade do layout, adicionei alguns trechos de código apenas no SCSS. Isso também facilita para quem gosta de dividir a mesma tela entre o navegador e o VSCode.

Lembrando, que deixei a largura máxima em 1000px, que foi o número que calculei do layout no figma, enquanto o ajuste de largura mínima de responsividade fica adequado até 630px.

As novas linhas de código estão marcadas com o comentário "código adicionado", enquanto as linhas removidas estão comentadas como "código removido da aula".

Segue código scss do componente header:

.app-header {
  background-color: #000; // código adicionado
  display: flex; // código adicionado
  justify-content: center; // código adicionado
  padding: 0 16px; // código adicionado

  .spacer {
    flex: 1 1 auto;
  }

  button {
    margin: 0 16px;
  }

  .mat-toolbar {
    // padding: 0 256px; // código removido da aula
    //background-color: #000; // código removido da aula

    padding: 0; // código adicionado
    width: 100%; // código adicionado
    max-width: 1000px; // código adicionado
    background-color: transparent; // código adicionado

    color: #fff;
  }

  .mat-mdc-raised-button:not(:disabled) {
    text-transform: uppercase !important;
  }

  .mat-mdc-outlined-button:not(:disabled) {
    border-color: #fff;
    text-transform: uppercase;
  }
}