From 9781deb91c0731b36c93f80ddd50d38d8fe06e5e Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Fri, 27 Mar 2026 12:57:42 +0530
Subject: [PATCH] fix: mobile view

---
 .../variables/environmentVariables.svelte     | 10 +++---
 .../updateVariables.svelte                    | 31 ++++++++++++++-----
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/variables/environmentVariables.svelte b/src/lib/components/variables/environmentVariables.svelte
index 0e6cb6ec9..98290c041 100644
--- a/src/lib/components/variables/environmentVariables.svelte
+++ b/src/lib/components/variables/environmentVariables.svelte
@@ -66,8 +66,8 @@
     const tableColumns = $derived(
         $isSmallViewport
             ? [
-                  { id: 'key', width: { min: 360 } },
-                  { id: 'value', width: { min: 220 } },
+                  { id: 'key', width: { min: 420 } },
+                  { id: 'value', width: { min: 240 } },
                   { id: 'actions', width: 40 }
               ]
             : [
@@ -82,8 +82,8 @@
     <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" gap="s" wrap="wrap">
-                <Layout.Stack direction="row" gap="s" wrap="wrap">
+            <Layout.Stack direction="row" gap="s">
+                <Layout.Stack direction="row" gap="s">
                     <Button
                         secondary
                         size="s"
@@ -146,7 +146,7 @@
             {:else if variables?.length}
                 <Paginator items={variables} limit={6} hideFooter={variables.length <= 6}>
                     {#snippet children(paginatedItems)}
-                        <Table.Root let:root columns={tableColumns}>
+                        <Table.Root class="responsive-table" let:root columns={tableColumns}>
                             <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>
diff --git a/src/routes/(console)/project-[region]-[project]/updateVariables.svelte b/src/routes/(console)/project-[region]-[project]/updateVariables.svelte
index 12143befa..a2052f86a 100644
--- a/src/routes/(console)/project-[region]-[project]/updateVariables.svelte
+++ b/src/routes/(console)/project-[region]-[project]/updateVariables.svelte
@@ -270,12 +270,12 @@
 
     $: variableColumns = $isSmallViewport
         ? [
-              { id: 'key', width: { min: 320, max: 480 } },
-              { id: 'value', width: { min: 180, max: 320 } },
+              { id: 'key', width: { min: 380, max: 520 } },
+              { id: 'value', width: { min: 200, max: 320 } },
               { id: 'actions', width: 50 }
           ]
         : [
-              { id: 'key', width: { min: 200, max: 400 } },
+              { id: 'key', width: { min: 280, max: 420 } },
               { id: 'value', width: { min: 200, max: 400 } },
               { id: 'actions', width: 50 }
           ];
@@ -301,8 +301,8 @@
     {/if}
     <svelte:fragment slot="aside">
         <Layout.Stack gap="l">
-            <Layout.Stack direction="row" gap="s" wrap="wrap">
-                <Layout.Stack direction="row" gap="s" wrap="wrap">
+            <Layout.Stack direction="row" gap="s" wrap={$isSmallViewport ? 'wrap' : 'nowrap'}>
+                <Layout.Stack direction="row" gap="s" wrap={$isSmallViewport ? 'wrap' : 'nowrap'}>
                     <Button
                         secondary
                         on:mousedown={() => {
@@ -358,7 +358,7 @@
                         </p>
                     </Alert.Inline>
                 {/if}
-                <Table.Root columns={variableColumns} let:root>
+                <Table.Root class="responsive-table" 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>
@@ -373,7 +373,11 @@
                                       ) !== undefined
                                     : false}
 
-                                <Layout.Stack gap="xxs" alignItems="center" direction="row">
+                                <Layout.Stack
+                                    gap="xxs"
+                                    alignItems="center"
+                                    direction="row"
+                                    class="variable-key-cell">
                                     {#if isConflicting && hasConflictOnPage}
                                         <span
                                             class="icon-exclamation u-color-text-warning"
@@ -533,3 +537,16 @@
         <p>Are you sure you want to delete this variable? This action is irreversible.</p>
     </Confirm>
 {/if}
+
+<style>
+    :global(.variable-key-cell) {
+        min-width: 0;
+    }
+
+    :global(.variable-key-cell > :last-child) {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+</style>