From 42fdc279085e55fc3f2149952e7af269ad640cac Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 23 Sep 2022 10:40:55 +0100
Subject: [PATCH] Minor fix to ensure the app name neatly truncates and a
 general layout fix for apps in smaller resolutions

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

diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte
index 91920073bb..eee8aa19b2 100644
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <div class="title" data-cy={`${app.devId}`}>
-  <div style="display: flex;">
+  <div>
     <div class="app-icon" style="color: {app.icon?.color || ''}">
       <Icon size="XL" name={app.icon?.name || "Apps"} />
     </div>
@@ -61,6 +61,11 @@
 </div>
 
 <style>
+  div.title,
+  div.title > div {
+    display: flex;
+    max-width: 100%;
+  }
   .app-row-actions {
     grid-gap: var(--spacing-s);
     display: flex;
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index 019ec67cd7..f4bacb1280 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -478,9 +478,10 @@
   .appTable :global(> div) {
     border-bottom: var(--border-light);
   }
+
   @media (max-width: 640px) {
     .appTable {
-      grid-template-columns: 1fr auto;
+      grid-template-columns: 1fr auto !important;
     }
   }
   .empty-wrapper {