From 0f7ce4d60cebc7e3edb3d4e0bef366aa8781a29b Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Sun, 4 Jan 2026 15:36:07 +0530
Subject: [PATCH] few more tables

---
 src/lib/layout/activity.svelte                | 101 +++++++------
 .../(console)/account/sessions/+page.svelte   | 140 ++++++++++--------
 2 files changed, 133 insertions(+), 108 deletions(-)

diff --git a/src/lib/layout/activity.svelte b/src/lib/layout/activity.svelte
index c77fa3488..3995a07d8 100644
--- a/src/lib/layout/activity.svelte
+++ b/src/lib/layout/activity.svelte
@@ -49,57 +49,59 @@
     expanded={databasesScreen && !insideSideSheet}
     slotSpacing={databasesScreen && !insideSideSheet}>
     {#if logs.total}
-        <Table.Root {columns} let:root>
-            <svelte:fragment slot="header" let:root>
-                <Table.Header.Cell column="user" {root}>User</Table.Header.Cell>
-                <Table.Header.Cell column="event" {root}>Event</Table.Header.Cell>
-                <Table.Header.Cell column="location" {root}>Location</Table.Header.Cell>
-                <Table.Header.Cell column="ip" {root}>IP</Table.Header.Cell>
-                <Table.Header.Cell column="date" {root}>Date</Table.Header.Cell>
-            </svelte:fragment>
-            {#each logs.logs as log}
-                <Table.Row.Base {root}>
-                    <Table.Cell column="user" {root}>
-                        <Layout.Stack direction="row" alignItems="center">
-                            {#if log.userEmail}
-                                {#if log.userName}
-                                    <AvatarInitials size="xs" name={log.userName} />
-                                    <Trim>{log.userName}</Trim>
+        <div class="responsive-table">
+            <Table.Root {columns} let:root>
+                <svelte:fragment slot="header" let:root>
+                    <Table.Header.Cell column="user" {root}>User</Table.Header.Cell>
+                    <Table.Header.Cell column="event" {root}>Event</Table.Header.Cell>
+                    <Table.Header.Cell column="location" {root}>Location</Table.Header.Cell>
+                    <Table.Header.Cell column="ip" {root}>IP</Table.Header.Cell>
+                    <Table.Header.Cell column="date" {root}>Date</Table.Header.Cell>
+                </svelte:fragment>
+                {#each logs.logs as log}
+                    <Table.Row.Base {root}>
+                        <Table.Cell column="user" {root}>
+                            <Layout.Stack direction="row" alignItems="center">
+                                {#if log.userEmail}
+                                    {#if log.userName}
+                                        <AvatarInitials size="xs" name={log.userName} />
+                                        <Trim>{log.userName}</Trim>
+                                    {:else}
+                                        <AvatarInitials size="xs" name={log.userEmail} />
+                                        <Trim>{log.userEmail}</Trim>
+                                    {/if}
                                 {:else}
-                                    <AvatarInitials size="xs" name={log.userEmail} />
-                                    <Trim>{log.userEmail}</Trim>
+                                    <div class="avatar is-size-small">
+                                        <span class="icon-anonymous" aria-hidden="true"></span>
+                                    </div>
+                                    <span class="text u-trim">{log.userName ?? 'Anonymous'}</span>
                                 {/if}
+                            </Layout.Stack>
+                        </Table.Cell>
+
+                        <Table.Cell column="event" {root}>
+                            {log.event}
+                        </Table.Cell>
+
+                        <Table.Cell column="location" {root}>
+                            {#if log.countryCode !== '--'}
+                                {log.countryName}
                             {:else}
-                                <div class="avatar is-size-small">
-                                    <span class="icon-anonymous" aria-hidden="true"></span>
-                                </div>
-                                <span class="text u-trim">{log.userName ?? 'Anonymous'}</span>
+                                Unknown
                             {/if}
-                        </Layout.Stack>
-                    </Table.Cell>
+                        </Table.Cell>
 
-                    <Table.Cell column="event" {root}>
-                        {log.event}
-                    </Table.Cell>
+                        <Table.Cell column="ip" {root}>
+                            <InteractiveText variant="copy" text={log.ip} isVisible />
+                        </Table.Cell>
 
-                    <Table.Cell column="location" {root}>
-                        {#if log.countryCode !== '--'}
-                            {log.countryName}
-                        {:else}
-                            Unknown
-                        {/if}
-                    </Table.Cell>
-
-                    <Table.Cell column="ip" {root}>
-                        <InteractiveText variant="copy" text={log.ip} isVisible />
-                    </Table.Cell>
-
-                    <Table.Cell column="date" {root}>
-                        <DualTimeView time={log.time} showDatetime />
-                    </Table.Cell>
-                </Table.Row.Base>
-            {/each}
-        </Table.Root>
+                        <Table.Cell column="date" {root}>
+                            <DualTimeView time={log.time} showDatetime />
+                        </Table.Cell>
+                    </Table.Row.Base>
+                {/each}
+            </Table.Root>
+        </div>
 
         <PaginationWithLimit
             {limit}
@@ -126,3 +128,12 @@
         </Card.Base>
     {/if}
 </Container>
+
+<style>
+    .responsive-table {
+        overflow: hidden;
+        width: 100%;
+        scrollbar-width: thin;
+        position: relative;
+    }
+</style>
diff --git a/src/routes/(console)/account/sessions/+page.svelte b/src/routes/(console)/account/sessions/+page.svelte
index bbc261abc..2eb47ec93 100644
--- a/src/routes/(console)/account/sessions/+page.svelte
+++ b/src/routes/(console)/account/sessions/+page.svelte
@@ -95,70 +95,84 @@
         <Typography.Title>Sessions</Typography.Title>
         <Button secondary on:click={logoutAll}>Sign out all sessions</Button>
     </Layout.Stack>
-
-    <Table.Root
-        let:root
-        columns={[
-            { id: 'client', width: { min: 450 } },
-            { id: 'location', width: { min: 200 } },
-            { id: 'ip', width: { min: 330 } },
-            { id: 'actions', width: 100 }
-        ]}>
-        <svelte:fragment slot="header" let:root>
-            <Table.Header.Cell column="client" {root}>Client</Table.Header.Cell>
-            <Table.Header.Cell column="location" {root}>Location</Table.Header.Cell>
-            <Table.Header.Cell column="ip" {root}>IP</Table.Header.Cell>
-            <Table.Header.Cell column="actions" {root} />
-        </svelte:fragment>
-        {#each data.sessions.sessions as session}
-            {@const browser = getBrowser(session.clientCode)}
-            <Table.Row.Base {root}>
-                <Table.Cell column="client" {root}>
-                    <Layout.Stack direction="row" alignItems="center">
-                        {#if session.clientName}
-                            <div class="avatar is-size-small">
-                                {#if browser}
-                                    <img
-                                        height="20"
-                                        width="20"
-                                        src={getBrowser(session.clientCode).toString()}
-                                        alt={session.clientName} />
-                                {:else}
-                                    <Icon icon={IconGlobeAlt} size="s" />
-                                {/if}
+    <div class="responsive-table">
+        <Table.Root
+            let:root
+            columns={[
+                { id: 'client', width: { min: 450 } },
+                { id: 'location', width: { min: 200 } },
+                { id: 'ip', width: { min: 330 } },
+                { id: 'actions', width: 100 }
+            ]}>
+            <svelte:fragment slot="header" let:root>
+                <Table.Header.Cell column="client" {root}>Client</Table.Header.Cell>
+                <Table.Header.Cell column="location" {root}>Location</Table.Header.Cell>
+                <Table.Header.Cell column="ip" {root}>IP</Table.Header.Cell>
+                <Table.Header.Cell column="actions" {root} />
+            </svelte:fragment>
+            {#each data.sessions.sessions as session}
+                {@const browser = getBrowser(session.clientCode)}
+                <Table.Row.Base {root}>
+                    <Table.Cell column="client" {root}>
+                        <Layout.Stack direction="row" alignItems="center">
+                            {#if session.clientName}
+                                <div class="avatar is-size-small">
+                                    {#if browser}
+                                        <img
+                                            height="20"
+                                            width="20"
+                                            src={getBrowser(session.clientCode).toString()}
+                                            alt={session.clientName} />
+                                    {:else}
+                                        <Icon icon={IconGlobeAlt} size="s" />
+                                    {/if}
+                                </div>
+                                <Trim>
+                                    {session.clientName}
+                                    {session.clientVersion}
+                                    on {session.osName}
+                                    {session.osVersion}
+                                </Trim>
+                            {:else}
+                                <span class="avatar is-color-empty"></span>
+                                <p class="text u-trim">Unknown</p>
+                            {/if}
+                            <div class="is-only-desktop">
+                                <Badge variant="secondary" content={session.provider} />
                             </div>
-                            <Trim>
-                                {session.clientName}
-                                {session.clientVersion}
-                                on {session.osName}
-                                {session.osVersion}
-                            </Trim>
+                            {#if session.current}
+                                <Badge
+                                    type="success"
+                                    variant="secondary"
+                                    content="current session" />
+                            {/if}
+                        </Layout.Stack>
+                    </Table.Cell>
+                    <Table.Cell column="location" {root}>
+                        {#if session.countryCode !== '--'}
+                            {session.countryName}
                         {:else}
-                            <span class="avatar is-color-empty"></span>
-                            <p class="text u-trim">Unknown</p>
+                            Unknown
                         {/if}
-                        <div class="is-only-desktop">
-                            <Badge variant="secondary" content={session.provider} />
-                        </div>
-                        {#if session.current}
-                            <Badge type="success" variant="secondary" content="current session" />
-                        {/if}
-                    </Layout.Stack>
-                </Table.Cell>
-                <Table.Cell column="location" {root}>
-                    {#if session.countryCode !== '--'}
-                        {session.countryName}
-                    {:else}
-                        Unknown
-                    {/if}
-                </Table.Cell>
-                <Table.Cell column="ip" {root}>
-                    <InteractiveText variant="copy" text={session.ip} isVisible />
-                </Table.Cell>
-                <Table.Cell column="actions" {root}>
-                    <Button size="xs" secondary on:click={() => logout(session)}>Sign out</Button>
-                </Table.Cell>
-            </Table.Row.Base>
-        {/each}
-    </Table.Root>
+                    </Table.Cell>
+                    <Table.Cell column="ip" {root}>
+                        <InteractiveText variant="copy" text={session.ip} isVisible />
+                    </Table.Cell>
+                    <Table.Cell column="actions" {root}>
+                        <Button size="xs" secondary on:click={() => logout(session)}
+                            >Sign out</Button>
+                    </Table.Cell>
+                </Table.Row.Base>
+            {/each}
+        </Table.Root>
+    </div>
 </Container>
+
+<style>
+    .responsive-table {
+        overflow: hidden;
+        width: 100%;
+        scrollbar-width: thin;
+        position: relative;
+    }
+</style>