fixed table in mobile view

Author: HarshMN2345

src/lib/components/variables/environmentVariables.svelte

@@ -31,6 +31,7 @@
     import DeleteVariableModal from './deleteVariableModal.svelte';
     import UpdateVariableModal from './updateVariableModal.svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
+    import { isSmallViewport } from '$lib/stores/viewport';
 
     const DOCS_LINKS: Record<ProductLabel, string> = {
         site: 'https://appwrite.io/docs/products/sites/develop#accessing-environment-variables',
@@ -62,19 +63,27 @@
     const createSource = $derived(analyticsCreateSource || analyticsSource);
     const docsLink = $derived(DOCS_LINKS[productLabel]);
 
-    const tableColumns = [
-        { id: 'key', width: { min: 300 } },
-        { id: 'value', width: { min: 280 } },
-        { id: 'actions', width: 40 }
-    ];
+    const tableColumns = $derived(
+        $isSmallViewport
+            ? [
+                  { id: 'key', width: { min: 360 } },
+                  { id: 'value', width: { min: 220 } },
+                  { id: 'actions', width: 40 }
+              ]
+            : [
+                  { id: 'key', width: { min: 300 } },
+                  { id: 'value', width: { min: 280 } },
+                  { id: 'actions', width: 40 }
+              ]
+    );
 </script>
 
 <Accordion title="Environment variables" badge="Optional" hideDivider>
     <Layout.Stack gap="xl">
         Set up environment variables to securely manage keys and settings for your project.
         <Layout.Stack gap="l">
-            <Layout.Stack direction="row">
-                <Layout.Stack direction="row" gap="s">
+            <Layout.Stack direction="row" gap="s" wrap="wrap">
+                <Layout.Stack direction="row" gap="s" wrap="wrap">
                     <Button
                         secondary
                         size="s"

src/routes/(console)/project-[region]-[project]/updateVariables.svelte

@@ -39,6 +39,7 @@
     import SecretVariableModal from './secretVariableModal.svelte';
     import { Confirm } from '$lib/components';
     import { resolveRoute, withPath } from '$lib/stores/navigation';
+    import { isSmallViewport } from '$lib/stores/viewport';
 
     export let project: Models.Project;
     export let variableList: Models.VariableList;
@@ -266,6 +267,18 @@
               });
           })
         : false;
+
+    $: variableColumns = $isSmallViewport
+        ? [
+              { id: 'key', width: { min: 320, max: 480 } },
+              { id: 'value', width: { min: 180, max: 320 } },
+              { id: 'actions', width: 50 }
+          ]
+        : [
+              { id: 'key', width: { min: 200, max: 400 } },
+              { id: 'value', width: { min: 200, max: 400 } },
+              { id: 'actions', width: 50 }
+          ];
 </script>
 
 <CardGrid>
@@ -288,8 +301,8 @@
     {/if}
     <svelte:fragment slot="aside">
         <Layout.Stack gap="l">
-            <Layout.Stack direction="row">
-                <Layout.Stack direction="row" gap="s">
+            <Layout.Stack direction="row" gap="s" wrap="wrap">
+                <Layout.Stack direction="row" gap="s" wrap="wrap">
                     <Button
                         secondary
                         on:mousedown={() => {
@@ -345,13 +358,7 @@
                         </p>
                     </Alert.Inline>
                 {/if}
-                <Table.Root
-                    columns={[
-                        { id: 'key', width: { min: 200, max: 400 } },
-                        { id: 'value', width: { min: 200, max: 400 } },
-                        { id: 'actions', width: 50 }
-                    ]}
-                    let:root>
+                <Table.Root columns={variableColumns} let:root>
                     <svelte:fragment slot="header" let:root>
                         <Table.Header.Cell column="key" {root}>Key</Table.Header.Cell>
                         <Table.Header.Cell column="value" {root}>Value</Table.Header.Cell>