From 4947a84f19cb9dfb69c49ee8983405f6e243dba1 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 2 Jun 2025 13:40:21 +0200
Subject: [PATCH] Fix responsiveness

---
 src/lib/components/git/repositories.svelte | 34 +++++++++++-----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/git/repositories.svelte b/src/lib/components/git/repositories.svelte
index a9b94904f..1688d5f87 100644
--- a/src/lib/components/git/repositories.svelte
+++ b/src/lib/components/git/repositories.svelte
@@ -5,6 +5,7 @@
     import { sdk } from '$lib/stores/sdk';
     import { repositories } from '$routes/(console)/project-[region]-[project]/functions/function-[function]/store';
     import { installation, installations, repository } from '$lib/stores/vcs';
+    import { isSmallViewport } from '$lib/stores/viewport';
     import {
         Layout,
         Table,
@@ -137,7 +138,7 @@
                     <InputSearch placeholder="Search repositories" disabled />
                 </Layout.Stack>
             {:then installations}
-                <Layout.Stack direction="row">
+                <Layout.Stack direction={$isSmallViewport ? 'column' : 'row'}>
                     <InputSelect
                         id="installation"
                         options={[
@@ -237,7 +238,8 @@
                                                     <Layout.Stack
                                                         gap="s"
                                                         direction="row"
-                                                        alignItems="center">
+                                                        alignItems="center"
+                                                        justifyContent="space-between">
                                                         <Typography.Text
                                                             truncate
                                                             color="--fgcolor-neutral-secondary">
@@ -249,27 +251,25 @@
                                                                 icon={IconLockClosed}
                                                                 color="--fgcolor-neutral-tertiary" />
                                                         {/if}
-                                                        <time datetime={repo.pushedAt}>
-                                                            <Typography.Caption
-                                                                variant="400"
-                                                                truncate
-                                                                color="--fgcolor-neutral-tertiary">
-                                                                {timeFromNow(repo.pushedAt)}
-                                                            </Typography.Caption>
-                                                        </time>
-                                                    </Layout.Stack>
-                                                    {#if action === 'button'}
-                                                        <Layout.Stack
-                                                            direction="row"
-                                                            justifyContent="flex-end">
+                                                        {#if !$isSmallViewport}
+                                                            <time datetime={repo.pushedAt}>
+                                                                <Typography.Caption
+                                                                    variant="400"
+                                                                    truncate
+                                                                    color="--fgcolor-neutral-tertiary">
+                                                                    {timeFromNow(repo.pushedAt)}
+                                                                </Typography.Caption>
+                                                            </time>
+                                                        {/if}
+                                                        {#if action === 'button'}
                                                             <PinkButton.Button
                                                                 size="xs"
                                                                 variant="secondary"
                                                                 on:click={() => connect(repo)}>
                                                                 Connect
                                                             </PinkButton.Button>
-                                                        </Layout.Stack>
-                                                    {/if}
+                                                        {/if}
+                                                    </Layout.Stack>
                                                 </Layout.Stack>
                                             </Table.Cell>
                                         </Table.Row.Base>