From bc56e7d4e1ea82d39b3b97314b706196d413f0ae Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Thu, 1 Aug 2024 14:15:30 +0530
Subject: [PATCH] update: stack content vertically on mobile.

---
 .../deployment-[deployment]/+page.svelte        | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
index 8d33c939e..334283d77 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
@@ -64,7 +64,7 @@
         <svelte:fragment slot="aside">
             {@const status = $deployment.status}
             {@const fileSize = humanFileSize($deployment.size)}
-            <div class="u-flex u-main-space-between">
+            <div class="u-flex u-main-space-between deployment-info">
                 <div class="u-grid-equal-row-size u-gap-4 u-line-height-1">
                     <p>
                         <b>Build time:</b>
@@ -98,7 +98,7 @@
                         </p>
                     {/if}
                 </div>
-                <div class="u-flex u-flex-vertical u-cross-end">
+                <div class="u-flex u-flex-vertical u-cross-end deployment-status">
                     <Pill
                         danger={status === 'failed'}
                         warning={status === 'building'}
@@ -141,3 +141,16 @@
         </div>
     </Card>
 </Container>
+
+<style>
+    @media (max-width: 768px) {
+        .deployment-info, .code-panel-header {
+            flex-direction: column;
+        }
+
+        .deployment-status {
+            padding-block-start: 1.5rem;
+            align-items: start !important;
+        }
+    }
+</style>
\ No newline at end of file