Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: mobile view

Browse Source
This commit is contained in:
Harsh Mahajan
2026-03-27 12:57:42 +05:30
parent 141121f3f1
commit 9781deb91c
2 changed files with 29 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/variables/environmentVariables.svelte
+5 -5
View File
@@ -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>
src/routes/(console)/project-[region]-[project]/updateVariables.svelte
+24 -7
View File
@@ -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>