Code review updates

packages/bbui/src/Layout/Layout.svelte

@@ -40,6 +40,10 @@
     padding-left: var(--spacing-xl);
     padding-right: var(--spacing-xl);
   }
+  .paddingX-XXL {
+    padding-left: calc(var(--spacing-xl) * 2);
+    padding-right: calc(var(--spacing-xl) * 2);
+  }
   .paddingY-S {
     padding-top: var(--spacing-s);
     padding-bottom: var(--spacing-s);
@@ -56,6 +60,10 @@
     padding-top: var(--spacing-xl);
     padding-bottom: var(--spacing-xl);
   }
+  .paddingY-XXL {
+    padding-top: calc(var(--spacing-xl) * 2);
+    padding-bottom: calc(var(--spacing-xl) * 2);
+  }
   .gap-XXS {
     grid-gap: var(--spacing-xs);
   }

packages/bbui/src/Layout/Page.svelte

@@ -1,9 +1,10 @@
 <script>
   export let wide = false
   export let maxWidth = "80ch"
+  export let noPadding = false
 </script>
 
-<div style="--max-width: {maxWidth}" class:wide>
+<div style="--max-width: {maxWidth}" class:wide class:noPadding>
   <slot />
 </div>
 
@@ -23,4 +24,9 @@
     max-width: none;
     margin: 0;
   }
+
+  .noPadding {
+    padding: 0px;
+    margin: 0px;
+  }
 </style>

packages/builder/src/components/common/AppLockModal.svelte

@@ -28,8 +28,6 @@
   $: lockedByHeading =
     lockedBy && lockedByYou ? "Locked by you" : `Locked by ${lockIdentifer}`
 
