Handle long app names correctly in app grid view

packages/bbui/src/Layout/Layout.svelte

@@ -5,9 +5,11 @@
   export let noPadding = false
   export let gap = "M"
   export let noGap = false
+  export let alignContent = "normal"
 </script>
 
 <div
+  style="align-content:{alignContent};"
   class:horizontal
   class="container paddingX-{!noPadding && paddingX} paddingY-{!noPadding &&
     paddingY} gap-{!noGap && gap}"

packages/builder/src/components/start/AppCard.svelte

@@ -17,7 +17,8 @@
   let appExportLoading = false
 </script>
 
-<Layout noPadding gap="XS">
+<div class="wrapper">
+  <Layout noPadding gap="XS" alignContent="start">
     <div class="preview" use:gradient />
     <div class="title">
       <Link href={$url(`../../app/${app._id}`)}>
@@ -25,9 +26,10 @@
           {app.name}
         </Heading>
       </Link>
-    <ActionMenu>
+      <ActionMenu align="right">
         <Icon slot="control" name="More" hoverable />
-      <MenuItem on:click={() => exportApp(app)} icon="Download">Export</MenuItem
+        <MenuItem on:click={() => exportApp(app)} icon="Download"
+          >Export</MenuItem
         >
       </ActionMenu>
     </div>
@@ -40,8 +42,12 @@
       {/if}
     </div>
   </Layout>
+</div>
 
 <style>
+  .wrapper {
+    overflow: hidden;
+  }
   .preview {
     height: 135px;
     border-radius: var(--border-radius-s);
@@ -58,6 +64,15 @@
 
   .title :global(a) {
     text-decoration: none;
+    flex: 1 1 auto;
+    width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-right: var(--spacing-m);
+  }
+  .title :global(h1) {
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   .title :global(h1:hover) {
     color: var(--spectrum-global-color-blue-600);