Fix: Long member nicknames look terrible (#602)

* style: 🎨 update style of name * feat: ✨ truncate the name in getFullName * fix: 🎨 overflow in all other pages
Dsek-LTH · Nov 26, 2024 · 4282dcb · 4282dcb
1 parent 4f50a7c
commit 4282dcb
Show file tree

Hide file tree

Showing 10 changed files with 144 additions and 75 deletions.
diff --git a/src/lib/components/socials/AuthorSignature.svelte b/src/lib/components/socials/AuthorSignature.svelte
@@ -17,24 +17,36 @@
   export let type: Author["type"] = "Member";
   export let size: "sm" | "md" | "lg" | "xl" = "lg";
   export let links = true;
+
   const sizeToWidth: Record<typeof size, string> = {
     sm: "w-4",
     md: "w-8",
     lg: "w-12",
     xl: "w-16",
   };
+
   const sizeToGap: Record<typeof size, string> = {
     sm: "gap-2",
     md: "gap-2",
     lg: "gap-3",
     xl: "gap-4",
   };
+
+  const sizeToText: Record<typeof size, string> = {
+    sm: "text-sm",
+    md: "text-base",
+    lg: "text-lg",
+    xl: "text-xl",
+  };
 </script>
 
 <div
-  class={twMerge(`${sizeToGap[size]} flex grow flex-row items-center`, clazz)}
+  class={twMerge(
+    `${sizeToGap[size]} flex max-w-full flex-row items-start overflow-hidden`,
+    clazz,
+  )}
 >
-  <div class="avatar">
+  <div class="avatar shrink-0">
     <div class="{sizeToWidth[size]} m-2 rounded-full">
       {#if type == "Custom"}
         <CustomAuthorImage {customAuthor} />
@@ -51,41 +63,53 @@
       {/if}
     </div>
   </div>
-  <div class="flex grow flex-col items-stretch">
+
+  <div class="min-w-0 flex-1 overflow-hidden">
     {#if type == "Custom" && customAuthor != null}
-      <h3 class="text-{size}">
-        {customAuthor.name}
-      </h3>
-    {:else}
-      <a
-        href="/members/{member.studentId}"
-        tabindex={links ? 0 : -1}
-        class="font-semibold transition-opacity hover:opacity-80 focus:opacity-80"
-        class:pointer-events-none={!links}
-      >
-        <h3 class="text-{size} font-semibold">
-          {getFullName(member)}
+      <div class="overflow-hidden">
+        <h3
+          class={`${sizeToText[size]} line-clamp-3 break-words font-semibold`}
+        >
+          {customAuthor.name}
         </h3>
-      </a>
+      </div>
+    {:else}
+      <div class="overflow-hidden">
+        <a
+          href="/members/{member.studentId}"
+          tabindex={links ? 0 : -1}
+          class="block transition-opacity hover:opacity-80 focus:opacity-80"
+          class:pointer-events-none={!links}
+        >
+          <h3
+            class={`${sizeToText[size]} line-clamp-3 break-words font-semibold leading-tight`}
+            title={getFullName(member)}
+          >
+            {getFullName(member)}
+          </h3>
+        </a>
+      </div>
     {/if}
-    <div class="flex justify-between">
+
+    <div class="flex justify-between text-sm">
       {#if (type !== "Custom" || customAuthor == null) && position}
-        <h3 class="text-sm font-thin">
+        <div class="min-w-0 truncate opacity-80">
           <a
             href="/positions/{position.id}"
             tabindex={links ? 0 : -1}
-            class="link link-primary no-underline {links
+            class="link-primary no-underline transition-opacity hover:opacity-80 focus:opacity-80 {links
               ? ''
               : 'pointer-events-none'}"
           >
             {position.name}
           </a>
-        </h3>
+        </div>
       {:else}
         <div />
-        <!-- for positioning the slot correctly -->
       {/if}
-      <slot name="end" />
+      <div class="shrink-0">
+        <slot name="end" />
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/lib/components/socials/CommentRow.svelte b/src/lib/components/socials/CommentRow.svelte
@@ -51,44 +51,48 @@
   class="relative mb-4"
   id="comment-section"
 >
-  <header class="flex items-start gap-2">
-    <a href="/members/{author.studentId}" class="">
+  <div class="grid grid-cols-[auto_1fr_auto] items-start gap-2">
+    <a href="/members/{author.studentId}">
       <MemberAvatar member={author} class="w-8 rounded-lg" />
     </a>
-    <div class="flex-1 text-xs leading-snug">
+
+    <div class="min-w-0 text-xs">
       <a
         href="/members/{author.studentId}"
-        class="link link-primary block no-underline"
+        class="link link-primary block truncate no-underline"
+        title={getFullName(author)}
       >
         {getFullName(author)}
       </a>
       <span class="font-semibold opacity-50"
         >{relativeDate(comment.published)}</span
       >
     </div>
-  </header>
-  <MarkdownBody body={fixedContent}></MarkdownBody>
-  <div class="absolute -top-4 right-0 flex">
-    {#if isAuthorized(apiNames[type].COMMENT, $page.data.user)}
-      <button class="btn btn-square btn-ghost btn-md" on:click={onReply}>
-        <span class="i-mdi-reply text-xl" />
-      </button>
-    {/if}
-    {#if isAuthorized(apiNames[type].COMMENT_DELETE, $page.data.user)}
-      <form method="POST" action="?/removeComment" use:enhance>
-        <input
-          type="hidden"
-          name="commentId"
-          value={comment.id}
-          {...$constraints.commentId}
-        />
-        {#if $errors.commentId}
-          <p class="text-error">{$errors.commentId}</p>
-        {/if}
-        <button type="submit" class="btn btn-square btn-ghost btn-md">
-          <span class="i-mdi-delete text-xl" />
+
+    <div class="flex gap-1">
+      {#if isAuthorized(apiNames[type].COMMENT, $page.data.user)}
+        <button class="btn btn-square btn-ghost btn-md" on:click={onReply}>
+          <span class="i-mdi-reply text-xl" />
         </button>
-      </form>
-    {/if}
+      {/if}
+      {#if isAuthorized(apiNames[type].COMMENT_DELETE, $page.data.user)}
+        <form method="POST" action="?/removeComment" use:enhance>
+          <input
+            type="hidden"
+            name="commentId"
+            value={comment.id}
+            {...$constraints.commentId}
+          />
+          {#if $errors.commentId}
+            <p class="text-error">{$errors.commentId}</p>
+          {/if}
+          <button type="submit" class="btn btn-square btn-ghost btn-md">
+            <span class="i-mdi-delete text-xl" />
+          </button>
+        </form>
+      {/if}
+    </div>
   </div>
+
+  <MarkdownBody body={fixedContent}></MarkdownBody>
 </section>
diff --git a/src/lib/utils/client/member.ts b/src/lib/utils/client/member.ts
@@ -10,10 +10,15 @@ type Options = {
   hideNickname?: boolean;
 };
 export const getFullName = (member: MemberNames, options: Options = {}) => {
-  if (member.nickname && !options.hideNickname) {
+  const truncatedNickname =
+    member.nickname && member.nickname.length > 20
+      ? member.nickname.substring(0, 17) + "..."
+      : member.nickname;
+
+  if (truncatedNickname && !options.hideNickname) {
     if (member.firstName && member.lastName)
-      return `${member.firstName} "${member.nickname}" ${member.lastName}`;
-    return `"${member.nickname}"`;
+      return `${member.firstName} "${truncatedNickname}" ${member.lastName}`;
+    return `"${truncatedNickname}"`;
   }
   if (member.firstName && member.lastName)
     return `${member.firstName} ${member.lastName}`;

diff --git a/src/routes/(app)/committees/PositionCard.svelte b/src/routes/(app)/committees/PositionCard.svelte
@@ -22,25 +22,37 @@
   <div class="card-body">
     <h2 class="card-title">
       {#if position.boardMember}
-        <a href="/board">
+        <a href="/board" class="shrink-0">
           <div class="tooltip" data-tip={m.committees_boardMember()}>
             <span class="i-mdi-account-tie" />
           </div>
         </a>
       {/if}
-      <a class="link-hover link link-primary" href="/positions/{position.id}">
-        {position.name}
-      </a>
-      {#if mandates.length > 1}
-        ({mandates.length} st)
-      {/if}
+      <div class="grid min-w-0 grid-cols-[1fr_auto] items-center gap-1">
+        <a
+          class="link-hover link link-primary truncate"
+          href="/positions/{position.id}"
+          title={position.name}
+        >
+          {position.name}
+        </a>
+        {#if mandates.length > 1}
+          <span class="shrink-0">({mandates.length} st)</span>
+        {/if}
+      </div>
     </h2>
     {#if position.email}
-      <section class="-mt-2">
-        <a class="link-hover link link-primary" href="mailto:{position.email}">
-          {position.email}
-        </a>
-      </section>
+      <div class="-mt-2 grid">
+        <div class="min-w-0">
+          <a
+            class="link-hover link link-primary block truncate text-sm sm:text-base"
+            href="mailto:{position.email}"
+            title={position.email}
+          >
+            {position.email}
+          </a>
+        </div>
+      </div>
     {/if}
     <p class="flex-grow-0">{position.description ?? ""}</p>
     <ScrollIndicatedBox element={mandatesBox}>
@@ -49,10 +61,15 @@
           {#each mandates as mandate (mandate.id)}
             <li>
               <a href="/members/{mandate.member.studentId}">
-                <div class="flex flex-row items-center gap-2">
+                <div
+                  class="grid w-full grid-cols-[auto_1fr] items-center gap-2"
+                >
                   <MemberAvatar member={mandate.member} />
-                  <div>
-                    <h3 class="font-medium">
+                  <div class="min-w-0">
+                    <h3
+                      class="truncate font-medium"
+                      title={getFullName(mandate.member)}
+                    >
                       {getFullName(mandate.member)}
                     </h3>
                     <h4 class="text-xs">

diff --git a/src/routes/(app)/events/[slug]/+page.svelte b/src/routes/(app)/events/[slug]/+page.svelte
@@ -132,7 +132,7 @@
 
   <div slot="after">
     <InterestedGoingList going={event.going} interested={event.interested} />
-    <div class="flex flex-col gap-2">
+    <div class="mt-4 flex flex-col gap-2">
       <CommentSection
         type="EVENT"
         comments={event.comments}

diff --git a/src/routes/(app)/members/[studentId]/ProfileHeader.svelte b/src/routes/(app)/members/[studentId]/ProfileHeader.svelte
@@ -9,19 +9,33 @@
 
 <div class="flex flex-col justify-between gap-4">
   <div class="flex flex-col gap-1">
-    <h1 class="text-3xl font-bold">{getFullName(member)}</h1>
+    <div class="max-w-full">
+      <h1
+        class="line-clamp-3 break-words text-2xl font-bold sm:text-3xl"
+        title={getFullName(member)}
+      >
+        {getFullName(member)}
+      </h1>
+    </div>
+
     <div
       class="order-2 flex flex-row items-center gap-2 text-nowrap lg:order-3"
     >
-      <div>{member.studentId}</div>
+      <div class="min-w-0 truncate text-sm opacity-80 sm:text-base">
+        {member.studentId}
+      </div>
       <ClassBadge {member} size="sm" />
     </div>
+
     {#if email}
-      <div class="order-4 select-all break-all">
+      <div
+        class="order-4 select-all overflow-hidden break-all text-sm opacity-80 sm:text-base"
+      >
         {email}
       </div>
     {/if}
   </div>
+
   <div class="hidden sm:block md:hidden">
     <slot name="actions" />
   </div>

diff --git a/src/routes/(app)/members/[studentId]/UpdateMemberForm.svelte b/src/routes/(app)/members/[studentId]/UpdateMemberForm.svelte
@@ -41,6 +41,7 @@
     />
     <Input
       name="nickname"
+      explanation={m.members_nickname_explanation()}
       label={m.members_nickname()}
       bind:value={$form.nickname}
       {...$constraints.nickname}

diff --git a/src/routes/UserMenu.svelte b/src/routes/UserMenu.svelte
@@ -41,13 +41,15 @@
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
   <div
     tabindex="0"
-    class="card dropdown-content card-compact z-[1] w-max bg-base-200 p-2 text-center text-base-content shadow"
+    class="card dropdown-content card-compact z-[1] min-w-[200px] max-w-[min(800px,calc(100vw-20px))] bg-base-200 p-2 text-center text-base-content shadow"
   >
     <div class="card-body">
       <p class="text-center font-semibold">{m.navbar_userMenu_loggedInAs()}</p>
-      <h3 class="text-xl font-bold">
-        {getFullName(member)}
-      </h3>
+      <div class="min-w-0">
+        <h3 class="truncate text-xl font-bold" title={getFullName(member)}>
+          {getFullName(member)}
+        </h3>
+      </div>
       <p class="text-sm">({user?.studentId})</p>
       <span class="divider m-1" />
 

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -599,6 +599,7 @@
   "members_publishedEvents": "Published events",
   "members_firstName": "First name",
   "members_nickname": "Nickname",
+  "members_nickname_explanation": "Max 20 characters, the rest is truncated",
   "members_lastName": "Last name",
   "members_programme": "Programme",
   "members_year": "Year",

diff --git a/src/translations/sv.json b/src/translations/sv.json
@@ -595,6 +595,7 @@
   "members_publishedEvents": "Publicerade evenemang",
   "members_firstName": "Förnamn",
   "members_nickname": "Smeknamn",
+  "members_nickname_explanation": "Max 20 tecken, resten kommer trunkeras",
   "members_lastName": "Efternamn",
   "members_programme": "Program",
   "members_year": "År",