<mat-toolbar> меняет высоту всей страницы

Я попробовал ваш код, убедитесь, что CSS вашего компонента содержит приведенное ниже

:host {
  display: block;
  height: inherit;
}

.full-height {
  height: 100%;
}

Я только что отрегулировал его так, чтобы высота всегда была полной высоты, также я думаю, что проблема связана с дополнительным отступом в global-styles.scss, пожалуйста, обратитесь к приведенному ниже stackblitz и попробуйте проверить, где на теле добавляется дополнительный отступ!

стили.scss

body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
}

html,
body {
  height: 100%;
}

.spacer {
  flex: 1 1 auto;
}

.fixed-toolbar {
  position: fixed;
}

.mdrawer-header-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  margin-bottom: 10px;
  background-color: rgb(84, 100, 100);
  border: 3px;
  color: rgb(254, 255, 246);
}

.mdrawer-header-title {
  padding-left: 10px;
}

.history-tab {
  max-width: 30%;
}

.show-more-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

ПОЛНЫЙ КОД:

HTML:

<mat-drawer-container class = "full-height">
  <mat-drawer
    #drawer
    [(opened)] = "opened"
    mode = "over"
    position = "end"
    class = "history-tab"
  >
    <div class = "mdrawer-header-item">
      <span class = "mdrawer-header-title">History</span>
      <button mat-icon-button (click) = "opened=!opened">
        <mat-icon>close</mat-icon>
      </button>
    </div>
    <div class = "history-list">
      <ul>
        <li *ngFor = "let activityLog of service.historyPaged.items">
          <app-activity-log></app-activity-log>
        </li>
      </ul>
    </div>
    <div class = "show-more-btn">
      <button mat-stroked-button color = "primary" (click) = "ShowMoreClick()">
        <mat-icon> replay </mat-icon>
        Show more
      </button>
    </div>
  </mat-drawer>
  <mat-drawer-content>
    <mat-toolbar #toolbar class = "fixed-toolbar">
      <span>My Taskboard</span>
      <span class = "spacer"></span>
      <button
        mat-icon-button
        class = "icon"
        title = "History"
        (click) = "opened=!opened"
      >
        <mat-icon>history</mat-icon>
      </button>
    </mat-toolbar>
    <mat-toolbar #placeholder></mat-toolbar>
    <app-taskboard></app-taskboard>
  </mat-drawer-content>
</mat-drawer-container>

ТС:

import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { TaskboardComponent } from 'src/app/taskboard/taskboard.component';
import { ActivityLogComponent } from 'src/app/activity-log/activity-log.component';
import { CommonModule } from '@angular/common';

/**
 * @title Autosize sidenav
 */
@Component({
  selector: 'sidenav-autosize-example',
  templateUrl: 'sidenav-autosize-example.html',
  styleUrl: 'sidenav-autosize-example.css',
  standalone: true,
  imports: [
    MatSidenavModule,
    MatButtonModule,
    MatToolbarModule,
    TaskboardComponent,
    MatIconModule,
    ActivityLogComponent,
    CommonModule,
  ],
})
export class SidenavAutosizeExample {
  showFiller = false;
  opened = false;
  service = { historyPaged: { items: [{}] } };

  ShowMoreClick() {
    this.opened = !this.opened;
  }
}

Демо-версия Stackblitz