Skip to content

fix: column width for sessions and activity table for smaller devices #2745

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
HarshMN2345 wants to merge 5 commits into
base: main
Choose a base branch
from
+93 −62
Open

fix: column width for sessions and activity table for smaller devices #2745

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
781dfe5
fix: column width for sessions and activity table for smaller devices
HarshMN2345 Dec 29, 2025
e26ed38
some more fixes
HarshMN2345 Dec 29, 2025
ce7564d
addressed a comment
HarshMN2345 Dec 30, 2025
e57d7db
sidebar was also not working on mobile view in pages under /account
HarshMN2345 Dec 30, 2025
ba3dce0
use pink column type
HarshMN2345 Dec 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 69 additions & 51 deletions src/lib/layout/activity.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import { Container } from '$lib/layout';
import { toLocaleDateTime } from '$lib/helpers/date';
import type { Models } from '@appwrite.io/console';
import { Layout, Table, Card, Empty } from '@appwrite.io/pink-svelte';
import { Layout, Table, Card, Empty, InteractiveText } from '@appwrite.io/pink-svelte';
import Button from '$lib/elements/forms/button.svelte';
import type { PinkColumn } from '$lib/helpers/types';

Expand All @@ -14,12 +14,32 @@
export let databasesScreen = false;
export let useCreateLinkForPagination = true;

function getColumnWidth(columnId: string): Pick<PinkColumn, 'width'> {
const widthConfig: Record<
string,
{ insideSheet: number | { min: number }; default: number | { min: number } }
> = {
user: { insideSheet: 140, default: { min: 100 } },
event: { insideSheet: 125, default: { min: 160 } },
location: { insideSheet: 100, default: { min: 120 } },
ip: { insideSheet: { min: 150 }, default: { min: 250 } },
date: { insideSheet: { min: 200 }, default: { min: 180 } }
};

const config = widthConfig[columnId];
if (!config) {
return {};
}

return { width: insideSideSheet ? config.insideSheet : config.default };
}

const columns: PinkColumn[] = [
{ id: 'user', ...(insideSideSheet ? { width: 140 } : {}) },
{ id: 'event', ...(insideSideSheet ? { width: 125 } : {}) },
{ id: 'location', ...(insideSideSheet ? { width: 100 } : {}) },
{ id: 'ip', ...(insideSideSheet ? { width: { min: 150 } } : {}) },
{ id: 'date', ...(insideSideSheet ? { width: { min: 200 } } : {}) }
{ id: 'user', ...getColumnWidth('user') },
{ id: 'event', ...getColumnWidth('event') },
{ id: 'location', ...getColumnWidth('location') },
{ id: 'ip', ...getColumnWidth('ip') },
{ id: 'date', ...getColumnWidth('date') }
];
</script>

Expand All @@ -29,55 +49,53 @@
expanded={databasesScreen && !insideSideSheet}
slotSpacing={databasesScreen && !insideSideSheet}>
{#if logs.total}
<div>
<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}
<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}
<div class="avatar is-size-small">
<span class="icon-anonymous" aria-hidden="true"></span>
</div>
<span class="text u-trim">{log.userName ?? 'Anonymous'}</span>
<AvatarInitials size="xs" name={log.userEmail} />
<Trim>{log.userEmail}</Trim>
{/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}
Unknown
<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}
</Table.Cell>
<Table.Cell column="ip" {root}>
{log.ip}
</Table.Cell>
<Table.Cell column="date" {root}>
{toLocaleDateTime(log.time)}
</Table.Cell>
</Table.Row.Base>
{/each}
</Table.Root>
</div>
</Layout.Stack>
</Table.Cell>
<Table.Cell column="event" {root}>
{log.event}
</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}>
{toLocaleDateTime(log.time)}
</Table.Cell>
</Table.Row.Base>
{/each}
</Table.Root>

<PaginationWithLimit
{limit}
Expand Down
1 change: 0 additions & 1 deletion src/routes/(console)/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -334,7 +334,6 @@
<CommandCenter />
<Shell
showSideNavigation={page.url.pathname !== '/' &&
!page.url.pathname.includes(base + '/account') &&
!page.url.pathname.includes(base + '/card') &&
!page.url.pathname.includes(base + '/onboarding')}
showHeader={!page.url.pathname.includes(base + '/onboarding/create-project')}
Expand Down
17 changes: 12 additions & 5 deletions src/routes/(console)/account/sessions/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,14 @@
import type { PageData } from './$types';
import { addNotification } from '$lib/stores/notifications';
import { onMount } from 'svelte';
import { Badge, Layout, Table, Typography, Icon } from '@appwrite.io/pink-svelte';
import {
Badge,
Layout,
Table,
Typography,
Icon,
InteractiveText
} from '@appwrite.io/pink-svelte';
import { IconGlobeAlt } from '@appwrite.io/pink-icons-svelte';

export let data: PageData;
Expand Down Expand Up @@ -92,9 +99,9 @@
<Table.Root
let:root
columns={[
{ id: 'client' },
{ id: 'location', width: 200 },
{ id: 'ip', width: 200 },
{ 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>
Expand Down Expand Up @@ -146,7 +153,7 @@
{/if}
</Table.Cell>
<Table.Cell column="ip" {root}>
{session.ip}
<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>
Expand Down
17 changes: 12 additions & 5 deletions src/routes/(console)/project-[region]-[project]/auth/user-[user]/sessions/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
<script lang="ts">
import { EmptySearch, Trim } from '$lib/components';
import { Badge, Layout, Table, Typography, Icon } from '@appwrite.io/pink-svelte';
import {
Badge,
Layout,
Table,
Typography,
Icon,
InteractiveText
} from '@appwrite.io/pink-svelte';
import { IconGlobeAlt } from '@appwrite.io/pink-icons-svelte';
import { Button } from '$lib/elements/forms';
import { isValueOfStringEnum } from '$lib/helpers/types';
Expand Down Expand Up @@ -36,9 +43,9 @@
<Table.Root
let:root
columns={[
{ id: 'client' },
{ id: 'location', width: 200 },
{ id: 'ip', width: 200 },
{ id: 'client', width: { min: 450 } },
{ id: 'location', width: { min: 200 } },
{ id: 'ip', width: { min: 200 } },
{ id: 'actions', width: 100 }
]}>
<svelte:fragment slot="header" let:root>
Expand Down Expand Up @@ -84,7 +91,7 @@
{/if}
</Table.Cell>
<Table.Cell column="ip" {root}>
{session.ip}
<InteractiveText variant="copy" text={session.ip} isVisible />
</Table.Cell>
<Table.Cell column="actions" {root}>
<Button
Expand Down