From b8829bf892ea8f33b84cb66858b95bd73a502e45 Mon Sep 17 00:00:00 2001
From: "nise.moe" <hey@nise.moe>
Date: Sat, 17 Feb 2024 21:02:16 +0100
Subject: [PATCH] Fixed display of possibly long usernames when logged in

---
 nise-frontend/src/app/app.component.css  | 9 +++++++++
 nise-frontend/src/app/app.component.html | 6 +++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/nise-frontend/src/app/app.component.css b/nise-frontend/src/app/app.component.css
index e69de29..8164a73 100644
--- a/nise-frontend/src/app/app.component.css
+++ b/nise-frontend/src/app/app.component.css
@@ -0,0 +1,9 @@
+.user-details {
+  max-width: 100px;
+  margin-right: 5px;
+  white-space: nowrap;
+  text-overflow: clip ellipsis;
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: bottom;
+}
diff --git a/nise-frontend/src/app/app.component.html b/nise-frontend/src/app/app.component.html
index bbe8bd4..cfb1599 100644
--- a/nise-frontend/src/app/app.component.html
+++ b/nise-frontend/src/app/app.component.html
@@ -14,9 +14,9 @@
     <form (ngSubmit)="onSubmit()">
       <input type="text" [(ngModel)]="term" [ngModelOptions]="{standalone: true}" id="nise-osu-username" required minlength="2" maxlength="50" placeholder="Search for users...">
     </form>
-    <div style="margin-top: 8px">
+    <div style="margin-top: 12px">
       <ng-container *ngIf="this.userService.isUserLoggedIn()">
-        hi, {{this.userService.currentUser?.username}} <a [href]="this.userService.getLogoutUrl()">Logout</a>
+        hi, <span class="user-details" [title]="this.userService.currentUser?.username">{{this.userService.currentUser?.username}}</span> <a [href]="this.userService.getLogoutUrl()">Logout</a>
       </ng-container>
       <ng-container *ngIf="!this.userService.isUserLoggedIn()">
         <a [href]="this.userService.getLoginUrl()">Login</a>
@@ -26,5 +26,5 @@
 </div>
 <router-outlet></router-outlet>
 <div class="text-center version">
-  v20240214
+  v20240217
 </div>