From b2374376b19a93c0e69fdee249b37570eac0c313 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 3 Aug 2022 12:24:47 +0200
Subject: [PATCH] style: tables: correct cell componet, add trim

---
 src/lib/elements/table/cellText.svelte               |  2 +-
 .../[project]/storage/bucket/[bucket]/index.svelte   | 12 ++++++------
 src/routes/console/[project]/users/index.svelte      |  6 +++---
 src/routes/console/[project]/users/teams.svelte      |  9 +++++----
 4 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/lib/elements/table/cellText.svelte b/src/lib/elements/table/cellText.svelte
index e17aa7093..a8a00db42 100644
--- a/src/lib/elements/table/cellText.svelte
+++ b/src/lib/elements/table/cellText.svelte
@@ -4,5 +4,5 @@
 </script>
 
 <div class="table-col " class:u-overflow-visible={showOverflow} data-title={title} role="cell">
-    <span class="text"><slot /></span>
+    <span class="text u-trim"><slot /></span>
 </div>
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte
index 386eb6872..d3b437560 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte
@@ -87,14 +87,14 @@
                 {#each $files.files as file, index}
                     {#if file.chunksTotal / file.chunksUploaded !== 1}
                         <TableRow>
-                            <TableCellText title="Name">
+                            <TableCell title="Name">
                                 <div class="u-flex u-gap-12">
                                     <div class="avatar is-color-empty" />
 
-                                    <span> {file.name}</span>
+                                    <span class="text u-trim"> {file.name}</span>
                                     <Pill warning>Pending</Pill>
                                 </div>
-                            </TableCellText>
+                            </TableCell>
                             <TableCellText title="Type">{file.mimeType}</TableCellText>
                             <TableCellText title="Size"
                                 >{bytesToSize(file.sizeOriginal)}</TableCellText>
@@ -124,12 +124,12 @@
                     {:else}
                         <TableRowLink
                             href={`${base}/console/${project}/storage/bucket/${bucket}/file/${file.$id}`}>
-                            <TableCellText title="Name">
+                            <TableCell title="Name">
                                 <div class="u-flex u-gap-12">
                                     <Avatar size={32} src={getPreview(file.$id)} name={file.name} />
-                                    <span> {file.name}</span>
+                                    <span class="text u-trim"> {file.name}</span>
                                 </div>
-                            </TableCellText>
+                            </TableCell>
                             <TableCellText title="Type">{file.mimeType}</TableCellText>
                             <TableCellText title="Size"
                                 >{bytesToSize(file.sizeOriginal)}</TableCellText>
diff --git a/src/routes/console/[project]/users/index.svelte b/src/routes/console/[project]/users/index.svelte
index a8099f49b..b581e6ab3 100644
--- a/src/routes/console/[project]/users/index.svelte
+++ b/src/routes/console/[project]/users/index.svelte
@@ -79,12 +79,12 @@
             <TableBody>
                 {#each $usersList.users as user}
                     <TableRowLink href={`${base}/console/${project}/users/user/${user.$id}`}>
-                        <TableCellText title="Name">
+                        <TableCell title="Name">
                             <div class="u-flex u-gap-12 u-cross-center">
                                 <Avatar size={32} src={getAvatar(user.name)} name={user.name} />
-                                <span class="text">{user.name ? user.name : 'n/a'}</span>
+                                <span class="text u-trim">{user.name ? user.name : 'n/a'}</span>
                             </div>
-                        </TableCellText>
+                        </TableCell>
                         <TableCellText title="Email">{user.email}</TableCellText>
                         <TableCell title="Status">
                             {#if user.status}
diff --git a/src/routes/console/[project]/users/teams.svelte b/src/routes/console/[project]/users/teams.svelte
index 6db8adc0f..376f3578c 100644
--- a/src/routes/console/[project]/users/teams.svelte
+++ b/src/routes/console/[project]/users/teams.svelte
@@ -7,7 +7,8 @@
         TableBody,
         TableRowLink,
         TableCellHead,
-        TableCellText
+        TableCellText,
+        TableCell
     } from '$lib/elements/table';
     import { Button } from '$lib/elements/forms';
     import { Empty, Pagination, Avatar, Search } from '$lib/components';
@@ -71,12 +72,12 @@
             <TableBody>
                 {#each $teamsList.teams as team}
                     <TableRowLink href={`${base}/console/${project}/users/teams/${team.$id}`}>
-                        <TableCellText title="ID">
+                        <TableCell title="ID">
                             <div class="u-flex u-gap-12">
                                 <Avatar size={32} name={team.name} src={getAvatar(team.name)} />
-                                <span>{team.name}</span>
+                                <span class="text u-trim">{team.name}</span>
                             </div>
-                        </TableCellText>
+                        </TableCell>
                         <TableCellText title="Members">{team.total} members</TableCellText>
                         <TableCellText title="Members">
                             {toLocaleDateTime(team.$createdAt)}