Update more pages to be responsive and add mobile specific components

packages/bbui/src/Layout/Page.svelte

@@ -72,6 +72,7 @@
     background: var(--background);
     border-left: var(--border-light);
     width: 320px;
+    max-width: calc(100vw - 48px - 48px);
     overflow: auto;
     overflow-x: hidden;
     transform: translateX(100%);

packages/builder/src/components/portal/page/Content.svelte

@@ -1,9 +1,10 @@
 <script>
   export let narrow = false
+  export let showMobileNav = false
 </script>
 
 <div class="content">
-  <div class="side-nav">
+  <div class="side-nav" class:show-mobile={showMobileNav}>
     <slot name="side-nav" />
   </div>
   <div class="main" class:narrow>
@@ -28,4 +29,13 @@
   .main.narrow {
     max-width: 600px;
   }
+
+  @media (max-width: 640px) {
+    .content {
+      flex-direction: column;
+    }
+    .side-nav:not(.show-mobile) {
+      display: none;
+    }
+  }
 </style>

packages/builder/src/components/portal/page/Header.svelte

@@ -2,9 +2,10 @@
   import { Heading } from "@budibase/bbui"
 
   export let title
+  export let wrap = true
 </script>
 
-<div class="header">
+<div class="header" class:wrap>
   <slot name="icon" />
   <Heading size="L">{title}</Heading>
   <div class="buttons">
@@ -20,10 +21,19 @@
     align-items: center;
     gap: var(--spacing-xl);
   }
+  .header.wrap {
+    flex-wrap: wrap;
+  }
   .header :global(.spectrum-Heading) {
     flex: 1 1 auto;
     margin-top: -2px;
   }
+  .header:not(.wrap) :global(.spectrum-Heading) {
+    overflow: hidden;
+    width: 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
   .buttons {
     display: flex;
     flex-direction: row;
@@ -34,4 +44,9 @@
   .buttons :global(> div) {
     display: contents;
   }
+  @media (max-width: 640px) {
+    .wrap .buttons {
+      margin-bottom: var(--spacing-m);
+    }
+  }
 </style>

packages/builder/src/components/portal/page/SideNav.svelte

@@ -23,4 +23,12 @@
     color: var(--spectrum-global-color-gray-700);
     margin-bottom: var(--spacing-m);
   }
+
+  @media (max-width: 640px) {
+    .side-nav {
+      border-bottom: var(--border-light);
+      margin: 0 -24px;
+      padding: 0 24px 32px 24px;
+    }
+  }
 </style>

packages/builder/src/pages/builder/portal/overview/[appId]/_layout.svelte

@@ -120,7 +120,7 @@
         <Breadcrumb url={$url("../")} text="Apps" />
         <Breadcrumb text={app?.name} />
       </Breadcrumbs>
-      <Header title={app?.name}>
+      <Header title={app?.name} wrap={false}>
         <div slot="icon">
           <EditableIcon
             {app}
@@ -132,28 +132,46 @@
         </div>
         <div slot="buttons">
           <AppLockModal {app} />
-          <Button
+          <span class="desktop">
-            size="M"
+            <Button
-            quiet
+              size="M"
-            secondary
+              quiet
-            disabled={!isPublished}
+              secondary
-            on:click={viewApp}
+              disabled={!isPublished}
-            dataCy="view-app"
+              on:click={viewApp}
-          >
+              dataCy="view-app"
-            View
+            >
-          </Button>
+              View
-          <Button
+            </Button>
-            size="M"
+          </span>
-            cta
+          <span class="desktop">
-            disabled={appLocked && !lockedByYou}
+            <Button
-            on:click={editApp}
+              size="M"
-          >
+              cta
-            Edit
+              disabled={appLocked && !lockedByYou}
-          </Button>
+              on:click={editApp}
+            >
+              Edit
+            </Button>
+          </span>
           <ActionMenu align="right" dataCy="app-overview-menu-popover">
             <span slot="control" class="app-overview-actions-icon">
               <Icon hoverable name="More" />
             </span>
+            <span class="mobile">
+              <MenuItem icon="Globe" disabled={!isPublished} on:click={viewApp}>
+                View
+              </MenuItem>
+            </span>
+            <span class="mobile">
+              <MenuItem
+                icon="Edit"
+                disabled={appLocked && !lockedByYou}
+                on:click={editApp}
+              >
+                Edit
+              </MenuItem>
+            </span>
             <MenuItem
               on:click={() => exportApp({ published: false })}
               icon="DownloadFromCloud"
@@ -177,7 +195,7 @@
           </ActionMenu>
         </div>
       </Header>
-      <Content>
+      <Content showMobileNav>
         <SideNav slot="side-nav">
           <SideNavItem
             text="Overview"
@@ -237,3 +255,15 @@
     />
   </ConfirmDialog>
 {/key}
+
+<style>
+  .desktop {
+    display: contents;
+  }
+
+  @media (max-width: 640px) {
+    .desktop {
+      display: none;
+    }
+  }
+</style>