From b3fa4e61e32142fd5af8b492e4d269f4a334762b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 14 Sep 2021 16:21:30 +0100
Subject: [PATCH] Make apps table in portal mobile friendly

---
 packages/builder/src/components/start/AppRow.svelte  | 12 +++++++++---
 .../src/pages/builder/portal/apps/index.svelte       |  6 ++++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte
index e953027192..a80722733e 100644
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@@ -28,7 +28,7 @@
     </Heading>
   </div>
 </div>
-<div>
+<div class="desktop">
   {#if app.updatedAt}
     {processStringSync("Updated {{ duration time 'millisecond' }} ago", {
       time: new Date().getTime() - new Date(app.updatedAt).getTime(),
@@ -37,7 +37,7 @@
     Never updated
   {/if}
 </div>
-<div>
+<div class="desktop">
   <StatusLight
     positive={!app.lockedYou && !app.lockedOther}
     notice={app.lockedYou}
@@ -52,7 +52,7 @@
     {/if}
   </StatusLight>
 </div>
-<div>
+<div class="desktop">
   <StatusLight active={app.deployed} neutral={!app.deployed}>
     {#if app.deployed}Published{:else}Unpublished{/if}
   </StatusLight>
@@ -109,4 +109,10 @@
     cursor: pointer;
     transition: color 130ms ease;
   }
+
+  @media (max-width: 640px) {
+    .desktop {
+      display: none !important;
+    }
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index d8e28c0b3f..5c2ff5cc73 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -347,4 +347,10 @@
     justify-content: center;
     align-items: center;
   }
+
+  @media (max-width: 640px) {
+    .appTable {
+      grid-template-columns: 1fr auto;
+    }
+  }
 </style>