feat(portal): mobile-responsive layout

internal/portal/src/app.scss

@@ -8,6 +8,16 @@
   padding-left: calc(var(--base-grid-multiplier) * 24);
   padding-right: calc(var(--base-grid-multiplier) * 24);
 
+  @media (max-width: 1024px) {
+    padding-left: var(--spacing-6);
+    padding-right: var(--spacing-6);
+  }
+
+  @media (max-width: 640px) {
+    padding-left: var(--spacing-4);
+    padding-right: var(--spacing-4);
+  }
+
   &__loading {
     display: flex;
     justify-content: center;
@@ -23,6 +33,11 @@
     margin-top: calc(var(--base-grid-multiplier) * 20);
     margin-bottom: calc(var(--base-grid-multiplier) * 12);
 
+    @media (max-width: 640px) {
+      margin-top: var(--spacing-6);
+      margin-bottom: var(--spacing-6);
+    }
+
     a {
       color: var(--colors-foreground-neutral-3);
       text-decoration: none;
@@ -46,6 +61,9 @@
     display: flex;
     gap: var(--spacing-2);
     color: var(--colors-foreground-neutral-3);
+    flex-wrap: wrap;
+    align-items: center;
+    width: 100%;
 
     span,
     a {
@@ -66,6 +84,12 @@
   left: var(--spacing-4);
   color: var(--colors-foreground-neutral-2);
 
+  @media (max-width: 640px) {
+    position: static;
+    text-align: center;
+    padding: var(--spacing-4);
+  }
+
   a {
     color: var(--colors-foreground-neutral-2);
     text-decoration: none;

internal/portal/src/common/MetricsChart/MetricsBreakdown.scss

@@ -46,6 +46,11 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
+    @media (max-width: 640px) {
+      min-width: 72px;
+      max-width: 72px;
+    }
   }
 
   &__bar-container {

internal/portal/src/common/SearchInput/SearchInput.scss

@@ -6,6 +6,8 @@
   padding-right: var(--spacing-8);
   padding-left: var(--spacing-9);
   min-width: 368px;
+  width: 100%;
+  box-sizing: border-box;
   &::placeholder {
     color: var(--colors-foreground-neutral-3);
   }

internal/portal/src/common/Sidebar/Sidebar.scss

@@ -1,5 +1,22 @@
 .sidebar-open #root {
   margin-right: 408px;
+
+  // Below 1024px the sidebar overlays content instead of pushing it.
+  @media (max-width: 1024px) {
+    margin-right: 0;
+  }
+}
+
+#sidebar-backdrop {
+  display: none;
+
+  @media (max-width: 1024px) {
+    display: block;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.32);
+    z-index: 9;
+  }
 }
 
 #sidebar {
@@ -12,6 +29,14 @@
   border-left: 1px solid var(--colors-outline-neutral);
   overflow-y: auto;
   box-sizing: border-box;
+  background: var(--colors-background);
+  z-index: 10;
+
+  @media (max-width: 640px) {
+    width: 100vw;
+    max-width: 100vw;
+    padding: var(--spacing-4);
+  }
 
   .close-button {
     margin-left: calc(var(--spacing-2) * -1);

internal/portal/src/common/Sidebar/Sidebar.tsx

@@ -78,12 +78,15 @@ const SidebarPortal = ({
   }
 
   return createPortal(
-    <div id="sidebar">
-      <Button minimal onClick={onClose} className="close-button">
-        <CollapseIcon />
-      </Button>
-      {state.content}
-    </div>,
+    <>
+      <div id="sidebar-backdrop" onClick={onClose} aria-hidden="true" />
+      <div id="sidebar">
+        <Button minimal onClick={onClose} className="close-button">
+          <CollapseIcon />
+        </Button>
+        {state.content}
+      </div>
+    </>,
     document.body,
   );
 };

internal/portal/src/common/Table/Table.scss

@@ -6,6 +6,23 @@
   border: 1px solid var(--colors-outline-neutral);
   background-color: var(--colors-background);
 
+  @media (max-width: 1024px) {
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+
+    .table__header,
+    .table__body,
+    .table__body-row,
+    .table__footer {
+      min-width: var(--table-min-width, max-content);
+    }
+
+    .table__body {
+      overflow-x: visible;
+    }
+  }
+
   &__header {
     display: grid;
     background-color: var(--colors-background-neutral-2);

internal/portal/src/common/Table/Table.tsx

@@ -37,8 +37,21 @@ const Table: React.FC<TableProps> = ({
     .map((column) => (column.width ? `${column.width}px` : "1fr"))
     .join(" ");
 
+  const fallbackFlexColumnWidth = 160;
+  const tableMinWidth = columns.reduce(
+    (sum, column) => sum + (column.width ?? fallbackFlexColumnWidth),
+    0,
+  );
+
   return (
-    <div className="table">
+    <div
+      className="table"
+      style={
+        {
+          "--table-min-width": `${tableMinWidth}px`,
+        } as React.CSSProperties
+      }
+    >
       <div
         className="table__header"
         style={{

internal/portal/src/global.scss

@@ -352,6 +352,18 @@ body {
   margin: 0;
   background: var(--colors-background);
   font-size: 1rem;
+  overflow-x: hidden;
+  -webkit-text-size-adjust: 100%;
+}
+
+// Prevent iOS Safari from zooming the viewport when focusing inputs:
+// browsers only zoom inputs whose computed font-size is < 16px.
+@media (max-width: 640px) {
+  input,
+  textarea,
+  select {
+    font-size: 16px;
+  }
 }
 
 @mixin generate-spacing-variables {

internal/portal/src/scenes/CreateDestination/CreateDestination.scss

@@ -7,13 +7,24 @@
   flex-direction: row;
   padding-top: calc(var(--base-grid-multiplier) * 18);
 
+  @media (max-width: 1024px) {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-8);
+    padding-top: var(--spacing-8);
+  }
+
   &__sidebar {
     display: flex;
     flex-direction: column;
     position: sticky;
     top: calc(var(--base-grid-multiplier) * 18);
     align-self: start;
 
+    @media (max-width: 1024px) {
+      position: static;
+      top: auto;
+    }
+
     &__steps {
       margin-top: var(--spacing-8);
       margin-left: var(--spacing-2);
@@ -72,6 +83,12 @@
         ~ p {
           margin-top: 0;
         }
+
+        @media (max-width: 640px) {
+          margin-top: var(--spacing-4);
+          font-size: var(--font-size-2xl);
+          line-height: var(--line-height-2xl);
+        }
       }
     }
 

internal/portal/src/scenes/Destination/Destination.scss

@@ -3,6 +3,10 @@
   align-items: center;
   gap: var(--spacing-6);
 
+  @media (max-width: 640px) {
+    gap: var(--spacing-4);
+  }
+
   &__icon {
     display: flex;
     align-items: center;
@@ -38,11 +42,21 @@
 .tabs-container {
   margin-top: 24px;
   border-bottom: 1px solid var(--colors-outline-neutral);
+
+  @media (max-width: 640px) {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
 }
 
 .tabs {
   display: flex;
   gap: var(--spacing-4);
+
+  @media (max-width: 640px) {
+    gap: var(--spacing-2);
+    white-space: nowrap;
+  }
 }
 
 .tab {
@@ -91,6 +105,21 @@
         align-items: center;
         gap: var(--spacing-1);
       }
+
+      @media (max-width: 640px) {
+        flex-direction: column;
+        gap: var(--spacing-1);
+
+        > span:first-child {
+          width: auto;
+          min-width: 0;
+        }
+
+        > span:last-child {
+          min-width: 0;
+          word-break: break-word;
+        }
+      }
     }
   }
 }
@@ -132,6 +161,8 @@
     align-items: center;
     justify-content: space-between;
     margin-bottom: var(--spacing-4);
+    gap: var(--spacing-3);
+    flex-wrap: wrap;
 
     h2 {
       margin: 0;
@@ -178,6 +209,15 @@
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: var(--spacing-6);
+
+    @media (max-width: 1024px) {
+      grid-template-columns: repeat(2, 1fr);
+      gap: var(--spacing-4);
+    }
+
+    @media (max-width: 640px) {
+      grid-template-columns: 1fr;
+    }
   }
 
   &__cell {
@@ -196,5 +236,15 @@
     &--row2-half {
       grid-column: span 3;
     }
+
+    @media (max-width: 1024px) {
+      grid-column: span 1 !important;
+      padding: var(--spacing-4);
+    }
+
+    @media (max-width: 640px) {
+      height: auto;
+      min-height: 280px;
+    }
   }
 }

internal/portal/src/scenes/Destination/DestinationSettings/DestinationSettings.scss

@@ -46,6 +46,12 @@
     display: flex;
     gap: var(--spacing-3);
     margin-top: var(--spacing-4);
+    flex-wrap: wrap;
+
+    @media (max-width: 640px) {
+      flex-direction: column;
+      align-items: stretch;
+    }
   }
 
   &__actions {