diff --git a/internal/portal/src/app.scss b/internal/portal/src/app.scss
index 068150dd1..2e6db8fb0 100644
--- a/internal/portal/src/app.scss
+++ b/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;
diff --git a/internal/portal/src/common/MetricsChart/MetricsBreakdown.scss b/internal/portal/src/common/MetricsChart/MetricsBreakdown.scss
index 48e5489ce..7461098ed 100644
--- a/internal/portal/src/common/MetricsChart/MetricsBreakdown.scss
+++ b/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 {
diff --git a/internal/portal/src/common/SearchInput/SearchInput.scss b/internal/portal/src/common/SearchInput/SearchInput.scss
index 34927a7f4..3dc192543 100644
--- a/internal/portal/src/common/SearchInput/SearchInput.scss
+++ b/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);
   }
diff --git a/internal/portal/src/common/Sidebar/Sidebar.scss b/internal/portal/src/common/Sidebar/Sidebar.scss
index df3beef8d..219c31470 100644
--- a/internal/portal/src/common/Sidebar/Sidebar.scss
+++ b/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);
diff --git a/internal/portal/src/common/Sidebar/Sidebar.tsx b/internal/portal/src/common/Sidebar/Sidebar.tsx
index c97e5c168..62a31b1c7 100644
--- a/internal/portal/src/common/Sidebar/Sidebar.tsx
+++ b/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,
   );
 };
diff --git a/internal/portal/src/common/Table/Table.scss b/internal/portal/src/common/Table/Table.scss
index f6118fa9c..aafabfb34 100644
--- a/internal/portal/src/common/Table/Table.scss
+++ b/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);
diff --git a/internal/portal/src/common/Table/Table.tsx b/internal/portal/src/common/Table/Table.tsx
index f4702f160..57f132903 100644
--- a/internal/portal/src/common/Table/Table.tsx
+++ b/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={{
diff --git a/internal/portal/src/global.scss b/internal/portal/src/global.scss
index d95b86d9f..999489963 100644
--- a/internal/portal/src/global.scss
+++ b/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 {
diff --git a/internal/portal/src/scenes/CreateDestination/CreateDestination.scss b/internal/portal/src/scenes/CreateDestination/CreateDestination.scss
index 34fe78225..8af7afed9 100644
--- a/internal/portal/src/scenes/CreateDestination/CreateDestination.scss
+++ b/internal/portal/src/scenes/CreateDestination/CreateDestination.scss
@@ -7,6 +7,12 @@
   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;
@@ -14,6 +20,11 @@
     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);
+        }
       }
     }
 
diff --git a/internal/portal/src/scenes/Destination/Destination.scss b/internal/portal/src/scenes/Destination/Destination.scss
index b132dcd4c..76a21edc9 100644
--- a/internal/portal/src/scenes/Destination/Destination.scss
+++ b/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;
+    }
   }
 }
diff --git a/internal/portal/src/scenes/Destination/DestinationSettings/DestinationSettings.scss b/internal/portal/src/scenes/Destination/DestinationSettings/DestinationSettings.scss
index 972777d73..a0ac9def7 100644
--- a/internal/portal/src/scenes/Destination/DestinationSettings/DestinationSettings.scss
+++ b/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 {
diff --git a/internal/portal/src/scenes/Destination/Events/Attempts.scss b/internal/portal/src/scenes/Destination/Events/Attempts.scss
index 5d37d6d22..d73fe7cb8 100644
--- a/internal/portal/src/scenes/Destination/Events/Attempts.scss
+++ b/internal/portal/src/scenes/Destination/Events/Attempts.scss
@@ -14,11 +14,13 @@
     align-items: center;
     gap: var(--spacing-2);
     justify-content: space-between;
+    flex-wrap: wrap;
 
     &-filters {
       display: flex;
       align-items: center;
       gap: var(--spacing-3);
+      flex-wrap: wrap;
     }
 
     &-title .badge {
@@ -70,10 +72,21 @@
     &--active {
       grid-template-columns: 1fr 516px;
 
+      @media (max-width: 1024px) {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto auto;
+      }
+
       .table {
         height: 100%;
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
+
+        @media (max-width: 1024px) {
+          border-radius: var(--radius-m);
+          border-bottom-left-radius: 0;
+          border-bottom-right-radius: 0;
+        }
       }
 
       .drawer {
@@ -85,6 +98,12 @@
         border-top-right-radius: var(--radius-m);
         border-bottom-right-radius: var(--radius-m);
 
+        @media (max-width: 1024px) {
+          border-top: none;
+          border-radius: 0 0 var(--radius-m) var(--radius-m);
+          max-height: 60vh;
+        }
+
         &__header {
           display: flex;
           align-items: center;
@@ -159,6 +178,9 @@ dl.description-list {
     padding-top: var(--spacing-4);
     padding-bottom: var(--spacing-4);
     border-bottom: 1px solid var(--colors-outline-neutral);
+    // Allow long values (e.g. IDs, URLs) to wrap onto a new line under the
+    // label on narrow viewports without forcing every row to stack.
+    flex-wrap: wrap;
 
     &:last-child {
       border-bottom: none;
diff --git a/internal/portal/src/scenes/DestinationsList/DestinationList.scss b/internal/portal/src/scenes/DestinationsList/DestinationList.scss
index d3b1d0840..0de20f727 100644
--- a/internal/portal/src/scenes/DestinationsList/DestinationList.scss
+++ b/internal/portal/src/scenes/DestinationsList/DestinationList.scss
@@ -17,10 +17,26 @@
   &__actions {
     display: flex;
     gap: var(--spacing-2);
+    flex-wrap: wrap;
 
     *:last-child {
       margin-left: auto;
     }
+
+    @media (max-width: 640px) {
+      .search_input_container {
+        min-width: 0;
+        width: 100%;
+      }
+
+      .search_input {
+        min-width: 0;
+      }
+
+      *:last-child {
+        margin-left: 0;
+      }
+    }
   }
 
   &__topics-tooltip {
@@ -37,6 +53,11 @@
   border: 1px dashed var(--colors-outline-neutral);
   border-radius: var(--radius-m);
   padding: var(--spacing-14);
+
+  @media (max-width: 640px) {
+    padding: var(--spacing-8) var(--spacing-4);
+    text-align: center;
+  }
 }
 
 .dropdown-item {