fix: user list item overflow

ADOFAI-gg · Sep 25, 2024 · 06dd5cb · 06dd5cb
1 parent 6d0d798
commit 06dd5cb
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 5 deletions.
diff --git a/src/lib/components/Avatar.svelte b/src/lib/components/Avatar.svelte
@@ -25,6 +25,7 @@
 		width: var(--avatar-size);
 		height: var(--avatar-size);
 		border-radius: calc(var(--avatar-size) / 2);
+		flex-shrink: 0;
 
 		overflow: hidden;
 	}

diff --git a/src/lib/components/nav/NavUserArea.svelte b/src/lib/components/nav/NavUserArea.svelte
@@ -7,7 +7,7 @@
 
 <section class="nav-user-area">
 	<Avatar size={24} src={user.avatarURL} />
-	<span class="username-text">{user.displayName || user.username}</span>
+	<span class="username-text">{user.displayName}</span>
 </section>
 
 <style lang="scss">

diff --git a/src/lib/components/user/UserTree.svelte b/src/lib/components/user/UserTree.svelte
@@ -34,7 +34,7 @@
 				})}
 			>
 				<Avatar size={20} src={user.avatarURL} />
-				<div class="username">{user.displayName || user.username}</div>
+				<div class="username">{user.displayName}</div>
 				{#if user.isAdmin}
 					<div class="admin-sign">
 						<Icon icon="wrench" alt="admin" size={18} />
@@ -81,6 +81,9 @@
 		font-weight: 400;
 		font-size: 16px;
 		line-height: 140%;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
 	.admin-sign {

diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -13,8 +13,7 @@ export type UserListItemModel =
 	  }
 
 export interface User {
-	username: string
-	displayName: string | null
+	displayName: string
 	avatarURL: string | null
 	isAdmin: boolean
 }

diff --git a/src/stories/dummyData.ts b/src/stories/dummyData.ts
@@ -3,7 +3,6 @@ import GanjangFactory from './assets/ganjangfactory.png'
 
 export const dummyUser: User = {
 	avatarURL: GanjangFactory,
-	username: 'GanjangFactory',
 	isAdmin: false,
 	displayName: 'GanjangFactory'
 }