Make core page layout responsive and update apps list to be responsive

packages/bbui/src/Layout/Page.svelte

@@ -58,10 +58,10 @@
     padding: 50px;
     z-index: 1;
   }
-  .wide {
+  .content.wide {
     max-width: none;
   }
-  .narrow {
+  .content.narrow {
     max-width: 840px;
   }
   #side-panel {
@@ -82,4 +82,13 @@
   #side-panel.visible {
     transform: translateX(0);
   }
+
+  @media (max-width: 640px) {
+    .content {
+      padding: 24px;
+      max-width: calc(100vw - 48px) !important;
+      width: calc(100vw - 48px) !important;
+      overflow: auto;
+    }
+  }
 </style>

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

@@ -78,6 +78,9 @@
   .name {
     flex: 1 1 auto;
   }
+  .name {
+    width: 0;
+  }
   .title,
   .app-status {
     display: flex;
@@ -116,9 +119,25 @@
     text-overflow: ellipsis;
   }
 
+  @media (max-width: 1000px) {
+    .app-row {
+      grid-template-columns: 45% 30% auto;
+    }
+    .updated {
+      display: none;
+    }
+  }
+  @media (max-width: 800px) {
+    .app-row {
+      grid-template-columns: 1fr auto;
+    }
+    .app-status {
+      display: none;
+    }
+  }
   @media (max-width: 640px) {
-    .desktop {
-      display: none !important;
+    .app-row {
+      padding: 24px 20px;
     }
   }
 </style>

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

@@ -228,7 +228,7 @@
     justify-content: flex-start;
     align-items: stretch;
     border-bottom: var(--border-light);
-    padding: 0 20px;
+    padding: 0 24px;
     gap: 24px;
     position: relative;
   }
@@ -265,8 +265,7 @@
     align-items: center;
     gap: 24px;
   }
-  .mobile-toggle,
-  .mobile-logo {
+  .mobile-toggle {
     display: none;
   }
   .user-dropdown {
@@ -278,7 +277,6 @@
     width: 30px;
     height: 30px;
   }
-
   .main {
     flex: 1 1 auto;
     display: flex;
@@ -289,14 +287,15 @@
   }
 
   @media (max-width: 640px) {
+    .nav {
+      flex: 0 0 64px;
+    }
     .toolbar {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
-      padding: var(--spacing-m) calc(var(--spacing-xl) * 1.5);
     }
-
     .branding {
       position: absolute;
       left: 50%;
@@ -309,11 +308,9 @@
     .toolbar :global(.spectrum-Button) {
       display: none;
     }
-
     .mobile-toggle {
       display: block;
     }
-
     .mobile-toggle,
     .user-dropdown {
       flex: 0 1 0;

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

@@ -373,6 +373,7 @@
     justify-content: flex-start;
     align-items: stretch;
     gap: var(--spacing-xl);
+    overflow: hidden;
   }
 
   .empty-wrapper {