From e2c8613e272dfa2b3afbb397a374ebe558496dd4 Mon Sep 17 00:00:00 2001
From: AbhiVarde <abhivarde99@gmail.com>
Date: Tue, 25 Nov 2025 10:38:03 +0530
Subject: [PATCH 1/2] fix: responsive layout for input fields and tables on
 mobile devices

---
 .../messaging/providers/table.svelte          | 111 ++++++++++--------
 .../overview/platforms/+page.svelte           |  88 ++++++++------
 .../bucket-[bucket]/settings/+page.svelte     |  17 +--
 3 files changed, 127 insertions(+), 89 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/table.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/table.svelte
index a54178b3db..4706ee00dc 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/table.svelte
@@ -39,51 +39,68 @@
     }
 </script>
 
-<MultiSelectionTable
-    resource="provider"
-    columns={$columns}
-    onDelete={handleDelete}
-    allowSelection={$canWriteProviders}>
-    {#snippet header(root)}
-        {#each $columns as { id, title }}
-            <Table.Header.Cell column={id} {root}>{title}</Table.Header.Cell>
-        {/each}
-    {/snippet}
+<div class="table-scroll-wrapper">
+    <MultiSelectionTable
+        resource="provider"
+        columns={$columns}
+        onDelete={handleDelete}
+        allowSelection={$canWriteProviders}>
+        {#snippet header(root)}
+            {#each $columns as { id, title }}
+                <Table.Header.Cell column={id} {root}>{title}</Table.Header.Cell>
+            {/each}
+        {/snippet}
 
-    {#snippet children(root)}
-        {@const TableRowComponent = $canWriteProviders ? Table.Row.Link : Table.Row.Base}
-        {#each data.providers.providers as provider (provider.$id)}
-            {@const href = $canWriteProviders
-                ? `${base}/project-${page.params.region}-${page.params.project}/messaging/providers/provider-${provider.$id}`
-                : undefined}
-            <TableRowComponent {href} {root} id={provider.$id}>
-                {#each $columns as column}
-                    <Table.Cell column={column.id} {root}>
-                        {#if column.id === '$id'}
-                            {#key $columns}
-                                <Id value={provider.$id}>{provider.$id}</Id>
-                            {/key}
-                        {:else if column.id === 'provider'}
-                            <Provider provider={provider.provider} />
-                        {:else if column.id === 'type'}
-                            <ProviderType type={provider.type} size="xs" />
-                        {:else if column.id === 'enabled'}
-                            <Badge
-                                variant="secondary"
-                                type={provider.enabled ? 'success' : undefined}
-                                content={provider.enabled ? 'enabled' : 'disabled'}>
-                                <svelte:fragment slot="start">
-                                    {#if provider.enabled}
-                                        <Icon icon={IconCheckCircle} size="s" />
-                                    {/if}
-                                </svelte:fragment>
-                            </Badge>
-                        {:else}
-                            {provider[column.id]}
-                        {/if}
-                    </Table.Cell>
-                {/each}
-            </TableRowComponent>
-        {/each}
-    {/snippet}
-</MultiSelectionTable>
+        {#snippet children(root)}
+            {@const TableRowComponent = $canWriteProviders ? Table.Row.Link : Table.Row.Base}
+            {#each data.providers.providers as provider (provider.$id)}
+                {@const href = $canWriteProviders
+                    ? `${base}/project-${page.params.region}-${page.params.project}/messaging/providers/provider-${provider.$id}`
+                    : undefined}
+                <TableRowComponent {href} {root} id={provider.$id}>
+                    {#each $columns as column}
+                        <Table.Cell column={column.id} {root}>
+                            {#if column.id === '$id'}
+                                {#key $columns}
+                                    <Id value={provider.$id}>{provider.$id}</Id>
+                                {/key}
+                            {:else if column.id === 'provider'}
+                                <Provider provider={provider.provider} />
+                            {:else if column.id === 'type'}
+                                <ProviderType type={provider.type} size="xs" />
+                            {:else if column.id === 'enabled'}
+                                <Badge
+                                    variant="secondary"
+                                    type={provider.enabled ? 'success' : undefined}
+                                    content={provider.enabled ? 'enabled' : 'disabled'}>
+                                    <svelte:fragment slot="start">
+                                        {#if provider.enabled}
+                                            <Icon icon={IconCheckCircle} size="s" />
+                                        {/if}
+                                    </svelte:fragment>
+                                </Badge>
+                            {:else}
+                                {provider[column.id]}
+                            {/if}
+                        </Table.Cell>
+                    {/each}
+                </TableRowComponent>
+            {/each}
+        {/snippet}
+    </MultiSelectionTable>
+</div>
+
+<style lang="scss">
+    .table-scroll-wrapper {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+
+        :global([role='table']) {
+            display: grid;
+            grid-template-columns:
+                minmax(60px, 0.5fr) minmax(200px, 2.5fr) minmax(120px, 1fr) minmax(120px, 1fr)
+                minmax(120px, 1fr) minmax(120px, 1.5fr);
+            width: 100%;
+        }
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte
index 49376776f6..bc06d5b50b 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte
@@ -121,41 +121,43 @@
 </script>
 
 {#if data.platforms.platforms.length}
-    <Table.Root columns={4} let:root>
-        <svelte:fragment slot="header" let:root>
-            <Table.Header.Cell {root}>Name</Table.Header.Cell>
-            <Table.Header.Cell {root}>Platform type</Table.Header.Cell>
-            <Table.Header.Cell {root}>Identifier</Table.Header.Cell>
-            <Table.Header.Cell {root}>Last updated</Table.Header.Cell>
-        </svelte:fragment>
-        {#each data.platforms.platforms as platform}
-            <Table.Row.Link href={`${path}/${platform.$id}`} {root}>
-                <Table.Cell {root}>
-                    {platform.name}
-                </Table.Cell>
-                <Table.Cell {root}>
-                    <Layout.Stack direction="row" gap="s" alignItems="center">
-                        <Icon icon={getPlatformInfo(platform.type)} />
-                        {PlatformTypes[platform.type]}
-                    </Layout.Stack>
-                </Table.Cell>
-                <Table.Cell {root}>
-                    {#if platform.type.includes('web') || platform.type === 'web'}
-                        {platform.hostname || '—'}
-                    {:else}
-                        {platform.key || platform.hostname || '—'}
-                    {/if}
-                </Table.Cell>
-                <Table.Cell {root}>
-                    {#if platform.$updatedAt}
-                        <DualTimeView time={platform.$updatedAt} />
-                    {:else}
-                        never
-                    {/if}
-                </Table.Cell>
-            </Table.Row.Link>
-        {/each}
-    </Table.Root>
+    <div class="table-scroll-wrapper">
+        <Table.Root columns={4} let:root>
+            <svelte:fragment slot="header" let:root>
+                <Table.Header.Cell {root}>Name</Table.Header.Cell>
+                <Table.Header.Cell {root}>Platform type</Table.Header.Cell>
+                <Table.Header.Cell {root}>Identifier</Table.Header.Cell>
+                <Table.Header.Cell {root}>Last updated</Table.Header.Cell>
+            </svelte:fragment>
+            {#each data.platforms.platforms as platform}
+                <Table.Row.Link href={`${path}/${platform.$id}`} {root}>
+                    <Table.Cell {root}>
+                        {platform.name}
+                    </Table.Cell>
+                    <Table.Cell {root}>
+                        <Layout.Stack direction="row" gap="s" alignItems="center">
+                            <Icon icon={getPlatformInfo(platform.type)} />
+                            {PlatformTypes[platform.type]}
+                        </Layout.Stack>
+                    </Table.Cell>
+                    <Table.Cell {root}>
+                        {#if platform.type.includes('web') || platform.type === 'web'}
+                            {platform.hostname || '—'}
+                        {:else}
+                            {platform.key || platform.hostname || '—'}
+                        {/if}
+                    </Table.Cell>
+                    <Table.Cell {root}>
+                        {#if platform.$updatedAt}
+                            <DualTimeView time={platform.$updatedAt} />
+                        {:else}
+                            never
+                        {/if}
+                    </Table.Cell>
+                </Table.Row.Link>
+            {/each}
+        </Table.Root>
+    </div>
 {:else}
     <Card.Base padding="none">
         <Empty
@@ -203,3 +205,19 @@
         </Empty>
     </Card.Base>
 {/if}
+
+<style lang="scss">
+    .table-scroll-wrapper {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        
+        :global([role='table']) {
+            display: grid;
+            grid-template-columns: minmax(calc(120px + var(--p-table-cell-padding-inline)), 1fr) 
+                                   minmax(calc(120px + var(--p-table-cell-padding-inline)), 1fr) 
+                                   minmax(calc(180px + var(--p-table-cell-padding-inline)), 2fr) 
+                                   minmax(calc(120px + var(--p-table-cell-padding-inline)), 1fr);
+            width: 100%;
+        }
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/+page.svelte
index 6c7ca6d64f..933ac0a6ae 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/+page.svelte
@@ -411,13 +411,15 @@
             <svelte:fragment slot="aside">
                 <Layout.Stack gap="s">
                     {#key extensions.length}
-                        <InputTags
-                            id="user-labels"
-                            label="Labels"
-                            placeholder="Select or type user labels"
-                            bind:tags={extensions} />
+                        <div style="min-width: 0; width: 100%;">
+                            <InputTags
+                                id="user-labels"
+                                label="Labels"
+                                placeholder="Select or type user labels"
+                                bind:tags={extensions} />
+                        </div>
                     {/key}
-                    <Layout.Stack direction="row">
+                    <Layout.Stack direction="row" style="flex-wrap: wrap; overflow-x: auto;">
                         {#each suggestedExtensions as ext}
                             <Tag
                                 size="s"
@@ -463,7 +465,8 @@
                 on:click={() => {
                     showDelete = true;
                     trackEvent(Click.StorageBucketDeleteClick);
-                }}>Delete</Button>
+                }}
+                >Delete</Button>
         </svelte:fragment>
     </CardGrid>
 </Container>

From 5ccfd08450a79eea8a111cec9c4671c6277eb604 Mon Sep 17 00:00:00 2001
From: AbhiVarde <abhivarde99@gmail.com>
Date: Tue, 25 Nov 2025 20:28:52 +0530
Subject: [PATCH 2/2] fix: apply review feedback

---
 .../messaging/providers/store.ts              |  10 +-
 .../messaging/providers/table.svelte          | 111 ++++++++----------
 .../overview/platforms/+page.svelte           |  88 ++++++--------
 .../overview/platforms/store.ts               |   9 ++
 .../bucket-[bucket]/settings/+page.svelte     |  17 ++-
 5 files changed, 104 insertions(+), 131 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/store.ts b/src/routes/(console)/project-[region]-[project]/messaging/providers/store.ts
index da9c513516..4e186ece43 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/store.ts
@@ -19,11 +19,11 @@ import {
 } from './components';
 
 export const columns = writable<Column[]>([
-    { id: '$id', title: 'Provider ID', type: 'string' },
-    { id: 'name', title: 'Name', type: 'string' },
-    { id: 'provider', title: 'Provider', type: 'string' },
-    { id: 'type', title: 'Type', type: 'string' },
-    { id: 'enabled', title: 'Status', type: 'boolean' }
+    { id: '$id', title: 'Provider ID', type: 'string', width: 200 },
+    { id: 'name', title: 'Name', type: 'string', width: { min: 120 } },
+    { id: 'provider', title: 'Provider', type: 'string', width: { min: 120 } },
+    { id: 'type', title: 'Type', type: 'string', width: { min: 120 } },
+    { id: 'enabled', title: 'Status', type: 'boolean', width: { min: 120 } }
 ]);
 
 export type ProviderInput = {
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/table.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/table.svelte
index 4706ee00dc..a54178b3db 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/table.svelte
@@ -39,68 +39,51 @@
     }
 </script>
 
-<div class="table-scroll-wrapper">
-    <MultiSelectionTable
-        resource="provider"
-        columns={$columns}
-        onDelete={handleDelete}
-        allowSelection={$canWriteProviders}>
-        {#snippet header(root)}
-            {#each $columns as { id, title }}
-                <Table.Header.Cell column={id} {root}>{title}</Table.Header.Cell>
-            {/each}
-        {/snippet}
+<MultiSelectionTable
+    resource="provider"
+    columns={$columns}
+    onDelete={handleDelete}
+    allowSelection={$canWriteProviders}>
+    {#snippet header(root)}
+        {#each $columns as { id, title }}
+            <Table.Header.Cell column={id} {root}>{title}</Table.Header.Cell>
+        {/each}
+    {/snippet}
 
-        {#snippet children(root)}
-            {@const TableRowComponent = $canWriteProviders ? Table.Row.Link : Table.Row.Base}
-            {#each data.providers.providers as provider (provider.$id)}
-                {@const href = $canWriteProviders
-                    ? `${base}/project-${page.params.region}-${page.params.project}/messaging/providers/provider-${provider.$id}`
-                    : undefined}
-                <TableRowComponent {href} {root} id={provider.$id}>
-                    {#each $columns as column}
-                        <Table.Cell column={column.id} {root}>
-                            {#if column.id === '$id'}
-                                {#key $columns}
-                                    <Id value={provider.$id}>{provider.$id}</Id>
-                                {/key}
-                            {:else if column.id === 'provider'}
-                                <Provider provider={provider.provider} />
-                            {:else if column.id === 'type'}
-                                <ProviderType type={provider.type} size="xs" />
-                            {:else if column.id === 'enabled'}
-                                <Badge
-                                    variant="secondary"
-                                    type={provider.enabled ? 'success' : undefined}
-                                    content={provider.enabled ? 'enabled' : 'disabled'}>
-                                    <svelte:fragment slot="start">
-                                        {#if provider.enabled}
-                                            <Icon icon={IconCheckCircle} size="s" />
-                                        {/if}
-                                    </svelte:fragment>
-                                </Badge>
-                            {:else}
-                                {provider[column.id]}
-                            {/if}
-                        </Table.Cell>
-                    {/each}
-                </TableRowComponent>
-            {/each}
-        {/snippet}
-    </MultiSelectionTable>
-</div>
-
-<style lang="scss">
-    .table-scroll-wrapper {
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-
-        :global([role='table']) {
-            display: grid;
-            grid-template-columns:
-                minmax(60px, 0.5fr) minmax(200px, 2.5fr) minmax(120px, 1fr) minmax(120px, 1fr)
-                minmax(120px, 1fr) minmax(120px, 1.5fr);
-            width: 100%;
-        }
-    }
-</style>
+    {#snippet children(root)}
+        {@const TableRowComponent = $canWriteProviders ? Table.Row.Link : Table.Row.Base}
+        {#each data.providers.providers as provider (provider.$id)}
+            {@const href = $canWriteProviders
+                ? `${base}/project-${page.params.region}-${page.params.project}/messaging/providers/provider-${provider.$id}`
+                : undefined}
+            <TableRowComponent {href} {root} id={provider.$id}>
+                {#each $columns as column}
+                    <Table.Cell column={column.id} {root}>
+                        {#if column.id === '$id'}
+                            {#key $columns}
+                                <Id value={provider.$id}>{provider.$id}</Id>
+                            {/key}
+                        {:else if column.id === 'provider'}
+                            <Provider provider={provider.provider} />
+                        {:else if column.id === 'type'}
+                            <ProviderType type={provider.type} size="xs" />
+                        {:else if column.id === 'enabled'}
+                            <Badge
+                                variant="secondary"
+                                type={provider.enabled ? 'success' : undefined}
+                                content={provider.enabled ? 'enabled' : 'disabled'}>
+                                <svelte:fragment slot="start">
+                                    {#if provider.enabled}
+                                        <Icon icon={IconCheckCircle} size="s" />
+                                    {/if}
+                                </svelte:fragment>
+                            </Badge>
+                        {:else}
+                            {provider[column.id]}
+                        {/if}
+                    </Table.Cell>
+                {/each}
+            </TableRowComponent>
+        {/each}
+    {/snippet}
+</MultiSelectionTable>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte
index bc06d5b50b..1e3095139b 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts" context="module">
+    import { columns } from './store';
     import { wizard } from '$lib/stores/wizard';
     import CreateAndroid from './createAndroid.svelte';
     import CreateApple from './createApple.svelte';
@@ -121,43 +122,42 @@
 </script>
 
 {#if data.platforms.platforms.length}
-    <div class="table-scroll-wrapper">
-        <Table.Root columns={4} let:root>
-            <svelte:fragment slot="header" let:root>
-                <Table.Header.Cell {root}>Name</Table.Header.Cell>
-                <Table.Header.Cell {root}>Platform type</Table.Header.Cell>
-                <Table.Header.Cell {root}>Identifier</Table.Header.Cell>
-                <Table.Header.Cell {root}>Last updated</Table.Header.Cell>
-            </svelte:fragment>
-            {#each data.platforms.platforms as platform}
-                <Table.Row.Link href={`${path}/${platform.$id}`} {root}>
-                    <Table.Cell {root}>
-                        {platform.name}
-                    </Table.Cell>
-                    <Table.Cell {root}>
-                        <Layout.Stack direction="row" gap="s" alignItems="center">
-                            <Icon icon={getPlatformInfo(platform.type)} />
-                            {PlatformTypes[platform.type]}
-                        </Layout.Stack>
-                    </Table.Cell>
-                    <Table.Cell {root}>
-                        {#if platform.type.includes('web') || platform.type === 'web'}
-                            {platform.hostname || '—'}
-                        {:else}
-                            {platform.key || platform.hostname || '—'}
-                        {/if}
-                    </Table.Cell>
-                    <Table.Cell {root}>
-                        {#if platform.$updatedAt}
-                            <DualTimeView time={platform.$updatedAt} />
-                        {:else}
-                            never
-                        {/if}
-                    </Table.Cell>
-                </Table.Row.Link>
+    <Table.Root columns={$columns} let:root>
+        <svelte:fragment slot="header" let:root>
+            {#each $columns as column}
+                <Table.Header.Cell {root} column={column.id}>
+                    {column.title}
+                </Table.Header.Cell>
             {/each}
-        </Table.Root>
-    </div>
+        </svelte:fragment>
+        {#each data.platforms.platforms as platform}
+            <Table.Row.Link href={`${path}/${platform.$id}`} {root}>
+                <Table.Cell {root}>
+                    {platform.name}
+                </Table.Cell>
+                <Table.Cell {root}>
+                    <Layout.Stack direction="row" gap="s" alignItems="center">
+                        <Icon icon={getPlatformInfo(platform.type)} />
+                        {PlatformTypes[platform.type]}
+                    </Layout.Stack>
+                </Table.Cell>
+                <Table.Cell {root}>
+                    {#if platform.type.includes('web') || platform.type === 'web'}
+                        {platform.hostname || '—'}
+                    {:else}
+                        {platform.key || platform.hostname || '—'}
+                    {/if}
+                </Table.Cell>
+                <Table.Cell {root}>
+                    {#if platform.$updatedAt}
+                        <DualTimeView time={platform.$updatedAt} />
+                    {:else}
+                        never
+                    {/if}
+                </Table.Cell>
+            </Table.Row.Link>
+        {/each}
+    </Table.Root>
 {:else}
     <Card.Base padding="none">
         <Empty
@@ -205,19 +205,3 @@
         </Empty>
     </Card.Base>
 {/if}
-
-<style lang="scss">
-    .table-scroll-wrapper {
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-        
-        :global([role='table']) {
-            display: grid;
-            grid-template-columns: minmax(calc(120px + var(--p-table-cell-padding-inline)), 1fr) 
-                                   minmax(calc(120px + var(--p-table-cell-padding-inline)), 1fr) 
-                                   minmax(calc(180px + var(--p-table-cell-padding-inline)), 2fr) 
-                                   minmax(calc(120px + var(--p-table-cell-padding-inline)), 1fr);
-            width: 100%;
-        }
-    }
-</style>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts b/src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts
index f5241c8064..bc031f73de 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts
@@ -1,5 +1,14 @@
 import type { ComponentType } from 'svelte';
 import { PlatformType } from '@appwrite.io/console';
+import { writable } from 'svelte/store';
+import type { Column } from '$lib/helpers/types';
+
+export const columns = writable<Column[]>([
+    { id: 'name', title: 'Name', type: 'string', width: { min: 120 } },
+    { id: 'type', title: 'Platform type', type: 'string', width: { min: 120 } },
+    { id: 'identifier', title: 'Identifier', type: 'string', width: { min: 120 } },
+    { id: '$updatedAt', title: 'Last updated', type: 'string', width: { min: 120 } }
+]);
 
 export type PlatformProps = {
     key?: string;
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/+page.svelte
index 933ac0a6ae..1ea7cc4d70 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/+page.svelte
@@ -411,15 +411,13 @@
             <svelte:fragment slot="aside">
                 <Layout.Stack gap="s">
                     {#key extensions.length}
-                        <div style="min-width: 0; width: 100%;">
-                            <InputTags
-                                id="user-labels"
-                                label="Labels"
-                                placeholder="Select or type user labels"
-                                bind:tags={extensions} />
-                        </div>
+                        <InputTags
+                            id="user-labels"
+                            label="Labels"
+                            placeholder="Select or type user labels"
+                            bind:tags={extensions} />
                     {/key}
-                    <Layout.Stack direction="row" style="flex-wrap: wrap; overflow-x: auto;">
+                    <Layout.Stack direction="row" wrap="wrap">
                         {#each suggestedExtensions as ext}
                             <Tag
                                 size="s"
@@ -465,8 +463,7 @@
                 on:click={() => {
                     showDelete = true;
                     trackEvent(Click.StorageBucketDeleteClick);
-                }}
-                >Delete</Button>
+                }}>Delete</Button>
         </svelte:fragment>
     </CardGrid>
 </Container>