<ul class="nav" id="metrics-navbar">
  <!-- TODO: Possible states are 'active' and 'disabled'. Make sure to impliment them. -->
  <li class="nav-item" *ngFor="let logTab of logTabs">
    <a class="nav-link" 
    (click)="this.changeDisplayingLog(logTab.getName())"
    [ngClass]="logTab.isActive ? 'selected-metric-item' : 'metric-item'"> {{ logTab.getName() }} </a>
  </li>
</ul>

<!-- NOTE: Area for displaying Mongoose logs -->
<div id="displaying-logs-area" class="card">
    <div class="card-body">
        <p class="text-break">{{ displayingLog }}</p>
    </div>
  </div>

<ul class="nav" id="metrics-navbar">
  <!-- TODO: Possible states are 'active' and 'disabled'. Make sure to impliment them. -->
  <li class="nav-item" *ngFor="let logTab of logTabs">
    <a class="nav-link" 
    (click)="this.changeDisplayingLog(logTab.getName())"
    [ngClass]="logTab.isActive ? 'selected-metric-item' : 'metric-item'"> {{ logTab.getName() }} </a>
  </li>
</ul>

<!-- NOTE: Area for displaying Mongoose logs -->
<div id="displaying-logs-area" class="card">
    <div class="card-body">
        <p class="text-break" style="white-space: pre; overflow-x:scroll">{{ displayingLog }}</p>
    </div>
  </div>

Add retaining of line breaks.
Add retaining of line breaks.
