updated screenshot

Author: AlexAegis

package-lock.json

@@ -28,10 +28,13 @@ <h2>Actors {{ (currentLoreActors$ | async)?.length }}</h2>
 				mat-stroked-button
 				*ngFor="let actor of currentLoreActors$ | async"
 				(click)="select($event, actor)"
+				[matTooltip]="(actorService.accumulatorOf(actor) | async)?.accumulator.name.value + ' (' + actor?._states?.length + ')'"
 				[ngStyle]="{ backgroundColor: (actorService.accumulatorOf(actor) | async)?.accumulator.color.value }"
 			>
 				<fa-icon [icon]="maleIcon" [size]="maleIconSize"></fa-icon>
-				{{ (actorService.accumulatorOf(actor) | async)?.accumulator.name.value }} ({{ actor?._states?.length }})
+				{{ (actorService.accumulatorOf(actor) | async)?.accumulator.name.value }} ({{
+					actor?._states?.length
+				}})
 			</button>
 		</div>
 		<div class="tools grid">

src/app/lore/component/element/sidebar.component.html

@@ -1,6 +1,9 @@
 :host {
 	button {
 		transition: background-color 0.1s;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: nowrap;
 	}
 	.spacer {
 		flex: 1 1 auto;
@@ -26,7 +29,7 @@
 
 		.grid {
 			display: grid;
-			grid-template-columns: 1fr 1fr;
+			grid-template-columns: 1fr;
 			grid-gap: 1rem;
 			margin: 1rem;
 		}

src/app/lore/component/element/sidebar.component.scss

@@ -36,6 +36,7 @@ import { ConfirmComponent } from './component/dialog/confirm.component';
 import { ExportComponent } from './component/dialog/export.component';
 import { ToolbarComponent } from './component/element/toolbar.component';
 import { LoreComponent } from './lore.component';
+import { TruncatePipe } from '@app/pipe/truncate.pipe';
 
 @NgModule({
 	declarations: [
@@ -62,7 +63,8 @@ import { LoreComponent } from './lore.component';
 		ToolbarComponent,
 		MathRoundPipe,
 		ToStringPipe,
-		MathAbsPipe
+		MathAbsPipe,
+		TruncatePipe
 	],
 	imports: [
 		LoreStoreModule,

src/app/lore/lore.module.ts

@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'truncate' })
+export class TruncatePipe implements PipeTransform {
+	public transform(value: string, args: string[]): string {
+		const limit = args.length > 0 ? parseInt(args[0], 10) : 20;
+		const trail = args.length > 1 ? args[1] : '...';
+		return value.length > limit ? value.substring(0, limit - 3) + trail : value;
+	}
+}