Merge pull request #7925 from Budibase/fix/app-row-name-ellipsis-and-layout

Minor fix to truncate app names and a general layout fix for smaller resolutions.

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;

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 {