zitadel/console/src/app/modules/changes/changes.component.html

<div class="change-header">
    <span class="ch-header">{{ 'CHANGES.LISTTITLE' | translate }}</span>
    <button matTooltip="{{'ACTIONS.REFRESH' | translate}}" (click)="init()" mat-icon-button>
        <mat-icon class="icon">refresh</mat-icon>
    </button>
</div>

<div class="scroll-container" appScrollable (scrollPosition)="scrollHandler($event)">
    <li class="item change-item-back" *ngFor="let hist of data | async; index as histindex">
        <span *ngIf="hist.values[0].dates[0]" class="date">{{
            hist.values[0]?.dates[0]| timestampToDate | localizedDate: 'dd. MMMM YYYY' }}</span>
        <div class="item" *ngFor="let dayelement of hist.values; index as i">
            <div class="row">
                <app-avatar matTooltip="{{ dayelement.editorDisplayName }}"
                    *ngIf="dayelement.editorDisplayName; else spacer" class="avatar"
                    [name]="dayelement.editorDisplayName" [size]="32" [forColor]="dayelement?.editorPreferredLoginName"
                    [avatarUrl]="dayelement.editorAvatarUrl || ''">
                </app-avatar>
                <ng-template #spacer>
                    <div class="spacer"></div>
                </ng-template>
                <div class="actions">
                    <div class="action" *ngFor="let action of dayelement.eventTypes; index as j">
                        <button disabled mat-icon-button aria-label="Restore history"
                            matTooltip="{{ dayelement.dates[j] | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}">
                            <mat-icon class="icon">schedule</mat-icon>
                        </button>

                        <span>
                            <span class="msg">{{ action.localizedMessage }}</span>
                            <span class="block">{{
                                dayelement.dates[j] | timestampToDate | localizedDate: 'HH:mm'
                                }}</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </li>
    <div class="sp-wrapper">
        <mat-spinner *ngIf="loading | async" diameter="25"></mat-spinner>
    </div>
    <span class="end-container" *ngIf="bottom">{{'CHANGES.BOTTOM' | translate}}</span>
</div>