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] 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 a54178b3d..4706ee00d 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 49376776f..bc06d5b50 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 6c7ca6d64..933ac0a6a 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>