From e743381ebf713c48abe8004bffa4c3d81b21da54 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 22 Nov 2022 10:38:01 +0100
Subject: [PATCH 1/6] feat: update tables

---
 .../components/permissions/permissions.svelte |  2 +-
 src/lib/components/permissions/roles.svelte   |  2 +-
 src/lib/elements/table/cellHead.svelte        |  2 ++
 src/lib/elements/table/cellText.svelte        |  8 ++++++-
 src/lib/elements/table/table.svelte           |  4 +---
 src/lib/elements/table/tableScroll.svelte     |  8 +++++--
 src/lib/layout/activity.svelte                |  8 +++----
 .../auth/[[page]]/+page.svelte                | 16 +++++++-------
 .../auth/teams/[[page]]/+page.svelte          | 11 +++++-----
 .../[[page]]/+page.svelte                     |  2 +-
 .../bucket-[bucket]/[[page]]/+page.svelte     | 22 +++++++++----------
 11 files changed, 48 insertions(+), 37 deletions(-)

diff --git a/src/lib/components/permissions/permissions.svelte b/src/lib/components/permissions/permissions.svelte
index 35a3bdb6e..0f545690d 100644
--- a/src/lib/components/permissions/permissions.svelte
+++ b/src/lib/components/permissions/permissions.svelte
@@ -142,7 +142,7 @@
 </script>
 
 {#if [...$groups]?.length}
-    <Table noMargin noStyles noMobile>
+    <Table noMargin noStyles>
         <TableHeader>
             <TableCellHead>Role</TableCellHead>
             {#if withCreate}
diff --git a/src/lib/components/permissions/roles.svelte b/src/lib/components/permissions/roles.svelte
index 39c39bef1..c4629b4a6 100644
--- a/src/lib/components/permissions/roles.svelte
+++ b/src/lib/components/permissions/roles.svelte
@@ -92,7 +92,7 @@
 </script>
 
 {#if [...$groups.keys()]?.length}
-    <Table noMargin noStyles noMobile>
+    <Table noMargin noStyles>
         <TableHeader>
             <TableCellHead>Role</TableCellHead>
             <TableCellHead width={40} />
diff --git a/src/lib/elements/table/cellHead.svelte b/src/lib/elements/table/cellHead.svelte
index 7be4a0655..2ec99eca5 100644
--- a/src/lib/elements/table/cellHead.svelte
+++ b/src/lib/elements/table/cellHead.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
     export let width: number = null;
+    export let onlyDesktop = false;
 </script>
 
 <div
     style={width ? `--p-col-width:${width?.toString()}` : ''}
+    class:is-only-desktop={onlyDesktop}
     class="table-thead-col"
     role="columnheader">
     <span class="eyebrow-heading-3">
diff --git a/src/lib/elements/table/cellText.svelte b/src/lib/elements/table/cellText.svelte
index 59b8fe2e3..59dcba6e4 100644
--- a/src/lib/elements/table/cellText.svelte
+++ b/src/lib/elements/table/cellText.svelte
@@ -2,8 +2,14 @@
     import { Trim } from '$lib/components';
     export let title: string;
     export let showOverflow = false;
+    export let onlyDesktop = false;
 </script>
 
-<div class="table-col " class:u-overflow-visible={showOverflow} data-title={title} role="cell">
+<div
+    class="table-col"
+    class:is-only-desktop={onlyDesktop}
+    class:u-overflow-visible={showOverflow}
+    data-title={title}
+    role="cell">
     <Trim><slot /></Trim>
 </div>
diff --git a/src/lib/elements/table/table.svelte b/src/lib/elements/table/table.svelte
index 902a22ed3..42e67b2cd 100644
--- a/src/lib/elements/table/table.svelte
+++ b/src/lib/elements/table/table.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
     export let noMargin = false;
     export let noStyles = false;
-    export let noMobile = false;
 </script>
 
 <div
-    class="table is-vertical"
-    class:is-vertical={!noMobile}
+    class="table is-selected-columns-mobile"
     class:u-margin-block-start-32={!noMargin}
     class:is-remove-outer-styles={noStyles}
     role="table">
diff --git a/src/lib/elements/table/tableScroll.svelte b/src/lib/elements/table/tableScroll.svelte
index 77f37c60a..52b84a940 100644
--- a/src/lib/elements/table/tableScroll.svelte
+++ b/src/lib/elements/table/tableScroll.svelte
@@ -1,7 +1,11 @@
+<script lang="ts">
+    export let isSticky = false;
+</script>
+
 <div class="table-with-scroll u-margin-block-start-32">
     <div class="table-wrapper">
-        <div class="table is-sticky-scroll" role="table">
+        <table class="table" class:is-sticky-scroll={isSticky}>
             <slot />
-        </div>
+        </table>
     </div>
 </div>
diff --git a/src/lib/layout/activity.svelte b/src/lib/layout/activity.svelte
index a74108a63..3d325d20d 100644
--- a/src/lib/layout/activity.svelte
+++ b/src/lib/layout/activity.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
     import { EmptySearch, Pagination, Trim } from '$lib/components';
     import {
-        Table,
         TableBody,
         TableHeader,
         TableRow,
         TableCellHead,
         TableCell,
-        TableCellText
+        TableCellText,
+        TableScroll
     } from '$lib/elements/table';
     import { Container } from '$lib/layout';
     import { toLocaleDateTime } from '$lib/helpers/date';
@@ -26,7 +26,7 @@
 
 <Container>
     {#if logs.total}
-        <Table>
+        <TableScroll>
             <TableHeader>
                 <TableCellHead>Client</TableCellHead>
                 <TableCellHead>Event</TableCellHead>
@@ -75,7 +75,7 @@
                     </TableRow>
                 {/each}
             </TableBody>
-        </Table>
+        </TableScroll>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {logs.total}</p>
             <Pagination limit={PAGE_LIMIT} {path} {offset} sum={logs.total} />
diff --git a/src/routes/console/project-[project]/auth/[[page]]/+page.svelte b/src/routes/console/project-[project]/auth/[[page]]/+page.svelte
index b2e379531..bab5b91f2 100644
--- a/src/routes/console/project-[project]/auth/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/auth/[[page]]/+page.svelte
@@ -47,10 +47,10 @@
         <Table>
             <TableHeader>
                 <TableCellHead>Name</TableCellHead>
-                <TableCellHead>Identifiers</TableCellHead>
-                <TableCellHead width={130}>Status</TableCellHead>
-                <TableCellHead width={100}>ID</TableCellHead>
-                <TableCellHead>Joined</TableCellHead>
+                <TableCellHead onlyDesktop>Identifiers</TableCellHead>
+                <TableCellHead onlyDesktop width={130}>Status</TableCellHead>
+                <TableCellHead onlyDesktop width={100}>ID</TableCellHead>
+                <TableCellHead onlyDesktop>Joined</TableCellHead>
             </TableHeader>
             <TableBody>
                 {#each data.users.users as user}
@@ -75,12 +75,12 @@
                                 {/if}
                             </div>
                         </TableCell>
-                        <TableCellText title="Identifiers">
+                        <TableCellText onlyDesktop title="Identifiers">
                             {user.email && user.phone
                                 ? [user.email, user.phone].join(',')
                                 : user.email || user.phone}
                         </TableCellText>
-                        <TableCell title="Status">
+                        <TableCell onlyDesktop title="Status">
                             {#if user.status}
                                 <Pill success={user.emailVerification || user.phoneVerification}>
                                     {user.emailVerification && user.phoneVerification
@@ -95,7 +95,7 @@
                                 <Pill danger>blocked</Pill>
                             {/if}
                         </TableCell>
-                        <TableCell showOverflow title="ID">
+                        <TableCell onlyDesktop showOverflow title="ID">
                             <Copy value={user.$id} event="user">
                                 <Pill button>
                                     <span class="icon-duplicate" aria-hidden="true" />
@@ -103,7 +103,7 @@
                                 </Pill>
                             </Copy>
                         </TableCell>
-                        <TableCellText title="Joined">
+                        <TableCellText onlyDesktop title="Joined">
                             {toLocaleDateTime(user.registration)}
                         </TableCellText>
                     </TableRowLink>
diff --git a/src/routes/console/project-[project]/auth/teams/[[page]]/+page.svelte b/src/routes/console/project-[project]/auth/teams/[[page]]/+page.svelte
index 7b750dfa0..eb2bde69b 100644
--- a/src/routes/console/project-[project]/auth/teams/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/auth/teams/[[page]]/+page.svelte
@@ -40,21 +40,22 @@
         <Table>
             <TableHeader>
                 <TableCellHead>Name</TableCellHead>
-                <TableCellHead>Members</TableCellHead>
-                <TableCellHead>Created</TableCellHead>
+                <TableCellHead onlyDesktop>Members</TableCellHead>
+                <TableCellHead onlyDesktop>Created</TableCellHead>
             </TableHeader>
             <TableBody>
                 {#each data.teams.teams as team}
                     <TableRowLink
                         href={`${base}/console/project-${project}/auth/teams/team-${team.$id}`}>
-                        <TableCell title="ID">
+                        <TableCell title="Name">
                             <div class="u-flex u-gap-12">
                                 <AvatarInitials size={32} name={team.name} />
                                 <span class="text u-trim">{team.name}</span>
                             </div>
                         </TableCell>
-                        <TableCellText title="Members">{team.total} members</TableCellText>
-                        <TableCellText title="Members">
+                        <TableCellText onlyDesktop title="Members"
+                            >{team.total} members</TableCellText>
+                        <TableCellText onlyDesktop title="Created">
                             {toLocaleDateTime(team.$createdAt)}
                         </TableCellText>
                     </TableRowLink>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte
index 4aed513a9..e47cf213f 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte
@@ -50,7 +50,7 @@
 
     {#if $collection?.attributes?.length}
         {#if data.documents.total}
-            <TableScroll>
+            <TableScroll isSticky>
                 <TableHeader>
                     <TableCellHead>Document ID</TableCellHead>
                     {#each columns as column}
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.svelte
index 600677d32..95727668a 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.svelte
@@ -86,9 +86,9 @@
         <Table>
             <TableHeader>
                 <TableCellHead>Filename</TableCellHead>
-                <TableCellHead width={140}>Type</TableCellHead>
-                <TableCellHead width={100}>Size</TableCellHead>
-                <TableCellHead width={120}>Created</TableCellHead>
+                <TableCellHead onlyDesktop width={140}>Type</TableCellHead>
+                <TableCellHead onlyDesktop width={100}>Size</TableCellHead>
+                <TableCellHead onlyDesktop width={120}>Created</TableCellHead>
                 <TableCellHead width={30} />
             </TableHeader>
             <TableBody>
@@ -99,17 +99,17 @@
                                 <div class="u-flex u-gap-12 u-main-space-between">
                                     <span class="avatar is-size-small is-color-empty" />
 
-                                    <span class="text u-trim"> {file.name}</span>
+                                    <span class="text u-trim">{file.name}</span>
                                     <div>
                                         <Pill warning>Pending</Pill>
                                     </div>
                                 </div>
                             </TableCell>
-                            <TableCellText title="Type">{file.mimeType}</TableCellText>
-                            <TableCellText title="Size">
+                            <TableCellText onlyDesktop title="Type">{file.mimeType}</TableCellText>
+                            <TableCellText onlyDesktop title="Size">
                                 {calculateSize(file.sizeOriginal)}
                             </TableCellText>
-                            <TableCellText title="Date Created">
+                            <TableCellText onlyDesktop title="Date Created">
                                 {toLocaleDate(file.$createdAt)}
                             </TableCellText>
                             <TableCell>
@@ -137,14 +137,14 @@
                             <TableCell title="Name">
                                 <div class="u-flex u-gap-12">
                                     <Avatar size={32} src={getPreview(file.$id)} name={file.name} />
-                                    <span class="text u-trim"> {file.name}</span>
+                                    <span class="text u-trim">{file.name}</span>
                                 </div>
                             </TableCell>
-                            <TableCellText title="Type">{file.mimeType}</TableCellText>
-                            <TableCellText title="Size">
+                            <TableCellText onlyDesktop title="Type">{file.mimeType}</TableCellText>
+                            <TableCellText onlyDesktop title="Size">
                                 {calculateSize(file.sizeOriginal)}
                             </TableCellText>
-                            <TableCellText title="Date Created">
+                            <TableCellText onlyDesktop title="Date Created">
                                 {toLocaleDate(file.$createdAt)}
                             </TableCellText>
                             <TableCell showOverflow>

From 3b3c7fa4c953f47f28b56e2d058823200a3bf828 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 24 Nov 2022 11:40:26 +0100
Subject: [PATCH 2/6] fix: add width to activity page

---
 src/lib/layout/activity.svelte | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/layout/activity.svelte b/src/lib/layout/activity.svelte
index 3d325d20d..ebe9c0420 100644
--- a/src/lib/layout/activity.svelte
+++ b/src/lib/layout/activity.svelte
@@ -28,11 +28,11 @@
     {#if logs.total}
         <TableScroll>
             <TableHeader>
-                <TableCellHead>Client</TableCellHead>
-                <TableCellHead>Event</TableCellHead>
-                <TableCellHead>Location</TableCellHead>
-                <TableCellHead>IP</TableCellHead>
-                <TableCellHead>Date</TableCellHead>
+                <TableCellHead width={150}>Client</TableCellHead>
+                <TableCellHead width={100}>Event</TableCellHead>
+                <TableCellHead width={80}>Location</TableCellHead>
+                <TableCellHead width={90}>IP</TableCellHead>
+                <TableCellHead width={140}>Date</TableCellHead>
             </TableHeader>
             <TableBody>
                 {#each logs.logs as log}

From 9c25b220bf1c91fd93dcd3d9260b7d11f814724b Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 24 Nov 2022 11:44:51 +0100
Subject: [PATCH 3/6] fix: attributes and index

---
 .../collection-[collection]/attributes/+page.svelte  |  8 ++++----
 .../collection-[collection]/indexes/+page.svelte     | 12 ++++++------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
index 1b7c7501e..769d87b57 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
@@ -40,8 +40,8 @@
         <Table>
             <TableHeader>
                 <TableCellHead>Key</TableCellHead>
-                <TableCellHead>Type</TableCellHead>
-                <TableCellHead>Default Value</TableCellHead>
+                <TableCellHead onlyDesktop>Type</TableCellHead>
+                <TableCellHead onlyDesktop>Default Value</TableCellHead>
                 <TableCellHead width={30} />
             </TableHeader>
             <TableBody>
@@ -63,8 +63,8 @@
                                 {/if}
                             </div>
                         </TableCell>
-                        <TableCellText title="Type">{attribute.type}</TableCellText>
-                        <TableCellText title="Default Value">
+                        <TableCellText onlyDesktop title="Type">{attribute.type}</TableCellText>
+                        <TableCellText onlyDesktop title="Default Value">
                             {attribute.default ? attribute.default : '-'}
                         </TableCellText>
                         <TableCell showOverflow>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
index 4d070233d..734fa8fcc 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
@@ -50,9 +50,9 @@
             <Table>
                 <TableHeader>
                     <TableCellHead>Key</TableCellHead>
-                    <TableCellHead>Type</TableCellHead>
-                    <TableCellHead>Attributes</TableCellHead>
-                    <TableCellHead>Asc/Desc</TableCellHead>
+                    <TableCellHead onlyDesktop>Type</TableCellHead>
+                    <TableCellHead onlyDesktop>Attributes</TableCellHead>
+                    <TableCellHead onlyDesktop>Asc/Desc</TableCellHead>
                     <TableCellHead width={30} />
                 </TableHeader>
                 <TableBody>
@@ -72,11 +72,11 @@
                                     {/if}
                                 </div>
                             </TableCell>
-                            <TableCellText title="Type">{index.type}</TableCellText>
-                            <TableCellText title="Attributes">
+                            <TableCellText title="Type" onlyDesktop>{index.type}</TableCellText>
+                            <TableCellText title="Attributes" onlyDesktop>
                                 {index.attributes}
                             </TableCellText>
-                            <TableCellText title="ASC/DESC">
+                            <TableCellText title="ASC/DESC" onlyDesktop>
                                 {index.orders}
                             </TableCellText>
                             <TableCell showOverflow>

From bd4cb038cd2975e70143b9dc54b10ca79965856c Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 24 Nov 2022 12:01:26 +0100
Subject: [PATCH 4/6] fix: more tables

---
 .../account/sessions/[[page]]/+page.svelte    | 59 +++++++++----------
 .../members/[[page]]/+page.svelte             | 14 ++---
 .../sessions/[[page]]/+page.svelte            |  2 +-
 3 files changed, 37 insertions(+), 38 deletions(-)

diff --git a/src/routes/console/account/sessions/[[page]]/+page.svelte b/src/routes/console/account/sessions/[[page]]/+page.svelte
index de0d1644e..bf0385441 100644
--- a/src/routes/console/account/sessions/[[page]]/+page.svelte
+++ b/src/routes/console/account/sessions/[[page]]/+page.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-    import { Empty, Heading } from '$lib/components';
+    import { Empty, Heading, Trim } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Pill } from '$lib/elements';
     import {
-        Table,
         TableBody,
         TableHeader,
         TableRow,
         TableCellHead,
         TableCell,
-        TableCellText
+        TableCellText,
+        TableScroll
     } from '$lib/elements/table';
     import { Container } from '$lib/layout';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -52,40 +52,39 @@
     </div>
 
     {#if data.sessions.total}
-        <Table>
+        <TableScroll>
             <TableHeader>
-                <TableCellHead>Client</TableCellHead>
-                <TableCellHead width={100}>Location</TableCellHead>
-                <TableCellHead width={150}>IP</TableCellHead>
-                <TableCellHead width={100} />
+                <TableCellHead width={250}>Client</TableCellHead>
+                <TableCellHead width={70}>Location</TableCellHead>
+                <TableCellHead width={90}>IP</TableCellHead>
+                <TableCellHead width={60} />
             </TableHeader>
             <TableBody>
                 {#each data.sessions.sessions as session}
                     <TableRow>
                         <TableCell title="Client">
                             <div class="u-flex u-gap-12 u-cross-center">
-                                <div class="u-flex u-cross-center u-gap-12">
-                                    {#if session.clientName}
-                                        <div class="avatar is-small">
-                                            <img
-                                                height="20"
-                                                width="20"
-                                                src={getBrowser(session.clientCode).toString()}
-                                                alt={session.clientName} />
-                                        </div>
-                                        <p class="text u-trim">
-                                            {session.clientName}
-                                            {session.clientVersion}
-                                            on {session.osName}
-                                            {session.osVersion}
-                                        </p>
-                                    {:else}
-                                        <span class="avatar  is-color-empty" />
-                                        <p class="text u-trim">Unknown</p>
-                                    {/if}
+                                {#if session.clientName}
+                                    <div class="avatar is-small">
+                                        <img
+                                            height="20"
+                                            width="20"
+                                            src={getBrowser(session.clientCode).toString()}
+                                            alt={session.clientName} />
+                                    </div>
+                                    <Trim>
+                                        {session.clientName}
+                                        {session.clientVersion}
+                                        on {session.osName}
+                                        {session.osVersion}
+                                    </Trim>
+                                {:else}
+                                    <span class="avatar  is-color-empty" />
+                                    <p class="text u-trim">Unknown</p>
+                                {/if}
+                                <div class="is-only-desktop">
+                                    <Pill>{session.provider}</Pill>
                                 </div>
-
-                                <Pill>{session.provider}</Pill>
                                 {#if session.current}
                                     <Pill success>current session</Pill>
                                 {/if}
@@ -105,7 +104,7 @@
                     </TableRow>
                 {/each}
             </TableBody>
-        </Table>
+        </TableScroll>
     {:else}
         <Empty>
             <div class="u-flex u-flex-vertical u-cross-center">
diff --git a/src/routes/console/organization-[organization]/members/[[page]]/+page.svelte b/src/routes/console/organization-[organization]/members/[[page]]/+page.svelte
index 8dbd41ca7..9d8f1e918 100644
--- a/src/routes/console/organization-[organization]/members/[[page]]/+page.svelte
+++ b/src/routes/console/organization-[organization]/members/[[page]]/+page.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
     import {
-        Table,
         TableHeader,
         TableBody,
         TableCellHead,
         TableCell,
         TableCellText,
-        TableRow
+        TableRow,
+        TableScroll
     } from '$lib/elements/table';
     import { AvatarInitials, Heading, Pagination } from '$lib/components';
     import { Pill } from '$lib/elements';
@@ -64,11 +64,11 @@
             </Button>
         </div>
 
-        <Table>
+        <TableScroll>
             <TableHeader>
-                <TableCellHead>Name</TableCellHead>
-                <TableCellHead>Email</TableCellHead>
-                <TableCellHead width={100}>Role</TableCellHead>
+                <TableCellHead width={140}>Name</TableCellHead>
+                <TableCellHead width={120}>Email</TableCellHead>
+                <TableCellHead width={90}>Role</TableCellHead>
                 <TableCellHead width={30} />
             </TableHeader>
             <TableBody>
@@ -112,7 +112,7 @@
                     </TableRow>
                 {/each}
             </TableBody>
-        </Table>
+        </TableScroll>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {data.organizationMembers.total}</p>
             <Pagination
diff --git a/src/routes/console/project-[project]/auth/user-[user]/sessions/[[page]]/+page.svelte b/src/routes/console/project-[project]/auth/user-[user]/sessions/[[page]]/+page.svelte
index 1a00869b7..d0ef415a0 100644
--- a/src/routes/console/project-[project]/auth/user-[user]/sessions/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/auth/user-[user]/sessions/[[page]]/+page.svelte
@@ -35,7 +35,7 @@
         </div>
         <Table>
             <TableHeader>
-                <TableCellHead>Browser and Device</TableCellHead>
+                <TableCellHead width={140}>Browser and Device</TableCellHead>
                 <TableCellHead width={140}>Session</TableCellHead>
                 <TableCellHead width={140}>Location</TableCellHead>
                 <TableCellHead width={140}>IP</TableCellHead>

From cdf5a77dce42d9b742b6dddad01cf3edaf42556b Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 24 Nov 2022 12:15:37 +0100
Subject: [PATCH 5/6] fix: missing tables

---
 .../components/permissions/permissions.svelte    |  2 +-
 src/lib/components/permissions/roles.svelte      |  2 +-
 .../team-[team]/members/[[page]]/+page.svelte    |  8 ++++----
 .../memberships/[[page]]/+page.svelte            |  8 ++++----
 .../project-[project]/overview/keys/+page.svelte | 12 ++++++------
 .../settings/domains/[[page]]/+page.svelte       | 16 ++++++++--------
 6 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/lib/components/permissions/permissions.svelte b/src/lib/components/permissions/permissions.svelte
index 0f545690d..048ddd56f 100644
--- a/src/lib/components/permissions/permissions.svelte
+++ b/src/lib/components/permissions/permissions.svelte
@@ -144,7 +144,7 @@
 {#if [...$groups]?.length}
     <Table noMargin noStyles>
         <TableHeader>
-            <TableCellHead>Role</TableCellHead>
+            <TableCellHead width={70}>Role</TableCellHead>
             {#if withCreate}
                 <TableCellHead width={70}>Create</TableCellHead>
             {/if}
diff --git a/src/lib/components/permissions/roles.svelte b/src/lib/components/permissions/roles.svelte
index c4629b4a6..1f8ebaf03 100644
--- a/src/lib/components/permissions/roles.svelte
+++ b/src/lib/components/permissions/roles.svelte
@@ -94,7 +94,7 @@
 {#if [...$groups.keys()]?.length}
     <Table noMargin noStyles>
         <TableHeader>
-            <TableCellHead>Role</TableCellHead>
+            <TableCellHead width={70}>Role</TableCellHead>
             <TableCellHead width={40} />
         </TableHeader>
         <TableBody>
diff --git a/src/routes/console/project-[project]/auth/teams/team-[team]/members/[[page]]/+page.svelte b/src/routes/console/project-[project]/auth/teams/team-[team]/members/[[page]]/+page.svelte
index 42444922a..4cf6b4b60 100644
--- a/src/routes/console/project-[project]/auth/teams/team-[team]/members/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/auth/teams/team-[team]/members/[[page]]/+page.svelte
@@ -46,8 +46,8 @@
         <Table>
             <TableHeader>
                 <TableCellHead>Name</TableCellHead>
-                <TableCellHead>Roles</TableCellHead>
-                <TableCellHead>Joined</TableCellHead>
+                <TableCellHead onlyDesktop>Roles</TableCellHead>
+                <TableCellHead onlyDesktop>Joined</TableCellHead>
                 <TableCellHead width={30} />
             </TableHeader>
             <TableBody>
@@ -60,8 +60,8 @@
                                 <span>{membership.userName ? membership.userName : 'n/a'}</span>
                             </div>
                         </TableCellText>
-                        <TableCellText title="Roles">{membership.roles}</TableCellText>
-                        <TableCellText title="Joined">
+                        <TableCellText onlyDesktop title="Roles">{membership.roles}</TableCellText>
+                        <TableCellText onlyDesktop title="Joined">
                             {toLocaleDateTime(membership.joined)}
                         </TableCellText>
                         <TableCell>
diff --git a/src/routes/console/project-[project]/auth/user-[user]/memberships/[[page]]/+page.svelte b/src/routes/console/project-[project]/auth/user-[user]/memberships/[[page]]/+page.svelte
index b822f838a..0b594b862 100644
--- a/src/routes/console/project-[project]/auth/user-[user]/memberships/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/auth/user-[user]/memberships/[[page]]/+page.svelte
@@ -32,8 +32,8 @@
         <Table>
             <TableHeader>
                 <TableCellHead>Name</TableCellHead>
-                <TableCellHead>Roles</TableCellHead>
-                <TableCellHead>Joined</TableCellHead>
+                <TableCellHead onlyDesktop>Roles</TableCellHead>
+                <TableCellHead onlyDesktop>Joined</TableCellHead>
                 <TableCellHead width={30} />
             </TableHeader>
             <TableBody>
@@ -46,8 +46,8 @@
                                 <span>{membership.teamName ? membership.teamName : 'n/a'}</span>
                             </div>
                         </TableCellText>
-                        <TableCellText title="Roles">{membership.roles}</TableCellText>
-                        <TableCellText title="Joined">
+                        <TableCellText onlyDesktop title="Roles">{membership.roles}</TableCellText>
+                        <TableCellText onlyDesktop title="Joined">
                             {toLocaleDateTime(membership.joined)}
                         </TableCellText>
                         <TableCell width={30}>
diff --git a/src/routes/console/project-[project]/overview/keys/+page.svelte b/src/routes/console/project-[project]/overview/keys/+page.svelte
index 1c08f5b5f..714ccea79 100644
--- a/src/routes/console/project-[project]/overview/keys/+page.svelte
+++ b/src/routes/console/project-[project]/overview/keys/+page.svelte
@@ -35,9 +35,9 @@
     <Table>
         <TableHeader>
             <TableCellHead>Name</TableCellHead>
-            <TableCellHead>last accessed</TableCellHead>
-            <TableCellHead>expiration date</TableCellHead>
-            <TableCellHead>scopes</TableCellHead>
+            <TableCellHead onlyDesktop>last accessed</TableCellHead>
+            <TableCellHead onlyDesktop>expiration date</TableCellHead>
+            <TableCellHead onlyDesktop>scopes</TableCellHead>
         </TableHeader>
         <TableBody>
             {#each data.keys.keys as key}
@@ -45,13 +45,13 @@
                     <TableCellText title="Name">
                         {key.name}
                     </TableCellText>
-                    <TableCellText title="Last Accessed">
+                    <TableCellText onlyDesktop title="Last Accessed">
                         {key.accessedAt ? toLocaleDateTime(key.accessedAt) : 'never'}
                     </TableCellText>
-                    <TableCellText title="Expiration Date">
+                    <TableCellText onlyDesktop title="Expiration Date">
                         {key.expire ? toLocaleDateTime(key.expire) : 'never'}
                     </TableCellText>
-                    <TableCellText title="Expiration Date">
+                    <TableCellText onlyDesktop title="Expiration Date">
                         {key.scopes.length} Scopes
                     </TableCellText>
                 </TableRowLink>
diff --git a/src/routes/console/project-[project]/settings/domains/[[page]]/+page.svelte b/src/routes/console/project-[project]/settings/domains/[[page]]/+page.svelte
index 79f81461d..4ec970670 100644
--- a/src/routes/console/project-[project]/settings/domains/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/settings/domains/[[page]]/+page.svelte
@@ -4,13 +4,13 @@
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import {
-        Table,
         TableBody,
         TableCell,
         TableCellHead,
         TableCellText,
         TableHeader,
-        TableRow
+        TableRow,
+        TableScroll
     } from '$lib/elements/table';
     import { Container } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
@@ -68,14 +68,14 @@
         </Button>
     </div>
     {#if data.domains.total}
-        <Table>
+        <TableScroll>
             <TableHeader>
-                <TableCellHead>Domain Name</TableCellHead>
+                <TableCellHead width={150}>Domain Name</TableCellHead>
                 <TableCellHead width={100} />
                 <TableCellHead width={60}>Type</TableCellHead>
-                <TableCellHead>Name</TableCellHead>
-                <TableCellHead>Value</TableCellHead>
-                <TableCellHead />
+                <TableCellHead width={90}>Name</TableCellHead>
+                <TableCellHead width={90}>Value</TableCellHead>
+                <TableCellHead width={40} />
             </TableHeader>
             <TableBody>
                 {#each data.domains.domains as domain}
@@ -131,7 +131,7 @@
                     </TableRow>
                 {/each}
             </TableBody>
-        </Table>
+        </TableScroll>
     {:else}
         <Empty
             single

From a085bf5f462d53906602185208a31740da9f0648 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 10 Jan 2023 15:47:42 +0100
Subject: [PATCH 6/6] Merge branch 'main' of github.com:appwrite/console into
 fix-table-update

---
 package-lock.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 13f5a7f44..52821597c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5399,9 +5399,9 @@
             "dev": true
         },
         "node_modules/json5": {
-            "version": "2.2.1",
-            "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
-            "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+            "version": "2.2.3",
+            "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+            "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
             "dev": true,
             "peer": true,
             "bin": {
@@ -11827,9 +11827,9 @@
             "dev": true
         },
         "json5": {
-            "version": "2.2.1",
-            "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
-            "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+            "version": "2.2.3",
+            "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+            "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
             "dev": true,
             "peer": true
         },