fixed formatting

src/app/courses/progress-courses/courses-progress-chart.component.html

@@ -1,33 +1,39 @@
 <div class="progress-chart-container">
-  <!-- Steps Column -->
-  <div class="errors errors-index">
-    <div class="anchor-label">Steps</div>
-    <div *ngFor="let total of horizTotals.slice().reverse(); index as i"
-         class="border-bottom"
-         [ngClass]="{'cursor-pointer': total.clickable}"
-         (click)="dataClick($event, [], i)">
-      {{ i + 1 }}
-    </div>
-  </div>
-
-  <!-- Total Errors Column -->
-  <div class="errors errors-total">
-    <ng-container *ngIf="showTotals">
-      <div class="anchor-label">Errors</div>
-      <div *ngFor="let total of horizTotals; index as i"
-           class="border-bottom accent-color"
-           [ngClass]="{'cursor-pointer': total.clickable}"
-           (click)="dataClick($event, [], i)">
-        {{ total.count }}
-      </div>
+  <table class="progress-table">
+    <thead>
+      <tr>
+        <th>Steps</th>
+        <th *ngIf="showTotals">Errors</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let set of sets; index as i">
+        <td data-label="Steps">
+          <div *ngFor="let total of horizTotals.slice().reverse(); let j = index" 
+               class="border-bottom"
+               [ngClass]="{'cursor-pointer': total.clickable}"
+               (click)="dataClick($event, [], j)">
+            {{ j + 1 }}
+          </div>
+        </td>
+        <td *ngIf="showTotals" data-label="Errors">
+          <div *ngFor="let total of horizTotals; let j = index" 
+               class="border-bottom"
+               [ngClass]="{'cursor-pointer': total.clickable}"
+               (click)="dataClick($event, [], j)">
+            <span [ngClass]="{'accent-color': total.count > 0}" class="error-number">{{ total.count }}</span>
+          </div>
+        </td>        
+      </tr>
+    </tbody>
+  </table>
+  <div class="total-errors-message">
+    <ng-container *ngFor="let set of sets; index as i">
+      Total Errors: <b>{{ set.total }}</b>
     </ng-container>
   </div>
-
-  <!-- Totals and Labels Row -->
-  <div class="errors-user-total">
-    <div class="errors" *ngFor="let set of sets">
-      <div class="label-over-total">Total Errors</div> <!-- Label above total -->
-      <div>{{ set.total }}</div>
+  <div class="avatar-section">
+    <div *ngFor="let set of sets" class="avatar-container">
       <planet-avatar *ngIf="showAvatar"
                      class="cursor-pointer"
                      (click)="labelClick(set)"
@@ -40,4 +46,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>

src/app/courses/progress-courses/courses-progress-chart.scss

@@ -1,88 +1,60 @@
-@import '../../variables';
-
-:host {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  padding: 1rem;
-}
-
 .progress-chart-container {
-  display: grid;
-  max-width: 1200px;
-  width: 100%;
-  grid-template-columns: 1fr 1fr; // Two main columns for "Total Errors" and "Steps"
-  grid-template-rows: auto auto; // Rows for the columns and user data row below
-  gap: 1rem;
-  background-color: $white;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
+  overflow-x: auto;
 
-  .errors-user-total {
-    grid-column: 1 / -1; // Span across both columns
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background-color: transparent; // Ensure no background color is applied
-    text-align: center; // Center align all content
-
-    .label-over-total {
-      font-weight: bold;
-      margin-bottom: 0.5rem;
-      text-align: center; // Center align the label
-      width: 100%; // Ensure it takes full width
-    }
+  .progress-table {
+    width: 100%;
+    border-collapse: collapse;
+    text-align: center;
 
-    div {
-      width: 100%; // Ensure the number takes full width
-      text-align: center; // Center the number within the full width
+    th, td {
+      border: 1px solid #e0e0e0;
+      padding: 0.75rem;
+      text-align: center;
     }
 
-    .total-number {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 100%; // Make sure it's the same width as other numbers
-      padding: 0.75rem;
-      border-bottom: 1px solid #e0e0e0;
+    th {
+      font-weight: bold;
+      background-color: #f2f2f2;
     }
   }
-}
-
-.errors-total, .errors-index, .errors-user-total {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: transparent;
-}
 
-.anchor-label, .label-over-total, .label-over-username {
-  font-weight: bold;
-  margin-bottom: 0.5rem;
-  text-align: center;
-}
-
-.errors div {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0.75rem;
-  border-bottom: 1px solid #e0e0e0;
-  width: 100%;
-  text-align: center;
-}
+  .total-errors-message {
+    margin-top: 1rem;
+    text-align: center;
+  }
 
-/* Responsive adjustments */
-@media (max-width: $screen-sm) {
-  .progress-chart-container {
-    grid-template-columns: 1fr; // Stack columns vertically on smaller screens
-    gap: 0.5rem;
+  .accent-color { 
+    padding: 0.1rem 0.3rem;
+    border-radius: 4px;
+    display: inline-block;
   }
 
-  .errors-user-total {
-    width: 100%; // Ensure full width for the user data section on small screens
+  .avatar-section {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: 1rem;
 
+    .avatar-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin: 0.5rem;
+      text-align: center;
+
+      planet-avatar {
+        margin-bottom: 0.5rem;
+        display: block;
+      }
+
+      .wrap-content {
+        margin-top: 0.5rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+      }
+    }
   }
-}
+}