-  $: lockExpiry = getExpiryDuration(app)
-
   const getExpiryDuration = app => {
     if (!app?.lockedBy?.lockedAt) {
       return -1
@@ -86,12 +84,12 @@
       between your team.
     </p>
 
-    {#if lockedByYou && lockExpiry > 0}
+    {#if lockedByYou && getExpiryDuration(app) > 0}
       <span class="lock-expiry-body">
         {processStringSync(
           "This lock will expire in {{ duration time 'millisecond' }} from now",
           {
-            time: lockExpiry,
+            time: getExpiryDuration(app),
           }
         )}
       </span>

packages/builder/src/components/common/DashCard.svelte

@@ -10,20 +10,13 @@
 </script>
 
 <div class="dash-card" data-cy={dataCy}>
-  <div
-    class={actionDefined ? "dash-card-header active" : "dash-card-header"}
-    on:click={() => {
-      if (actionDefined) {
-        action()
-      }
-    }}
-  >
+  <div class="dash-card-header" class:active={actionDefined} on:click={action}>
     <span class="dash-card-title">
       <Detail size="M">{title}</Detail>
     </span>
     <span class="dash-card-action">
       {#if actionDefined}
-        <Icon name={actionIcon ? actionIcon : "ChevronRight"} />
+        <Icon name={actionIcon || "ChevronRight"} />
       {/if}
     </span>
   </div>
@@ -36,7 +29,6 @@
   .dash-card {
     background: var(--spectrum-alias-background-color-primary);
     border-radius: var(--border-radius-s);
-    border: 1px solid var(--spectrum-global-color-gray-300);
     overflow: hidden;
     min-height: 150px;
   }

packages/builder/src/pages/builder/portal/_layout.svelte

@@ -321,7 +321,7 @@
 
     .mobile-toggle,
     .user-dropdown {
-      flex: 1 1 0;
+      flex: 0 1 0;
     }
 
     /* Reduce BBUI page padding */

packages/builder/src/pages/builder/portal/apps/index.svelte

@@ -10,7 +10,6 @@
     notifications,
     Body,
     Search,
-    Divider,
     Helpers,
   } from "@budibase/bbui"
   import TemplateDisplay from "components/common/TemplateDisplay.svelte"
@@ -66,6 +65,9 @@
     app?.name?.toLowerCase().includes(searchTerm.toLowerCase())
   )
 
+  $: lockedApps = filteredApps.filter(app => app?.lockedYou || app?.lockedOther)
+  $: unlocked = lockedApps?.length == 0
+
   const enrichApps = (apps, user, sortBy) => {
     const enrichedApps = apps.map(app => ({
       ...app,
@@ -178,10 +180,6 @@
     }
   }
 
-  const previewApp = app => {
-    window.open(`/${app.devId}`)
-  }
-
   const appOverview = app => {
     $goto(`../overview/${app.devId}`)
   }
@@ -348,7 +346,7 @@
       {/if}
 
       {#if enrichedApps.length}
-        <Layout noPadding gap="S">
+        <Layout noPadding gap="L">
           <div class="title">
             <div class="buttons">
               <Button
@@ -414,8 +412,8 @@
               </div>
             {/if}
           </div>
-          <Divider size="S" />
-          <div class="appTable">
+
+          <div class="appTable" class:unlocked>
             {#each filteredApps as app (app.appId)}
               <AppRow
                 {copyAppId}
@@ -428,7 +426,6 @@
                 {exportApp}
                 {deleteApp}
                 {updateApp}
-                {previewApp}
                 {appOverview}
               />
             {/each}
@@ -490,6 +487,9 @@
 <ChooseIconModal app={selectedApp} bind:this={iconModal} />
 
 <style>
+  .appTable {
+    border-top: var(--border-light);
+  }
   .app-actions {
     display: flex;
   }
@@ -533,6 +533,11 @@
     grid-template-columns: 1fr 1fr 1fr 1fr auto;
     align-items: center;
   }
+
+  .appTable.unlocked {
+    grid-template-columns: 1fr 1fr auto 1fr auto;
+  }
+
   .appTable :global(> div) {
     height: 70px;
     display: grid;

packages/builder/src/pages/builder/portal/apps/templates.svelte

@@ -1,6 +1,6 @@
 <script>
   import { goto } from "@roxi/routify"
-  import { Layout, Page, notifications, Button } from "@budibase/bbui"
+  import { Layout, Page, notifications, ActionButton } from "@budibase/bbui"
   import TemplateDisplay from "components/common/TemplateDisplay.svelte"
   import { onMount } from "svelte"
   import { templates } from "stores/portal"
@@ -25,16 +25,15 @@
 <Page wide>
   <Layout noPadding gap="XL">
     <span>
-      <Button
-        quiet
+      <ActionButton
         secondary
-        icon={"ChevronLeft"}
+        icon={"ArrowLeft"}
         on:click={() => {
           $goto("../")
         }}
       >
         Back
-      </Button>
+      </ActionButton>
     </span>
     {#if loaded && $templates?.length}
       <TemplateDisplay templates={$templates} />

packages/builder/src/pages/builder/portal/overview/[application]/index.svelte

@@ -4,12 +4,18 @@
     Layout,
     Page,
     Button,
+    ActionButton,
     ButtonGroup,
     Heading,
     Tab,
     Tabs,
     notifications,
     ProgressCircle,
+    Input,
+    ActionMenu,
+    MenuItem,
+    Icon,
+    Helpers,
   } from "@budibase/bbui"
   import OverviewTab from "../_components/OverviewTab.svelte"
   import SettingsTab from "../_components/SettingsTab.svelte"
@@ -20,12 +26,17 @@
   import { AppStatus } from "constants"
   import AppLockModal from "components/common/AppLockModal.svelte"
   import EditableIcon from "components/common/EditableIcon.svelte"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { checkIncomingDeploymentStatus } from "components/deploy/utils"
   import { onDestroy, onMount } from "svelte"
 
   export let application
 
   let promise = getPackage()
+  let loaded = false
+  let deletionModal
+  let unpublishModal
+  let appName = ""
 
   // App
   $: filteredApps = $apps.filter(app => app.devId === application)
@@ -74,6 +85,7 @@
     try {
       const pkg = await API.fetchAppPackage(application)
       await store.actions.initialise(pkg)
+      loaded = true
       return pkg
     } catch (error) {
       notifications.error(`Error initialising app: ${error?.message}`)
@@ -121,6 +133,58 @@
     $goto(`../../../app/${app.devId}`)
   }
 
+  const copyAppId = async app => {
+    await Helpers.copyToClipboard(app.prodId)
+    notifications.success("App ID copied to clipboard.")
+  }
+
+  const exportApp = app => {
+    const id = isPublished ? app.prodId : app.devId
+    const appName = encodeURIComponent(app.name)
+    window.location = `/api/backups/export?appId=${id}&appname=${appName}`
+  }
+
+  const unpublishApp = app => {
+    selectedApp = app
+    unpublishModal.show()
+  }
+
+  const confirmUnpublishApp = async () => {
+    if (!selectedApp) {
+      return
+    }
+    try {
+      analytics.captureEvent(Events.APP.UNPUBLISHED, {
+        appId: selectedApp.appId,
+      })
+      await API.unpublishApp(selectedApp.prodId)
+      await apps.load()
+      notifications.success("App unpublished successfully")
+    } catch (err) {
+      notifications.error("Error unpublishing app")
+    }
+  }
+
+  const deleteApp = app => {
+    selectedApp = app
+    deletionModal.show()
+  }
+
+  const confirmDeleteApp = async () => {
+    if (!selectedApp) {
+      return
+    }
+    try {
+      await API.deleteApp(selectedApp?.devId)
+      backToAppList()
+      notifications.success("App deleted successfully")
+    } catch (err) {
+      notifications.error("Error deleting app")
+    }
+    selectedApp = null
+    appName = null
+  }
+
   onDestroy(() => {
     store.actions.reset()
   })
@@ -130,6 +194,7 @@
       if (!apps.length) {
         await apps.load()
       }
+      await API.syncApp(application)
       deployments = await fetchDeployments()
     } catch (error) {
       notifications.error("Error initialising app overview")
@@ -137,95 +202,155 @@
   })
 </script>
 
-<Page wide>
-  <Layout noPadding gap="XL">
-    <span>
-      <Button quiet secondary icon={"ChevronLeft"} on:click={backToAppList}>
-        Back
-      </Button>
-    </span>
+<span class="overview-wrap">
+  <Page wide noPadding>
     {#await promise}
+      <span class="page-header">
+        <ActionButton secondary icon={"ArrowLeft"} on:click={backToAppList}>
+          Back
+        </ActionButton>
+      </span>
       <div class="loading">
         <ProgressCircle size="XL" />
       </div>
     {:then _}
-      <div class="overview-header">
-        <div class="app-title">
-          <div class="app-logo">
-            <div
-              class="app-icon"
-              style="color: {selectedApp?.icon?.color || ''}"
-            >
-              <EditableIcon
-                app={selectedApp}
-                size="XL"
-                name={selectedApp?.icon?.name || "Apps"}
-              />
+      <Layout paddingX="XXL" paddingY="XXL" gap="XL">
+        <span class="page-header" class:loaded>
+          <ActionButton secondary icon={"ArrowLeft"} on:click={backToAppList}>
+            Back
+          </ActionButton>
+        </span>
+        <div class="overview-header">
+          <div class="app-title">
+            <div class="app-logo">
+              <div
+                class="app-icon"
+                style="color: {selectedApp?.icon?.color || ''}"
+              >
+                <EditableIcon
+                  app={selectedApp}
+                  size="XL"
+                  name={selectedApp?.icon?.name || "Apps"}
+                />
+              </div>
+            </div>
+            <div class="app-details">
+              <Heading size="M">{selectedApp?.name}</Heading>
+              <div class="app-url">{appUrl}</div>
             </div>
           </div>
-          <div class="app-details">
-            <Heading size="M">{selectedApp?.name}</Heading>
-            <div class="app-url">{appUrl}</div>
+          <div class="header-right">
+            <AppLockModal app={selectedApp} />
+            <ButtonGroup gap="XS">
+              <Button
+                size="M"
+                quiet
+                secondary
+                icon="Globe"
+                disabled={!isPublished}
+                on:click={viewApp}
+                dataCy="view-app"
+              >
+                View app
+              </Button>
+              <Button
+                size="M"
+                cta
+                icon="Edit"
+                disabled={lockedBy && !lockedByYou}
+                on:click={() => {
+                  editApp(selectedApp)
+                }}
+              >
+                <span>Edit</span>
+              </Button>
+            </ButtonGroup>
+            <ActionMenu align="right" dataCy="app-overview-menu-popover">
+              <span slot="control" class="app-overview-actions-icon">
+                <Icon hoverable name="More" />
+              </span>
+              <MenuItem on:click={() => exportApp(selectedApp)} icon="Download">
+                Export
+              </MenuItem>
+              {#if isPublished}
+                <MenuItem
+                  on:click={() => unpublishApp(selectedApp)}
+                  icon="GlobeRemove"
+                >
+                  Unpublish
+                </MenuItem>
+                <MenuItem on:click={() => copyAppId(selectedApp)} icon="Copy">
+                  Copy App ID
+                </MenuItem>
+              {/if}
+              {#if !isPublished}
+                <MenuItem on:click={() => deleteApp(selectedApp)} icon="Delete">
+                  Delete
+                </MenuItem>
+              {/if}
+            </ActionMenu>
           </div>
         </div>
-        <div class="header-right">
-          <AppLockModal app={selectedApp} />
-          <ButtonGroup gap="XS">
-            <Button
-              size="M"
-              secondary
-              icon="Globe"
-              disabled={!isPublished}
-              on:click={viewApp}
-              dataCy="view-app"
-            >
-              View app
-            </Button>
-            <Button
-              size="M"
-              cta
-              icon="Edit"
-              disabled={lockedBy && !lockedByYou}
-              on:click={() => {
-                editApp(selectedApp)
-              }}
-            >
-              <span>Edit</span>
-            </Button>
-          </ButtonGroup>
-        </div>
+      </Layout>
+      <div class="tab-wrap">
+        <Tabs
+          selected={selectedTab}
+          noPadding
+          on:select={e => {
+            selectedTab = e.detail
+          }}
+        >
+          <Tab title="Overview">
+            <OverviewTab
+              app={selectedApp}
+              deployments={latestDeployments}
+              navigateTab={handleTabChange}
+            />
+          </Tab>
+          {#if false}
+            <Tab title="Automation History">
+              <div class="container">Automation History contents</div>
+            </Tab>
+            <Tab title="Backups">
+              <div class="container">Backups contents</div>
+            </Tab>
+          {/if}
+          <Tab title="Settings">
+            <SettingsTab app={selectedApp} />
+          </Tab>
+        </Tabs>
       </div>
-      <Tabs
-        selected={selectedTab}
-        noPadding
-        on:select={e => {
-          selectedTab = e.detail
-        }}
+      <ConfirmDialog
+        bind:this={deletionModal}
+        title="Confirm deletion"
+        okText="Delete app"
+        onOk={confirmDeleteApp}
+        onCancel={() => (appName = null)}
+        disabled={appName !== selectedApp?.name}
       >
-        <Tab title="Overview">
-          <OverviewTab
-            app={selectedApp}
-            deployments={latestDeployments}
-            navigateTab={handleTabChange}
-          />
-        </Tab>
-        {#if false}
-          <Tab title="Automation History">
-            <div class="container">Automation History contents</div>
-          </Tab>
-          <Tab title="Backups">
-            <div class="container">Backups contents</div>
-          </Tab>
-        {/if}
-        <Tab title="Settings">
-          <SettingsTab app={selectedApp} />
-        </Tab>
-      </Tabs>
+        Are you sure you want to delete the app <b>{selectedApp?.name}</b>?
+
+        <p>Please enter the app name below to confirm.</p>
+        <Input
+          bind:value={appName}
+          data-cy="delete-app-confirmation"
+          placeholder={selectedApp?.name}
+        />
+      </ConfirmDialog>
+      <ConfirmDialog
+        bind:this={unpublishModal}
+        title="Confirm unpublish"
+        okText="Unpublish app"
+        onOk={confirmUnpublishApp}
+        dataCy={"unpublish-modal"}
+      >
+        Are you sure you want to unpublish the app <b>{selectedApp?.name}</b>?
+      </ConfirmDialog>
     {:catch error}
       <p>Something went wrong: {error.message}</p>
     {/await}
-  </Layout>
-</Page>
+  </Page>
+</span>
 
 <style>
   .app-url {
@@ -234,11 +359,35 @@
   .loading {
     display: flex;
     justify-content: center;
+    align-items: center;
+    flex: 1;
   }
   .overview-header {
     display: flex;
     justify-content: space-between;
   }
+
+  .page-header.loaded {
+    padding: 0px;
+  }
+
+  .overview-wrap :global(> div > .container),
+  .tab-wrap :global(.spectrum-Tabs) {
+    background-color: var(--background);
+    background-clip: padding-box;
+  }
+
+  @media (max-width: 1000px) {
+    .overview-header {
+      flex-direction: column;
+      gap: var(--spacing-l);
+    }
+  }
+  @media (max-width: 640px) {
+    .overview-wrap :global(.content > *) {
+      padding: calc(var(--spacing-xl) * 1.5) !important;
+    }
+  }
   .app-title {
     display: flex;
     gap: var(--spacing-m);
@@ -252,4 +401,13 @@
     line-height: 1em;
     margin-bottom: var(--spacing-s);
   }
+  .tab-wrap :global(.spectrum-Tabs) {
+    padding-left: calc(var(--spacing-xl) * 2);
+    padding-right: calc(var(--spacing-xl) * 2);
+  }
+  .page-header {
+    padding-left: calc(var(--spacing-xl) * 2);
+    padding-right: calc(var(--spacing-xl) * 2);
+    padding-top: calc(var(--spacing-xl) * 2);
+  }
 </style>

packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte

@@ -1,7 +1,14 @@
 <script>
   import DashCard from "components/common/DashCard.svelte"
   import { AppStatus } from "constants"
-  import { Icon, Heading, Link, Avatar, notifications } from "@budibase/bbui"
+  import {
+    Icon,
+    Heading,
+    Link,
+    Avatar,
+    notifications,
+    Layout,
+  } from "@budibase/bbui"
   import { store } from "builderStore"
   import clientPackage from "@budibase/client/package.json"
   import { processStringSync } from "@budibase/string-templates"
@@ -41,132 +48,136 @@
 </script>
 
 <div class="overview-tab">
-  <div class="top">
-    <DashCard title={"App Status"} dataCy={"app-status"}>
-      <div class="status-content">
-        <div class="status-display">
-          {#if isPublished}
-            <Icon name="GlobeCheck" size="XL" disabled={false} />
-            <span>Published</span>
-          {:else}
-            <Icon name="GlobeStrike" size="XL" disabled={true} />
-            <span class="disabled"> Unpublished </span>
-          {/if}
-        </div>
-
-        <p class="status-text">
-          {#if deployments?.length}
-            {processStringSync(
-              "Last published {{ duration time 'millisecond' }} ago",
-              {
-                time:
-                  new Date().getTime() -
-                  new Date(deployments[0].updatedAt).getTime(),
-              }
-            )}
-          {/if}
-          {#if !deployments?.length}
-            -
-          {/if}
-        </p>
-      </div>
-    </DashCard>
-    <DashCard title={"Last Edited"} dataCy={"edited-by"}>
-      <div class="last-edited-content">
-        {#await userPromise}
-          <Avatar size="M" initials={"-"} />
-        {:then _}
-          <div class="updated-by">
-            {#if appEditor}
-              <Avatar size="M" initials={getInitials(appEditor)} />
-              <div class="editor-name">
-                {appEditor._id === $auth.user._id ? "You" : appEditorText}
-              </div>
+  <Layout paddingX="XXL" paddingY="XXL">
+    <div class="top">
+      <DashCard title={"App Status"} dataCy={"app-status"}>
+        <div class="status-content">
+          <div class="status-display">
+            {#if isPublished}
+              <Icon name="GlobeCheck" size="XL" disabled={false} />
+              <span>Published</span>
+            {:else}
+              <Icon name="GlobeStrike" size="XL" disabled={true} />
+              <span class="disabled"> Unpublished </span>
             {/if}
           </div>
-        {:catch error}
-          <p>Could not fetch user: {error.message}</p>
-        {/await}
-        <p class="last-edit-text">
-          {#if app}
-            {processStringSync(
-              "Last edited {{ duration time 'millisecond' }} ago",
-              {
-                time: new Date().getTime() - new Date(app?.updatedAt).getTime(),
-              }
-            )}
-          {/if}
-        </p>
-      </div>
-    </DashCard>
-    <DashCard
-      title={"App Version"}
-      showIcon={true}
-      action={() => {
-        navigateTab("Settings")
-      }}
-      dataCy={"app-version"}
-    >
-      <div class="version-content" data-cy={$store.version}>
-        <Heading size="XS">{$store.version}</Heading>
-        {#if updateAvailable}
-          <p class="version-status">
-            New version <strong>{clientPackage.version}</strong> is available -
-            <Link
-              on:click={() => {
-                if (typeof navigateTab === "function") {
-                  navigateTab("Settings")
+
+          <p class="status-text">
+            {#if deployments?.length}
+              {processStringSync(
+                "Last published {{ duration time 'millisecond' }} ago",
+                {
+                  time:
+                    new Date().getTime() -
+                    new Date(deployments[0].updatedAt).getTime(),
                 }
-              }}
-            >
-              Update
-            </Link>
+              )}
+            {/if}
+            {#if !deployments?.length}
+              -
+            {/if}
           </p>
-        {:else}
-          <p class="version-status">You're running the latest!</p>
-        {/if}
-      </div>
-    </DashCard>
-  </div>
-  {#if false}
-    <div class="bottom">
-      <DashCard
-        title={"Automation History"}
-        action={() => {
-          navigateTab("Automation History")
-        }}
-        dataCy={"automation-history"}
-      >
-        <div class="automation-content">
-          <div class="automation-metrics">
-            <div class="succeeded">
-              <Heading size="XL">0</Heading>
-              <div class="metric-info">
-                <Icon name="CheckmarkCircle" />
-                Success
-              </div>
+        </div>
+      </DashCard>
+      <DashCard title={"Last Edited"} dataCy={"edited-by"}>
+        <div class="last-edited-content">
+          {#await userPromise}
+            <Avatar size="M" initials={"-"} />
+          {:then _}
+            <div class="updated-by">
+              {#if appEditor}
+                <Avatar size="M" initials={getInitials(appEditor)} />
+                <div class="editor-name">
+                  {appEditor._id === $auth.user._id ? "You" : appEditorText}
+                </div>
+              {/if}
             </div>
-            <div class="failed">
-              <Heading size="XL">0</Heading>
-              <div class="metric-info">
-                <Icon name="Alert" />
-                Error
-              </div>
-            </div>
-          </div>
+          {:catch error}
+            <p>Could not fetch user: {error.message}</p>
+          {/await}
+          <p class="last-edit-text">
+            {#if app}
+              {processStringSync(
+                "Last edited {{ duration time 'millisecond' }} ago",
+                {
+                  time:
+                    new Date().getTime() - new Date(app?.updatedAt).getTime(),
+                }
+              )}
+            {/if}
+          </p>
         </div>
       </DashCard>
       <DashCard
-        title={"Backups"}
+        title={"App Version"}
+        showIcon={true}
         action={() => {
-          navigateTab("Backups")
+          navigateTab("Settings")
         }}
-        dataCy={"backups"}
+        dataCy={"app-version"}
       >
-        <div class="backups-content">test</div>
+        <div class="version-content" data-cy={$store.version}>
+          <Heading size="XS">{$store.version}</Heading>
+          {#if updateAvailable}
+            <p class="version-status">
+              New version <strong>{clientPackage.version}</strong> is available
+              -
+              <Link
+                on:click={() => {
+                  if (typeof navigateTab === "function") {
+                    navigateTab("Settings")
+                  }
+                }}
+              >
+                Update
+              </Link>
+            </p>
+          {:else}
+            <p class="version-status">You're running the latest!</p>
+          {/if}
+        </div>
       </DashCard>
     </div>
-  {/if}
+    {#if false}
+      <div class="bottom">
+        <DashCard
+          title={"Automation History"}
+          action={() => {
+            navigateTab("Automation History")
+          }}
+          dataCy={"automation-history"}
+        >
+          <div class="automation-content">
+            <div class="automation-metrics">
+              <div class="succeeded">
+                <Heading size="XL">0</Heading>
+                <div class="metric-info">
+                  <Icon name="CheckmarkCircle" />
+                  Success
+                </div>
+              </div>
+              <div class="failed">
+                <Heading size="XL">0</Heading>
+                <div class="metric-info">
+                  <Icon name="Alert" />
+                  Error
+                </div>
+              </div>
+            </div>
+          </div>
+        </DashCard>
+        <DashCard
+          title={"Backups"}
+          action={() => {
+            navigateTab("Backups")
+          }}
+          dataCy={"backups"}
+        >
+          <div class="backups-content">test</div>
+        </DashCard>
+      </div>
+    {/if}
+  </Layout>
 </div>
 
 <style>
@@ -180,6 +191,23 @@
     grid-gap: var(--spacing-xl);
     grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
   }
+
+  @media (max-width: 1000px) {
+    .overview-tab .top {
+      display: grid;
+      grid-gap: var(--spacing-xl);
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  @media (max-width: 800px) {
+    .overview-tab .top {
+      display: grid;
+      grid-gap: var(--spacing-xl);
+      grid-template-columns: 1fr;
+    }
+  }
+
   .overview-tab .bottom,
   .automation-metrics {
     display: grid;

packages/builder/src/pages/builder/portal/overview/_components/SettingsTab.svelte

@@ -28,10 +28,10 @@
 
 <div class="settings-tab">
   <Page wide={false}>
-    <Layout gap="XL" noPadding>
+    <Layout gap="XL" paddingY="XXL" paddingX="">
       <span class="details-section">
         <Layout gap="XS" noPadding>
-          <Heading size="S">Name and Url</Heading>
+          <Heading size="S">Name and URL</Heading>
           <Divider />
           <Body>
             <div class="app-details">
@@ -60,8 +60,8 @@
         </Layout>
       </span>
       <span class="version-section">
-        <Layout gap="XS" noPadding>
-          <Heading size="S">App Version</Heading>
+        <Layout gap="XS" paddingY="XXL" paddingX="">
+          <Heading size="S">App version</Heading>
           <Divider />
           <Body>
             {#if updateAvailable}
@@ -76,28 +76,26 @@
                 <strong>{$store.version}</strong>. You're running the latest!
               </p>
             {/if}
-            <p>
-              Updates can contain new features, performance improvements and bug
-              fixes.
-            </p>
+
+            Updates can contain new features, performance improvements and bug
+            fixes.
+
             <div class="page-action">
-              <Button cta on:click={versionModal.show()}>Update App</Button>
+              <Button cta on:click={versionModal.show()}>Update app</Button>
             </div>
           </Body>
         </Layout>
       </span>
       <span class="selfhost-section">
-        <Layout gap="XS" noPadding>
+        <Layout gap="XS" paddingY="XXL" paddingX="">
           <Heading size="S">Self-host Budibase</Heading>
           <Divider />
           <Body>
-            <p>
-              Self-host Budibase for free to get unlimited apps and more - and
-              it only takes a few minutes!
-            </p>
+            Self-host Budibase for free to get unlimited apps and more - and it
+            only takes a few minutes!
             <div class="page-action">
               <Button
-                cta
+                secondary
                 on:click={() => {
                   window.open(selfHostPath, "_blank")
                 }}>Self-host Budibase</Button