From fa128aef6eebd68316d442e375420fa1117d1867 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Wed, 5 Nov 2025 13:48:23 +0530
Subject: [PATCH] make it mobile responsive

---
 .../components/permissions/permissions.svelte    | 16 +++-------------
 src/lib/components/permissions/row.svelte        |  5 ++++-
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/permissions/permissions.svelte b/src/lib/components/permissions/permissions.svelte
index a96094231..9fb392d4d 100644
--- a/src/lib/components/permissions/permissions.svelte
+++ b/src/lib/components/permissions/permissions.svelte
@@ -20,6 +20,7 @@
     import { IconPlus, IconX } from '@appwrite.io/pink-icons-svelte';
     import type { PinkColumn } from '$lib/helpers/types';
     import { Card } from '$lib/components';
+    import TableScroll from '$lib/elements/table/tableScroll.svelte';
 
     export let withCreate = false;
     export let permissions: string[] = [];
@@ -124,7 +125,7 @@
 </script>
 
 {#if [...$groups]?.length}
-    <div class="table-wrapper">
+    <TableScroll>
         <Table.Root {columns} let:root>
             <svelte:fragment slot="header" let:root>
                 <Table.Header.Cell column="role" {root}>Role</Table.Header.Cell>
@@ -174,7 +175,7 @@
                 </Table.Row.Base>
             {/each}
         </Table.Root>
-    </div>
+    </TableScroll>
 
     <div>
         <Actions
@@ -210,14 +211,3 @@
         </Layout.Stack>
     </Card>
 {/if}
-
-<style lang="scss">
-    .table-wrapper {
-        scrollbar-width: none;
-        -ms-overflow-style: none;
-
-        &::-webkit-scrollbar {
-            display: none;
-        }
-    }
-</style>
diff --git a/src/lib/components/permissions/row.svelte b/src/lib/components/permissions/row.svelte
index 39467b17b..b0dad2478 100644
--- a/src/lib/components/permissions/row.svelte
+++ b/src/lib/components/permissions/row.svelte
@@ -300,7 +300,10 @@
                                                 size="xs"
                                                 variant="m-400"
                                                 color="--fgcolor-neutral-secondary">
-                                                    Email: {formatName(data.email, $isSmallViewport ? 24 : 32)}
+                                                Email: {formatName(
+                                                    data.email,
+                                                    $isSmallViewport ? 24 : 32
+                                                )}
                                             </Typography.Text>
                                         {/if}
                                         {#if data.phone}