diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte index 02f089b340..6a417d33d6 100644 --- a/packages/bbui/src/Layout/Page.svelte +++ b/packages/bbui/src/Layout/Page.svelte @@ -42,6 +42,7 @@ justify-content: flex-start; align-items: stretch; flex: 1 1 auto; + overflow-x: hidden; } .main { overflow: auto; diff --git a/packages/builder/src/components/common/AppLockModal.svelte b/packages/builder/src/components/common/AppLockModal.svelte index 74e1b12615..5e52ab269c 100644 --- a/packages/builder/src/components/common/AppLockModal.svelte +++ b/packages/builder/src/components/common/AppLockModal.svelte @@ -63,7 +63,8 @@ name="LockClosed" hoverable size={buttonSize} - on:click={() => { + on:click={e => { + e.stopPropagation() appLockModal.show() }} /> diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte index a1a9cf69f7..6400891e15 100644 --- a/packages/builder/src/components/start/AppRow.svelte +++ b/packages/builder/src/components/start/AppRow.svelte @@ -8,41 +8,39 @@ export let appOverview -
-
-
-
- -
-
editApp(app)}> - - {app.name} - -
+
editApp(app)}> +
+
+
+
+ + {app.name} + +
+
-
- {#if app.updatedAt} - {processStringSync("Updated {{ duration time 'millisecond' }} ago", { - time: new Date().getTime() - new Date(app.updatedAt).getTime(), - })} - {:else} - Never updated - {/if} -
+
+ {#if app.updatedAt} + {processStringSync("Updated {{ duration time 'millisecond' }} ago", { + time: new Date().getTime() - new Date(app.updatedAt).getTime(), + })} + {:else} + Never updated + {/if}
- {`${window.origin}/app${app.url}`} + {app.deployed ? "Published" : "Unpublished"}
+ + - -
@@ -64,24 +58,26 @@ background: var(--background); padding: 24px 32px; border-radius: 8px; - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: stretch; - gap: var(--spacing-m); - } - - .header { - display: flex; - flex-direction: row; - justify-content: space-between; + display: grid; + grid-template-columns: 35% 25% 15% auto; align-items: center; + gap: var(--spacing-m); + transition: border 130ms ease-out; + border: 1px solid transparent; + } + .app-row:hover { + cursor: pointer; + border-color: var(--spectrum-global-color-gray-300); } .updated { color: var(--spectrum-global-color-gray-700); } + .title, + .name { + flex: 1 1 auto; + } .title, .app-status { display: flex; @@ -106,9 +102,8 @@ gap: var(--spacing-m); display: flex; flex-direction: row; - justify-content: flex-start; + justify-content: flex-end; align-items: center; - margin-top: var(--spacing-m); } .name { @@ -120,11 +115,6 @@ white-space: nowrap; text-overflow: ellipsis; } - .title :global(h1:hover) { - color: var(--spectrum-global-color-blue-600); - cursor: pointer; - transition: color 130ms ease; - } @media (max-width: 640px) { .desktop { diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte index ad8330f52f..56028117c9 100644 --- a/packages/builder/src/pages/builder/portal/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/_layout.svelte @@ -134,12 +134,6 @@
- {#if $adminStore.cloud && $auth?.user?.accountPortalAccess}
-
+
{#each filteredApps as app (app.appId)} {/each} @@ -369,19 +367,14 @@ gap: var(--spacing-xl); } - .appTable { + .app-table { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; - gap: 24px; + gap: var(--spacing-xl); } - @media (max-width: 640px) { - .appTable { - grid-template-columns: 1fr auto !important; - } - } .empty-wrapper { flex: 1 1 auto; height: 100%;