Improve ellipsis usage (#1194)

sillsdev · Nov 4, 2024 · d9133b6 · d9133b6
1 parent 995de87
commit d9133b6
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/frontend/src/lib/app.postcss b/frontend/src/lib/app.postcss
@@ -220,6 +220,7 @@ img[src*="onestory-editor-logo"] {
 .x-ellipsis {
   max-width: 100%;
   overflow: hidden;
-  overflow-x: clip;
   text-overflow: ellipsis;
+  /* Ensures dangling letters are not clipped (e.g. "g") */
+  line-height: 1.3em;
 }
diff --git a/frontend/src/lib/components/Users/UserTable.svelte b/frontend/src/lib/components/Users/UserTable.svelte
@@ -58,7 +58,11 @@
         </td>
         <td class="hidden @2xl:table-cell">
           {#if user.username}
-            {user.username}
+            <span class="inline-flex max-w-40">
+              <span class="x-ellipsis" title={user.username}>
+                {user.username}
+              </span>
+            </span>
           {:else}
             –
           {/if}