diff --git a/web-admin/playwright.config.ts b/web-admin/playwright.config.ts
index 6b6a7b10b110..15edb748a2bd 100644
--- a/web-admin/playwright.config.ts
+++ b/web-admin/playwright.config.ts
@@ -36,11 +36,24 @@ const config: PlaywrightTestConfig = {
     {
       name: "e2e",
       dependencies: process.env.E2E_NO_SETUP_OR_TEARDOWN ? [] : ["setup"],
-      testIgnore: "/setup",
+      // The mobile smoke suite runs only in the `mobile` project, at a phone viewport.
+      testIgnore: ["/setup", "mobile-smoke.spec.ts"],
       use: {
         storageState: ADMIN_STORAGE_STATE,
       },
     },
+    {
+      // Responsive smoke checks run on an emulated phone against the same
+      // seeded stack. Limited to mobile-smoke so the desktop suites aren't
+      // re-run here.
+      name: "mobile",
+      dependencies: process.env.E2E_NO_SETUP_OR_TEARDOWN ? [] : ["setup"],
+      testMatch: "mobile-smoke.spec.ts",
+      use: {
+        ...devices["iPhone 13"],
+        storageState: ADMIN_STORAGE_STATE,
+      },
+    },
   ],
 };
 
diff --git a/web-admin/src/app.html b/web-admin/src/app.html
index 47e0130dd622..3a8af17c7391 100644
--- a/web-admin/src/app.html
+++ b/web-admin/src/app.html
@@ -46,11 +46,9 @@
       crossorigin
     />
     <meta charset="utf-8" />
-    <!-- Set the mobile viewport width -->
-    <meta
-      name="viewport"
-      content="width=1024, initial-scale=1.0, user-scalable=yes"
-    />
+    <!-- Use the device's real width. The zoom is not capped; the chat composer
+         stays at 16px on phones so iOS doesn't auto-zoom into it. -->
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <!-- Set the og image for thumbnail previews -->
     <meta
       property="og:image"
diff --git a/web-admin/src/components/nav/Tab.svelte b/web-admin/src/components/nav/Tab.svelte
index 7fa5cfc436fa..bdde20dac08e 100644
--- a/web-admin/src/components/nav/Tab.svelte
+++ b/web-admin/src/components/nav/Tab.svelte
@@ -23,6 +23,12 @@
     position.set(left);
   }
 
+  // When the tab row overflows (narrow viewports), keep the selected tab
+  // visible; "nearest" makes this a no-op when it already is.
+  $: if (selected && element) {
+    element.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }
+
   function measure() {
     if (!element) return;
     left = element.offsetLeft;
diff --git a/web-admin/src/features/access-request/AccessRequestContainer.svelte b/web-admin/src/features/access-request/AccessRequestContainer.svelte
index f04a34f4ff38..4ec460cbc88a 100644
--- a/web-admin/src/features/access-request/AccessRequestContainer.svelte
+++ b/web-admin/src/features/access-request/AccessRequestContainer.svelte
@@ -1,6 +1,6 @@
 <div class="bg-black bg-opacity-25 w-full h-full">
   <div
-    class="bg-surface-subtle text-center mx-auto my-40 w-[600px] rounded p-12"
+    class="bg-surface-subtle text-center mx-auto my-40 w-full sm:w-[600px] rounded p-12"
   >
     <div
       class="flex flex-col items-center justify-center gap-y-4 max-w-[400px] mx-auto"
diff --git a/web-admin/src/features/billing/contact/ChangeBillingContactDialog.svelte b/web-admin/src/features/billing/contact/ChangeBillingContactDialog.svelte
index fa6f53df3ded..82eaabbff653 100644
--- a/web-admin/src/features/billing/contact/ChangeBillingContactDialog.svelte
+++ b/web-admin/src/features/billing/contact/ChangeBillingContactDialog.svelte
@@ -73,7 +73,7 @@
       <div {...props} class="hidden"></div>
     {/snippet}
   </Dialog.Trigger>
-  <Dialog.Content class="w-[520px]" noClose>
+  <Dialog.Content class="w-[min(520px,calc(100vw-2rem))]" noClose>
     <Dialog.Header>
       <Dialog.Title>{m.billing_change_billing_contact()}</Dialog.Title>
 
diff --git a/web-admin/src/features/billing/plans/dialog/WelcomeToRillCloudDialog.svelte b/web-admin/src/features/billing/plans/dialog/WelcomeToRillCloudDialog.svelte
index d9387e943d71..1f3554727d90 100644
--- a/web-admin/src/features/billing/plans/dialog/WelcomeToRillCloudDialog.svelte
+++ b/web-admin/src/features/billing/plans/dialog/WelcomeToRillCloudDialog.svelte
@@ -31,7 +31,9 @@
       <div {...props} class="hidden"></div>
     {/snippet}
   </AlertDialogTrigger>
-  <AlertDialogContent class="flex flex-row gap-x-2 min-w-[600px]">
+  <AlertDialogContent
+    class="flex flex-row gap-x-2 min-w-[min(600px,calc(100vw-2rem))]"
+  >
     <Champagne size="150px" className="min-w-[150px]" />
     <div class="flex flex-col gap-x-2">
       <AlertDialogHeader>
diff --git a/web-admin/src/features/bookmarks/Bookmarks.svelte b/web-admin/src/features/bookmarks/Bookmarks.svelte
index dc82036e7fcd..f9844ac7c4c5 100644
--- a/web-admin/src/features/bookmarks/Bookmarks.svelte
+++ b/web-admin/src/features/bookmarks/Bookmarks.svelte
@@ -184,7 +184,7 @@
     The "bookmark current view" action and search stay pinned; only the lists scroll.
   -->
   <DropdownMenuContent
-    class="flex flex-col w-[450px] max-h-[min(600px,var(--bits-floating-available-height))] overflow-hidden p-0"
+    class="flex flex-col w-[min(450px,calc(100vw-2rem))] max-h-[min(600px,var(--bits-floating-available-height))] overflow-hidden p-0"
   >
     <div class="flex-none p-1.5">
       <DropdownMenuItem onclick={() => (showDialog = true)}>
diff --git a/web-admin/src/features/branches/BranchesSection.svelte b/web-admin/src/features/branches/BranchesSection.svelte
index 2ccedf51e101..f2c07a14eb4a 100644
--- a/web-admin/src/features/branches/BranchesSection.svelte
+++ b/web-admin/src/features/branches/BranchesSection.svelte
@@ -349,7 +349,9 @@
               <Tooltip location="bottom" distance={8}>
                 <span class="readonly-badge">{m.branch_read_only()}</span>
                 <TooltipContent slot="tooltip-content">
-                  <div class="text-xs max-w-[360px] flex flex-col gap-y-1">
+                  <div
+                    class="text-xs max-w-[min(360px,calc(100vw-2rem))] flex flex-col gap-y-1"
+                  >
                     <span>{m.branch_not_editable()}</span>
                     <span>
                       {m.branch_recreate_with()}
diff --git a/web-admin/src/features/dashboards/listing/LastRefreshedDate.svelte b/web-admin/src/features/dashboards/listing/LastRefreshedDate.svelte
index 4fb631ca6078..b8381bab7d82 100644
--- a/web-admin/src/features/dashboards/listing/LastRefreshedDate.svelte
+++ b/web-admin/src/features/dashboards/listing/LastRefreshedDate.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
+  import * as Popover from "@rilldata/web-common/components/popover";
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
   import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
   import { createRuntimeServiceGetExplore } from "@rilldata/web-common/runtime-client";
   import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
   import { timeAgo } from "@rilldata/web-common/lib/time/relative-time";
   import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
+  import { Clock } from "lucide-svelte";
 
   export let dashboard: string;
 
@@ -27,8 +29,23 @@
 </script>
 
 {#if data}
+  <!-- On phones the relative text costs a full header row, so it collapses to
+       a clock icon; hover tooltips never fire on touch, so the icon opens a
+       popover on tap instead. -->
+  <Popover.Root>
+    <Popover.Trigger
+      class="sm:hidden p-1 -m-1 flex items-center text-fg-secondary"
+      aria-label={m.dashboard_last_refreshed_ago({ time: timeAgo(data) })}
+    >
+      <Clock size="14px" />
+    </Popover.Trigger>
+    <Popover.Content class="flex w-fit flex-col gap-y-0.5 text-xs" padding="2">
+      <span>{m.dashboard_last_refreshed_ago({ time: timeAgo(data) })}</span>
+      <span class="text-fg-secondary">{data.toLocaleString()}</span>
+    </Popover.Content>
+  </Popover.Root>
   <Tooltip distance={8}>
-    <div class="text-[11px] text-fg-secondary">
+    <div class="hidden sm:block text-[11px] text-fg-secondary">
       {m.dashboard_last_refreshed_ago({ time: timeAgo(data) })}
     </div>
     <TooltipContent slot="tooltip-content">
diff --git a/web-admin/src/features/dashboards/share/ShareDashboardPopover.svelte b/web-admin/src/features/dashboards/share/ShareDashboardPopover.svelte
index a5e263fac9bf..7745552a222a 100644
--- a/web-admin/src/features/dashboards/share/ShareDashboardPopover.svelte
+++ b/web-admin/src/features/dashboards/share/ShareDashboardPopover.svelte
@@ -24,6 +24,7 @@
   import type { PdfExportRunOptions } from "@rilldata/web-common/features/exports/pdf/types";
   import ScheduledReportDialog from "@rilldata/web-common/features/scheduled-reports/ScheduledReportDialog.svelte";
   import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
+  import { Share } from "lucide-svelte";
   import { readable } from "svelte/store";
   import { getDashboardResourceFromPage } from "@rilldata/web-common/features/dashboards/nav-utils.ts";
   import { page } from "$app/stores";
@@ -77,16 +78,24 @@
   <PopoverTrigger>
     {#snippet child({ props })}
       <Tooltip distance={8} suppress={isOpen}>
-        <Button {...props} type="secondary" selected={isOpen}
-          >{m.avatar_share()}</Button
+        <!-- On phones the label costs too much header width, so the button
+             collapses to its icon; the aria-label keeps the accessible name. -->
+        <Button
+          {...props}
+          type="secondary"
+          selected={isOpen}
+          label={m.avatar_share()}
         >
+          <Share size="16px" class="sm:hidden" />
+          <span class="hidden sm:inline">{m.avatar_share()}</span>
+        </Button>
         <TooltipContent slot="tooltip-content"
           >{m.avatar_share_dashboard()}</TooltipContent
         >
       </Tooltip>
     {/snippet}
   </PopoverTrigger>
-  <PopoverContent align="end" class="w-[402px] p-0">
+  <PopoverContent align="end" class="w-[min(402px,calc(100vw-2rem))] p-0">
     <Tabs>
       <TabsList>
         <TabsTrigger value="tab1">{m.avatar_copy_url()}</TabsTrigger>
diff --git a/web-admin/src/features/embeds/EmbedHeader.svelte b/web-admin/src/features/embeds/EmbedHeader.svelte
index b15601ca1a16..0f4ee6235a98 100644
--- a/web-admin/src/features/embeds/EmbedHeader.svelte
+++ b/web-admin/src/features/embeds/EmbedHeader.svelte
@@ -56,7 +56,7 @@
 {#if $isErrorStoreEmpty && shouldRender}
   <div class="flex items-center w-full">
     {#if navigationBarEnabled}
-      <nav class="flex-1">
+      <nav class="flex-1 min-w-0">
         <ol class="flex items-center pl-4">
           {#if !onProjectPage}
             <div class="flex gap-x-2">
diff --git a/web-admin/src/features/organizations/OrgHeader.svelte b/web-admin/src/features/organizations/OrgHeader.svelte
index 31502a539600..b985a208904f 100644
--- a/web-admin/src/features/organizations/OrgHeader.svelte
+++ b/web-admin/src/features/organizations/OrgHeader.svelte
@@ -47,7 +47,7 @@
     <Breadcrumbs {pathParts} {currentPath} />
   {/if}
 
-  <div class="flex gap-x-2 items-center ml-auto">
+  <div class="flex gap-x-2 items-center ml-auto shrink-0">
     {#if $user.isSuccess}
       {#if $user.data?.user}
         <AvatarButton />
diff --git a/web-admin/src/features/organizations/settings/UploadImagePopover.svelte b/web-admin/src/features/organizations/settings/UploadImagePopover.svelte
index f57ddaaf7061..670a64b8f553 100644
--- a/web-admin/src/features/organizations/settings/UploadImagePopover.svelte
+++ b/web-admin/src/features/organizations/settings/UploadImagePopover.svelte
@@ -101,7 +101,7 @@
   <PopoverContent
     align="start"
     side="bottom"
-    class="flex flex-col gap-y-2 w-[400px] p-4"
+    class="flex flex-col gap-y-2 w-[min(400px,calc(100vw-2rem))] p-4"
   >
     <div class="text-base font-medium">
       {m.settings_upload_org_image_title({ label })}
diff --git a/web-admin/src/features/organizations/user-management/dialogs/ConvertGuestToMemberDialog.svelte b/web-admin/src/features/organizations/user-management/dialogs/ConvertGuestToMemberDialog.svelte
index 903caa011f43..7b01d46f9f52 100644
--- a/web-admin/src/features/organizations/user-management/dialogs/ConvertGuestToMemberDialog.svelte
+++ b/web-admin/src/features/organizations/user-management/dialogs/ConvertGuestToMemberDialog.svelte
@@ -72,7 +72,7 @@
     {/snippet}
   </Dialog.Trigger>
   <Dialog.Content
-    class="translate-y-[-200px] md:w-[425px] w-[425px]"
+    class="translate-y-[-200px] w-[min(425px,calc(100vw-2rem))]"
     onInteractOutside={(e) => {
       e.preventDefault();
       open = false;
diff --git a/web-admin/src/features/projects/ProjectTabs.svelte b/web-admin/src/features/projects/ProjectTabs.svelte
index 80a4f837ba13..58d8631a762c 100644
--- a/web-admin/src/features/projects/ProjectTabs.svelte
+++ b/web-admin/src/features/projects/ProjectTabs.svelte
@@ -7,6 +7,7 @@
   import { removeBranchFromPath } from "@rilldata/web-admin/features/branches/branch-utils";
   import { featureFlags } from "@rilldata/web-common/features/feature-flags";
   import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
+  import { onMount } from "svelte";
   import { type V1ProjectPermissions } from "../../client";
 
   export let projectPermissions: V1ProjectPermissions;
@@ -69,6 +70,28 @@
 
   $: selectedIndex = tabs?.findLastIndex((t) => isSelected(t.route, pathname));
 
+  let scroller: HTMLDivElement;
+  let navElement: HTMLElement;
+  let canScrollLeft = false;
+  let canScrollRight = false;
+
+  function updateFades() {
+    if (!scroller) return;
+    canScrollLeft = scroller.scrollLeft > 0;
+    canScrollRight =
+      scroller.scrollLeft + scroller.clientWidth < scroller.scrollWidth - 1;
+  }
+
+  onMount(() => {
+    updateFades();
+    // Observe the nav too: tabs mount/unmount with permissions and feature
+    // flags, which changes scrollWidth without resizing the scroller itself.
+    const observer = new ResizeObserver(updateFades);
+    observer.observe(scroller);
+    observer.observe(navElement);
+    return () => observer.disconnect();
+  });
+
   function isSelected(tabRoute: string, currentPathname: string) {
     // Strip @branch from both sides so comparison works regardless of branch
     const normalizedTab = removeBranchFromPath(tabRoute);
@@ -86,31 +109,63 @@
   }
 </script>
 
-<div class="bg-surface-base">
-  <nav>
-    {#each tabs as tab, i (tab.route)}
-      {#if tab.hasPermission}
-        <Tab
-          route={tab.route}
-          label={tab.label}
-          selected={selectedIndex === i}
-          {organization}
-          {project}
-        />
-      {/if}
-    {/each}
-  </nav>
-
-  {#if $width}
-    <span style:width="{$width}px" style:transform="translateX({$position}px) "
-    ></span>
-  {/if}
+<div class="tabs-container bg-surface-base">
+  <!-- On narrow viewports the tab row scrolls horizontally; the selection
+       indicator scrolls with it since both share the scroller. The edge
+       fades signal the hidden overflow on either side. -->
+  <div class="tabs-scroller" bind:this={scroller} on:scroll={updateFades}>
+    <nav bind:this={navElement}>
+      {#each tabs as tab, i (tab.route)}
+        {#if tab.hasPermission}
+          <Tab
+            route={tab.route}
+            label={tab.label}
+            selected={selectedIndex === i}
+            {organization}
+            {project}
+          />
+        {/if}
+      {/each}
+    </nav>
+
+    {#if $width}
+      <span
+        style:width="{$width}px"
+        style:transform="translateX({$position}px) "
+      ></span>
+    {/if}
+  </div>
+
+  <div class="fade left" class:visible={canScrollLeft}></div>
+  <div class="fade right" class:visible={canScrollRight}></div>
 </div>
 
 <style lang="postcss">
-  div {
-    @apply border-b pt-1;
+  .tabs-container {
+    @apply relative border-b;
+  }
+
+  .tabs-scroller {
+    @apply pt-1;
     @apply gap-y-[3px] flex flex-col;
+    @apply overflow-x-auto;
+  }
+
+  .fade {
+    @apply absolute inset-y-0 w-8 pointer-events-none;
+    @apply opacity-0 transition-opacity duration-200;
+  }
+
+  .fade.visible {
+    @apply opacity-100;
+  }
+
+  .fade.left {
+    @apply left-0 bg-gradient-to-r from-surface-base to-transparent;
+  }
+
+  .fade.right {
+    @apply right-0 bg-gradient-to-l from-surface-base to-transparent;
   }
 
   nav {
diff --git a/web-admin/src/features/projects/SlimProjectHeader.svelte b/web-admin/src/features/projects/SlimProjectHeader.svelte
index db98cc36d41a..949d369eec68 100644
--- a/web-admin/src/features/projects/SlimProjectHeader.svelte
+++ b/web-admin/src/features/projects/SlimProjectHeader.svelte
@@ -39,7 +39,12 @@
   <HeaderLogo href={rillLogoHref} logoUrl={organizationLogoUrl} />
   <Breadcrumbs {pathParts} {currentPath} />
 
-  <div class="flex gap-x-2 items-center ml-auto">
+  <!-- max-w-full bounds the cluster so its flex-wrap can engage on narrow
+       viewports (a bare shrink-0 leaves the width unbounded and the row
+       never wraps); from sm up it keeps to one row as before. -->
+  <div
+    class="flex flex-wrap justify-end gap-y-1 gap-x-2 items-center ml-auto max-w-full sm:shrink-0"
+  >
     {#if $user.isSuccess}
       {#if $user.data?.user}
         <AvatarButton />
diff --git a/web-admin/src/features/projects/header/ProjectHeader.svelte b/web-admin/src/features/projects/header/ProjectHeader.svelte
index b637dba8ebd1..8236db25f2dd 100644
--- a/web-admin/src/features/projects/header/ProjectHeader.svelte
+++ b/web-admin/src/features/projects/header/ProjectHeader.svelte
@@ -235,7 +235,15 @@
     </Breadcrumbs>
   {/if}
 
-  <div class="flex gap-x-2 items-center ml-auto">
+  <!-- max-w-full bounds the cluster so its flex-wrap can engage on narrow
+       viewports (a bare shrink-0 leaves the width unbounded and the row
+       never wraps); from sm up it keeps to one row as before. grow works
+       around WebKit sizing a wrapping flex item below its single-line
+       max-content (the row wrapped despite free space); with justify-end
+       the extra width is invisible. -->
+  <div
+    class="flex flex-wrap justify-end gap-y-1 gap-x-2 items-center ml-auto grow max-w-full sm:shrink-0"
+  >
     {#if editContext}
       {#if editSessionDeploymentId && editSessionJwt}
         <EditSessionViewAs
diff --git a/web-admin/src/features/projects/status/overview/ProjectClone.svelte b/web-admin/src/features/projects/status/overview/ProjectClone.svelte
index 448163b28d14..3a68cf1b3ed3 100644
--- a/web-admin/src/features/projects/status/overview/ProjectClone.svelte
+++ b/web-admin/src/features/projects/status/overview/ProjectClone.svelte
@@ -30,7 +30,11 @@
     {/snippet}
   </Popover.Trigger>
 
-  <Popover.Content class="w-[380px]" align="end" sideOffset={8}>
+  <Popover.Content
+    class="w-[min(380px,calc(100vw-2rem))]"
+    align="end"
+    sideOffset={8}
+  >
     <div class="flex flex-col gap-y-3">
       <span class="text-sm text-fg-secondary">
         {m.status_clone_description()}
diff --git a/web-admin/src/features/projects/status/tables/ExternalTablesTable.svelte b/web-admin/src/features/projects/status/tables/ExternalTablesTable.svelte
index 3aab15861cf9..a30bfb8831df 100644
--- a/web-admin/src/features/projects/status/tables/ExternalTablesTable.svelte
+++ b/web-admin/src/features/projects/status/tables/ExternalTablesTable.svelte
@@ -49,9 +49,11 @@
   ];
 </script>
 
-<VirtualizedTable
-  tableId="external-tables-table"
-  data={tables}
-  {columns}
-  columnLayout="minmax(80px, 0.5fr) minmax(150px, 2fr) minmax(100px, 1fr)"
-/>
+<div class="overflow-x-auto">
+  <VirtualizedTable
+    tableId="external-tables-table"
+    data={tables}
+    {columns}
+    columnLayout="minmax(80px, 0.5fr) minmax(150px, 2fr) minmax(100px, 1fr)"
+  />
+</div>
diff --git a/web-admin/src/features/projects/status/tables/ModelsTable.svelte b/web-admin/src/features/projects/status/tables/ModelsTable.svelte
index f27679e3ef9b..ad46719b56ea 100644
--- a/web-admin/src/features/projects/status/tables/ModelsTable.svelte
+++ b/web-admin/src/features/projects/status/tables/ModelsTable.svelte
@@ -121,9 +121,11 @@
   ] as ColumnDef<V1OlapTableInfo, unknown>[];
 </script>
 
-<VirtualizedTable
-  tableId="models-table"
-  data={tables}
-  {columns}
-  columnLayout="minmax(80px, 0.4fr) minmax(120px, 1.5fr) minmax(120px, 1.5fr) 64px minmax(90px, 0.8fr) 56px"
-/>
+<div class="overflow-x-auto">
+  <VirtualizedTable
+    tableId="models-table"
+    data={tables}
+    {columns}
+    columnLayout="minmax(80px, 0.4fr) minmax(120px, 1.5fr) minmax(120px, 1.5fr) 64px minmax(90px, 0.8fr) 56px"
+  />
+</div>
diff --git a/web-admin/src/features/projects/user-management/ShareProjectPopover.svelte b/web-admin/src/features/projects/user-management/ShareProjectPopover.svelte
index 7e376397b21c..9756b461b507 100644
--- a/web-admin/src/features/projects/user-management/ShareProjectPopover.svelte
+++ b/web-admin/src/features/projects/user-management/ShareProjectPopover.svelte
@@ -12,6 +12,7 @@
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
   import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
   import { copyWithAdditionalArguments } from "@rilldata/web-common/lib/url-utils.ts";
+  import { Share } from "lucide-svelte";
   import { onMount } from "svelte";
 
   export let organization: string;
@@ -38,16 +39,28 @@
   <PopoverTrigger>
     {#snippet child({ props })}
       <Tooltip distance={8} suppress={open}>
-        <Button {...props} type="secondary" selected={open}
-          >{m.project_share()}</Button
+        <!-- On phones the label costs too much header width, so the button
+             collapses to its icon; the aria-label keeps the accessible name. -->
+        <Button
+          {...props}
+          type="secondary"
+          selected={open}
+          label={m.project_share()}
         >
+          <Share size="16px" class="sm:hidden" />
+          <span class="hidden sm:inline">{m.project_share()}</span>
+        </Button>
         <TooltipContent slot="tooltip-content"
           >{m.project_share_tooltip()}</TooltipContent
         >
       </Tooltip>
     {/snippet}
   </PopoverTrigger>
-  <PopoverContent align="end" class="w-[520px]" padding="0">
+  <PopoverContent
+    align="end"
+    class="w-[min(520px,calc(100vw-2rem))]"
+    padding="0"
+  >
     <ShareProjectForm
       {organization}
       {project}
diff --git a/web-admin/src/features/settings/SettingsItemContainer.svelte b/web-admin/src/features/settings/SettingsItemContainer.svelte
index 5035c44cfe0d..e72141a4d709 100644
--- a/web-admin/src/features/settings/SettingsItemContainer.svelte
+++ b/web-admin/src/features/settings/SettingsItemContainer.svelte
@@ -29,7 +29,7 @@
 
 <style lang="postcss">
   .plan-container {
-    @apply w-[800px] border border-gray-200 m-5;
+    @apply w-full max-w-[800px] border border-gray-200 m-5;
   }
 
   .plan-title {
diff --git a/web-admin/src/routes/+layout.svelte b/web-admin/src/routes/+layout.svelte
index 1294a6e5e3c6..85bf4fa95c95 100644
--- a/web-admin/src/routes/+layout.svelte
+++ b/web-admin/src/routes/+layout.svelte
@@ -153,8 +153,8 @@
   <QueryClientProvider client={queryClient}>
     <main
       class="flex flex-col bg-surface-base dark:bg-surface-background"
-      class:min-h-screen={!$dynamicHeight}
-      class:h-screen={!$dynamicHeight}
+      class:min-h-dvh={!$dynamicHeight}
+      class:h-dvh={!$dynamicHeight}
       use:pageContentSizeHandler
     >
       <BannerCenter />
diff --git a/web-admin/src/routes/-/auth/device/+page.svelte b/web-admin/src/routes/-/auth/device/+page.svelte
index 1478c9b0e285..d9ebf8de0c70 100644
--- a/web-admin/src/routes/-/auth/device/+page.svelte
+++ b/web-admin/src/routes/-/auth/device/+page.svelte
@@ -92,7 +92,7 @@
       {userCode}
     </div>
 
-    <div class="flex flex-col gap-y-4 w-[400px]">
+    <div class="flex flex-col gap-y-4 w-full sm:w-[400px]">
       <CtaButton
         variant="primary"
         onClick={() => {
diff --git a/web-admin/src/routes/-/embed/+layout.svelte b/web-admin/src/routes/-/embed/+layout.svelte
index c5d737e13fbf..e13a597b01c9 100644
--- a/web-admin/src/routes/-/embed/+layout.svelte
+++ b/web-admin/src/routes/-/embed/+layout.svelte
@@ -157,7 +157,7 @@
     {/if}
 
     <div class="flex h-full overflow-hidden">
-      <div class="flex-1 overflow-hidden">
+      <div class="flex-1 min-w-0 overflow-hidden">
         <slot />
       </div>
       {#if showDashboardChat && correctedKindForChat}
diff --git a/web-admin/src/routes/-/welcome/theme/+page.svelte b/web-admin/src/routes/-/welcome/theme/+page.svelte
index 1f5472a7c44c..a396d080b604 100644
--- a/web-admin/src/routes/-/welcome/theme/+page.svelte
+++ b/web-admin/src/routes/-/welcome/theme/+page.svelte
@@ -69,6 +69,7 @@
           <img
             src={themeOption.image}
             alt={m.welcome_theme_preview_alt({ theme: themeOption.label })}
+            class="w-20 sm:w-auto"
           />
         </div>
         <div class="text-sm font-semibold text-fg-primary">
diff --git a/web-admin/src/routes/[organization]/-/create-project/+page.svelte b/web-admin/src/routes/[organization]/-/create-project/+page.svelte
index 5e490d6847f4..9cd286531851 100644
--- a/web-admin/src/routes/[organization]/-/create-project/+page.svelte
+++ b/web-admin/src/routes/[organization]/-/create-project/+page.svelte
@@ -48,7 +48,9 @@
   <div class="flex flex-col gap-4 mx-auto w-fit pt-48">
     {#if deployError && isQuotaDeployError(deployError)}
       <CTAHeader variant="bold">{deployError.title}</CTAHeader>
-      <p class="text-base text-fg-secondary text-left w-[500px]">
+      <p
+        class="text-base text-fg-secondary text-left w-[min(500px,calc(100vw-2rem))]"
+      >
         {deployError.message}
       </p>
       <Button
@@ -81,7 +83,7 @@
         </div>
 
         {#if $projectsQuery.isPending}
-          <div class="h-36 w-[500px]">
+          <div class="h-36 w-[min(500px,calc(100vw-2rem))]">
             <Spinner status={EntityStatus.Running} size="2rem" duration={725} />
           </div>
         {:else}
diff --git a/web-admin/src/routes/[organization]/-/users/+page.svelte b/web-admin/src/routes/[organization]/-/users/+page.svelte
index a79955d729a0..25a95ae54b20 100644
--- a/web-admin/src/routes/[organization]/-/users/+page.svelte
+++ b/web-admin/src/routes/[organization]/-/users/+page.svelte
@@ -156,7 +156,7 @@
     </div>
   {/if}
   <div class="flex flex-col">
-    <div class="flex flex-row gap-x-4">
+    <div class="flex flex-row flex-wrap gap-x-4 gap-y-2 sm:flex-nowrap">
       <Search
         bind:value={searchText}
         large
diff --git a/web-admin/src/routes/[organization]/-/users/groups/+page.svelte b/web-admin/src/routes/[organization]/-/users/groups/+page.svelte
index d4bb5cbcf458..105ad8dedcec 100644
--- a/web-admin/src/routes/[organization]/-/users/groups/+page.svelte
+++ b/web-admin/src/routes/[organization]/-/users/groups/+page.svelte
@@ -68,7 +68,7 @@
     </div>
   {:else if $listOrganizationMemberUsergroups.isSuccess}
     <div class="flex flex-col">
-      <div class="flex flex-row gap-x-4">
+      <div class="flex flex-row flex-wrap gap-x-4 gap-y-2 sm:flex-nowrap">
         <Search
           bind:value={searchText}
           large
diff --git a/web-admin/src/routes/[organization]/-/users/guests/+page.svelte b/web-admin/src/routes/[organization]/-/users/guests/+page.svelte
index 8a9fd0d70fcf..3d90ac2d1715 100644
--- a/web-admin/src/routes/[organization]/-/users/guests/+page.svelte
+++ b/web-admin/src/routes/[organization]/-/users/guests/+page.svelte
@@ -136,7 +136,7 @@
     </div>
   {/if}
   <div class="flex flex-col">
-    <div class="flex flex-row gap-x-4 h-9">
+    <div class="flex flex-row flex-wrap gap-x-4 gap-y-2 sm:flex-nowrap sm:h-9">
       <Search
         bind:value={searchText}
         large
diff --git a/web-admin/src/routes/[organization]/[project]/+page.svelte b/web-admin/src/routes/[organization]/[project]/+page.svelte
index 56edff659626..ffa14c4a6434 100644
--- a/web-admin/src/routes/[organization]/[project]/+page.svelte
+++ b/web-admin/src/routes/[organization]/[project]/+page.svelte
@@ -78,7 +78,7 @@
           </DelayedContent>
         {:else if isErrorDisplayName}
           <h1
-            class="text-4xl font-semibold text-fg-secondary"
+            class="text-3xl sm:text-4xl font-semibold text-fg-secondary break-words"
             aria-label={m.home_project_title_label()}
           >
             {@html m.home_welcome_to({
@@ -87,7 +87,7 @@
           </h1>
         {:else}
           <h1
-            class="text-4xl font-semibold text-fg-secondary"
+            class="text-3xl sm:text-4xl font-semibold text-fg-secondary break-words"
             aria-label={m.home_project_title_label()}
           >
             {@html m.home_welcome_to({
diff --git a/web-admin/src/routes/[organization]/[project]/-/edit/+layout.svelte b/web-admin/src/routes/[organization]/[project]/-/edit/+layout.svelte
index 0fe886e06a8b..c488169297ab 100644
--- a/web-admin/src/routes/[organization]/[project]/-/edit/+layout.svelte
+++ b/web-admin/src/routes/[organization]/[project]/-/edit/+layout.svelte
@@ -17,6 +17,11 @@
   import { baseGetProjectQueryOptions } from "@rilldata/web-admin/features/projects/project-query-options";
   import SlimProjectHeader from "@rilldata/web-admin/features/projects/SlimProjectHeader.svelte";
   import { getThemedLogoUrl } from "@rilldata/web-admin/features/themes/organization-logo";
+  import CtaButton from "@rilldata/web-common/components/calls-to-action/CTAButton.svelte";
+  import CtaContentContainer from "@rilldata/web-common/components/calls-to-action/CTAContentContainer.svelte";
+  import CtaHeader from "@rilldata/web-common/components/calls-to-action/CTAHeader.svelte";
+  import CtaLayoutContainer from "@rilldata/web-common/components/calls-to-action/CTALayoutContainer.svelte";
+  import CtaMessage from "@rilldata/web-common/components/calls-to-action/CTAMessage.svelte";
   import ErrorPage from "@rilldata/web-common/components/ErrorPage.svelte";
   import FileAndResourceWatcher from "@rilldata/web-common/features/entity-management/FileAndResourceWatcher.svelte";
   import { themeControl } from "@rilldata/web-common/features/themes/theme-control";
@@ -32,6 +37,7 @@
   import BlockingOverlayContainer from "@rilldata/web-common/layout/BlockingOverlayContainer.svelte";
   import { fileArtifacts } from "@rilldata/web-common/features/entity-management/file-artifacts.ts";
   import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
+  import { belowSm } from "@rilldata/web-common/lib/store-utils/media-query-store";
 
   $: organization = $page.params.organization;
   $: project = $page.params.project;
@@ -143,90 +149,105 @@
   });
 </script>
 
-<div class="edit-session">
-  {#if isLoading}
-    <EditSessionLoading status={deploymentStatus} href={`/${organization}`} />
-  {:else if isErrored}
-    <SlimProjectHeader
-      {organization}
-      {project}
-      readProjects={organizationPermissions?.readProjects}
-      {planDisplayName}
-      {organizationLogoUrl}
-    />
-    <ErrorPage
-      statusCode={500}
-      header="Edit session failed"
-      body={deployment?.statusMessage ||
-        "The editing environment encountered an error. Please try again."}
-    />
-  {:else if isStopped && deployment?.id}
-    <SlimProjectHeader
-      {organization}
-      {project}
-      readProjects={organizationPermissions?.readProjects}
-      {planDisplayName}
-      {organizationLogoUrl}
-    />
-    <BranchDeploymentStopped
-      {organization}
-      {project}
-      deploymentId={deployment.id}
-      status={deploymentStatus}
-      canManage={!!projectPermissions?.manageDev}
-      {branch}
-      bind:starting
-    />
-  {:else if isReady && deployment?.id && instanceId && runtimeHost && jwt}
-    {#key `${runtimeHost}::${instanceId}::${hasPrimaryDeployment}`}
-      <RuntimeProvider host={runtimeHost} {instanceId} {jwt}>
-        {#if !inProjectWelcomePage}
-          <ProjectHeader
-            {organization}
-            {project}
-            {projectPermissions}
-            manageOrgAdmins={organizationPermissions?.manageOrgAdmins}
-            manageOrgMembers={organizationPermissions?.manageOrgMembers}
-            readProjects={organizationPermissions?.readProjects}
-            {primaryBranch}
-            {planDisplayName}
-            {organizationLogoUrl}
-            editContext={true}
-            editSessionDeploymentId={deployment.id}
-            editSessionJwt={jwt}
-          />
-          <EditSessionTimeoutBanner
-            usedOn={deployment.usedOn}
-            {devTtlSeconds}
-          />
-        {/if}
-        <FileAndResourceWatcher
-          lifecycle="none"
-          {onBeforeReconnect}
-          errorBody="Lost connection to the editing environment. Try ending the session and starting a new one."
-        >
+<!-- The in-browser editor needs a real keyboard and a wide canvas, so phones get a
+     "use desktop" notice instead. `{#if}` rather than a CSS class keeps the editor,
+     its runtime connection and its file watcher from mounting behind the notice. -->
+{#if $belowSm}
+  <CtaLayoutContainer>
+    <CtaContentContainer>
+      <CtaHeader>{m.edit_desktop_only_title()}</CtaHeader>
+      <CtaMessage>{m.edit_desktop_only_message()}</CtaMessage>
+      <CtaButton variant="secondary" href={`/${organization}/${project}`}>
+        {m.edit_desktop_only_back_link()}
+      </CtaButton>
+    </CtaContentContainer>
+  </CtaLayoutContainer>
+{:else}
+  <div class="edit-session">
+    {#if isLoading}
+      <EditSessionLoading status={deploymentStatus} href={`/${organization}`} />
+    {:else if isErrored}
+      <SlimProjectHeader
+        {organization}
+        {project}
+        readProjects={organizationPermissions?.readProjects}
+        {planDisplayName}
+        {organizationLogoUrl}
+      />
+      <ErrorPage
+        statusCode={500}
+        header="Edit session failed"
+        body={deployment?.statusMessage ||
+          "The editing environment encountered an error. Please try again."}
+      />
+    {:else if isStopped && deployment?.id}
+      <SlimProjectHeader
+        {organization}
+        {project}
+        readProjects={organizationPermissions?.readProjects}
+        {planDisplayName}
+        {organizationLogoUrl}
+      />
+      <BranchDeploymentStopped
+        {organization}
+        {project}
+        deploymentId={deployment.id}
+        status={deploymentStatus}
+        canManage={!!projectPermissions?.manageDev}
+        {branch}
+        bind:starting
+      />
+    {:else if isReady && deployment?.id && instanceId && runtimeHost && jwt}
+      {#key `${runtimeHost}::${instanceId}::${hasPrimaryDeployment}`}
+        <RuntimeProvider host={runtimeHost} {instanceId} {jwt}>
           {#if !inProjectWelcomePage}
-            <WelcomeRedirector />
+            <ProjectHeader
+              {organization}
+              {project}
+              {projectPermissions}
+              manageOrgAdmins={organizationPermissions?.manageOrgAdmins}
+              manageOrgMembers={organizationPermissions?.manageOrgMembers}
+              readProjects={organizationPermissions?.readProjects}
+              {primaryBranch}
+              {planDisplayName}
+              {organizationLogoUrl}
+              editContext={true}
+              editSessionDeploymentId={deployment.id}
+              editSessionJwt={jwt}
+            />
+            <EditSessionTimeoutBanner
+              usedOn={deployment.usedOn}
+              {devTtlSeconds}
+            />
           {/if}
-          <slot />
-        </FileAndResourceWatcher>
-      </RuntimeProvider>
-    {/key}
-  {:else}
-    <SlimProjectHeader
-      {organization}
-      {project}
-      readProjects={organizationPermissions?.readProjects}
-      {planDisplayName}
-      {organizationLogoUrl}
-    />
-    <ErrorPage
-      statusCode={404}
-      header="No active edit session"
-      body="This editing session is no longer active. Use the Edit button to start a new one."
-    />
-  {/if}
-</div>
+          <FileAndResourceWatcher
+            lifecycle="none"
+            {onBeforeReconnect}
+            errorBody="Lost connection to the editing environment. Try ending the session and starting a new one."
+          >
+            {#if !inProjectWelcomePage}
+              <WelcomeRedirector />
+            {/if}
+            <slot />
+          </FileAndResourceWatcher>
+        </RuntimeProvider>
+      {/key}
+    {:else}
+      <SlimProjectHeader
+        {organization}
+        {project}
+        readProjects={organizationPermissions?.readProjects}
+        {planDisplayName}
+        {organizationLogoUrl}
+      />
+      <ErrorPage
+        statusCode={404}
+        header="No active edit session"
+        body="This editing session is no longer active. Use the Edit button to start a new one."
+      />
+    {/if}
+  </div>
+{/if}
 
 {#if $overlay !== null}
   <BlockingOverlayContainer
diff --git a/web-admin/src/routes/[organization]/[project]/-/invite/+page.svelte b/web-admin/src/routes/[organization]/[project]/-/invite/+page.svelte
index cc6b53afccce..15ff3f706499 100644
--- a/web-admin/src/routes/[organization]/[project]/-/invite/+page.svelte
+++ b/web-admin/src/routes/[organization]/[project]/-/invite/+page.svelte
@@ -66,7 +66,9 @@
   }
 </script>
 
-<div class="flex flex-col gap-5 w-[600px] my-16 sm:my-32 md:my-64 mx-auto">
+<div
+  class="flex flex-col gap-5 w-full sm:w-[600px] my-16 sm:my-32 md:my-64 mx-auto"
+>
   <div class="text-xl text-center w-full">{m.auth_invite_teammates()}</div>
   <div class="flex flex-col gap-y-1">
     <div class="flex flex-row items-center">
diff --git a/web-admin/src/routes/[organization]/[project]/-/reports/[report]/+page.svelte b/web-admin/src/routes/[organization]/[project]/-/reports/[report]/+page.svelte
index efd82da888ca..6e8b731d8eed 100644
--- a/web-admin/src/routes/[organization]/[project]/-/reports/[report]/+page.svelte
+++ b/web-admin/src/routes/[organization]/[project]/-/reports/[report]/+page.svelte
@@ -11,7 +11,7 @@
 
 <ContentContainer>
   <div class="flex justify-center">
-    <div class="w-[960px] flex flex-col items-start gap-y-9">
+    <div class="w-full max-w-[960px] flex flex-col items-start gap-y-9">
       <ReportMetadata {organization} {project} {report} />
       <ReportHistoryTable {report} />
     </div>
diff --git a/web-admin/src/routes/[organization]/[project]/-/share/[token]/explore/[dashboard]/+page.svelte b/web-admin/src/routes/[organization]/[project]/-/share/[token]/explore/[dashboard]/+page.svelte
index 75ce89625ea6..595d292d51ab 100644
--- a/web-admin/src/routes/[organization]/[project]/-/share/[token]/explore/[dashboard]/+page.svelte
+++ b/web-admin/src/routes/[organization]/[project]/-/share/[token]/explore/[dashboard]/+page.svelte
@@ -66,6 +66,7 @@
         <Dashboard
           {exploreName}
           metricsViewName={explore.metricsView.meta.name.name}
+          phoneLayout
         />
       </DashboardStateManager>
     </StateManagersProvider>
diff --git a/web-admin/src/routes/[organization]/[project]/explore/[dashboard]/+page.svelte b/web-admin/src/routes/[organization]/[project]/explore/[dashboard]/+page.svelte
index 8a30baa4d630..aa16e21d999d 100644
--- a/web-admin/src/routes/[organization]/[project]/explore/[dashboard]/+page.svelte
+++ b/web-admin/src/routes/[organization]/[project]/explore/[dashboard]/+page.svelte
@@ -122,7 +122,7 @@
           disableMostRecentDashboardState={$disablePersistentDashboardState}
           disableInitSessionDashboardState={$disablePersistentDashboardState}
         >
-          <Dashboard {metricsViewName} {exploreName} />
+          <Dashboard {metricsViewName} {exploreName} phoneLayout />
         </DashboardStateManager>
       </StateManagersProvider>
     {/key}
diff --git a/web-admin/tests/mobile-smoke.spec.ts b/web-admin/tests/mobile-smoke.spec.ts
new file mode 100644
index 000000000000..1556ef4b5473
--- /dev/null
+++ b/web-admin/tests/mobile-smoke.spec.ts
@@ -0,0 +1,133 @@
+import { expect, type Page } from "@playwright/test";
+import { test } from "./setup/base";
+
+/**
+ * Mobile smoke manifest.
+ *
+ * web-admin serves the real device viewport on every route (see `app.html`).
+ * The route ids listed here are the surfaces that were explicitly audited for
+ * narrow screens and are exercised below at a phone viewport. When a new
+ * surface is made responsive, add its route id here and a matching smoke URL
+ * to {@link TEST_ROUTES}; the coverage guard fails otherwise.
+ *
+ * `/[organization]/[project]/-/ai/[conversationId]` is intentionally not
+ * listed yet: its layout is covered by the `-/ai` surface, and the smoke test
+ * has no seeded conversation to visit.
+ */
+const MOBILE_READY_ROUTES: string[] = [
+  "/[organization]/[project]",
+  "/[organization]/[project]/-/ai",
+  "/[organization]/[project]/explore/[dashboard]",
+  "/[organization]/[project]/canvas/[dashboard]",
+];
+
+/**
+ * Maps each mobile-ready SvelteKit route id to a concrete URL in the e2e
+ * environment (org `e2e`, projects `openrtb` / `adbids` seeded by `setup`).
+ */
+const TEST_ROUTES: Record<string, string> = {
+  "/[organization]/[project]": "/e2e/openrtb",
+  "/[organization]/[project]/-/ai": "/e2e/openrtb/-/ai",
+  "/[organization]/[project]/explore/[dashboard]":
+    "/e2e/openrtb/explore/auction_explore",
+  "/[organization]/[project]/canvas/[dashboard]":
+    "/e2e/openrtb/canvas/bids_canvas",
+};
+
+/**
+ * Asserts that the page produces no horizontal overflow at the current
+ * viewport width: neither the document scrolls horizontally, nor does any
+ * visible element extend past the right edge of the viewport.
+ * Elements inside a scroll or clip container are left to that container,
+ * since `getBoundingClientRect` reports their unclipped box;
+ * the container itself is still checked.
+ * Offending element selectors are included in the failure message.
+ */
+async function assertNoHorizontalOverflow(page: Page) {
+  const result = await page.evaluate(() => {
+    const viewportWidth = window.innerWidth;
+    const doc = document.scrollingElement;
+    const documentScrolls = doc ? doc.scrollWidth > doc.clientWidth + 1 : false;
+
+    const describe = (el: Element): string => {
+      const tag = el.tagName.toLowerCase();
+      const id = el.id ? `#${el.id}` : "";
+      const cls =
+        typeof el.className === "string" && el.className.trim()
+          ? `.${el.className.trim().split(/\s+/).join(".")}`
+          : "";
+      return `${tag}${id}${cls}`;
+    };
+
+    const insideOverflowContainer = (el: Element): boolean => {
+      let ancestor = el.parentElement;
+      while (ancestor && ancestor !== document.body) {
+        if (getComputedStyle(ancestor).overflowX !== "visible") return true;
+        ancestor = ancestor.parentElement;
+      }
+      return false;
+    };
+
+    // Collect visible elements whose right edge extends past the viewport.
+    // Cap the list so a systemic failure does not produce an unwieldy message.
+    const offenders: string[] = [];
+    for (const el of Array.from(document.querySelectorAll("*"))) {
+      const rect = el.getBoundingClientRect();
+      if (rect.width === 0 || rect.height === 0) continue;
+      if (rect.right > viewportWidth + 1 && !insideOverflowContainer(el)) {
+        offenders.push(`${describe(el)} (right=${Math.round(rect.right)})`);
+        if (offenders.length >= 10) break;
+      }
+    }
+
+    return {
+      viewportWidth,
+      scrollWidth: doc?.scrollWidth ?? null,
+      clientWidth: doc?.clientWidth ?? null,
+      documentScrolls,
+      offenders,
+    };
+  });
+
+  expect(
+    result.documentScrolls,
+    `Document scrolls horizontally at ${result.viewportWidth}px ` +
+      `(scrollWidth=${result.scrollWidth}, clientWidth=${result.clientWidth}).`,
+  ).toBe(false);
+
+  expect(
+    result.offenders,
+    `Elements overflow the ${result.viewportWidth}px viewport:\n` +
+      result.offenders.map((o) => `  - ${o}`).join("\n"),
+  ).toEqual([]);
+}
+
+test.describe("Mobile smoke", () => {
+  // Coverage guard: every mobile-ready route must have a smoke URL so it is
+  // actually exercised here. Fails loudly when a route is added to
+  // MOBILE_READY_ROUTES without a corresponding TEST_ROUTES entry.
+  test("every mobile-ready route has a smoke URL", () => {
+    const missing = MOBILE_READY_ROUTES.filter(
+      (routeId) => !(routeId in TEST_ROUTES),
+    );
+    expect(
+      missing,
+      `Routes in MOBILE_READY_ROUTES missing a TEST_ROUTES entry: ` +
+        missing.join(", "),
+    ).toEqual([]);
+  });
+
+  if (MOBILE_READY_ROUTES.length === 0) {
+    // Keep the suite green (and explicit) until the first surface is migrated.
+    test.skip("no mobile-ready routes yet", () => {});
+  }
+
+  for (const routeId of MOBILE_READY_ROUTES) {
+    test(`no horizontal overflow: ${routeId}`, async ({ page }) => {
+      const url = TEST_ROUTES[routeId];
+      test.skip(!url, `No TEST_ROUTES entry for ${routeId}`);
+      await page.goto(url);
+      await assertNoHorizontalOverflow(page);
+    });
+  }
+});
diff --git a/web-common/src/components/markdown/Markdown.svelte b/web-common/src/components/markdown/Markdown.svelte
index 3554b7867d5d..380fd2c959eb 100644
--- a/web-common/src/components/markdown/Markdown.svelte
+++ b/web-common/src/components/markdown/Markdown.svelte
@@ -147,9 +147,16 @@
   }
 
   :global(.chat-markdown table) {
-    @apply w-full text-xs;
+    @apply text-xs;
     border-collapse: collapse;
     margin-bottom: 0.5rem;
+    /* A block-level table scrolls within the message instead of stretching the page.
+       Its rows sit in an anonymous table box that sizes to its content,
+       so the table is as wide as its content, like GitHub's markdown tables. */
+    display: block;
+    width: max-content;
+    max-width: 100%;
+    overflow-x: auto;
   }
 
   :global(.chat-markdown th) {
diff --git a/web-common/src/components/navigation/breadcrumbs/BreadcrumbItem.svelte b/web-common/src/components/navigation/breadcrumbs/BreadcrumbItem.svelte
index 04466d9d99d1..8e5627cccaac 100644
--- a/web-common/src/components/navigation/breadcrumbs/BreadcrumbItem.svelte
+++ b/web-common/src/components/navigation/breadcrumbs/BreadcrumbItem.svelte
@@ -71,9 +71,9 @@
   }
 </script>
 
-<li class="flex items-center gap-x-2 px-2">
+<li class="flex items-center gap-x-2 px-2 min-w-0">
   <div
-    class="flex flex-row gap-x-1 items-center"
+    class="flex flex-row gap-x-1 items-center min-w-0"
     aria-label="Breadcrumb navigation, level {depth}"
   >
     {#if selected}
@@ -85,11 +85,11 @@
           ? "#top"
           : linkMaker(currentPath, depth, currentId, selected, "")}
         class={[
-          "text-fg-muted hover:text-fg-secondary flex flex-row items-center gap-x-2",
+          "text-fg-muted hover:text-fg-secondary flex flex-row items-center gap-x-2 min-w-0",
           { current: isCurrentPage },
         ]}
       >
-        <span>{selected?.label}</span>
+        <span class="truncate">{selected?.label}</span>
       </a>
       {#if selected?.pill}
         <Chip type="dimension" label={selected.pill} readOnly compact>
diff --git a/web-common/src/components/navigation/breadcrumbs/Breadcrumbs.svelte b/web-common/src/components/navigation/breadcrumbs/Breadcrumbs.svelte
index bd21b81152a5..e6bfd0cf750e 100644
--- a/web-common/src/components/navigation/breadcrumbs/Breadcrumbs.svelte
+++ b/web-common/src/components/navigation/breadcrumbs/Breadcrumbs.svelte
@@ -11,9 +11,9 @@
   $: currentPage = currentPath.findLastIndex(Boolean);
 </script>
 
-<nav class="flex gap-x-2 items-center">
+<nav class="flex gap-x-2 items-center min-w-0">
   <slot name="icon" />
-  <ol class="flex flex-row items-center">
+  <ol class="flex flex-row items-center min-w-0 overflow-hidden">
     {#each pathParts as pathOptions, depth (depth)}
       {@const current = currentPath[depth]}
       {#if current && pathOptions?.options}
diff --git a/web-common/src/components/navigation/breadcrumbs/TwoTieredBreadcrumbItem.svelte b/web-common/src/components/navigation/breadcrumbs/TwoTieredBreadcrumbItem.svelte
index 3f06d36732a6..a2afed09d2d9 100644
--- a/web-common/src/components/navigation/breadcrumbs/TwoTieredBreadcrumbItem.svelte
+++ b/web-common/src/components/navigation/breadcrumbs/TwoTieredBreadcrumbItem.svelte
@@ -27,15 +27,15 @@
   }
 </script>
 
-<li class="flex items-center gap-x-2 px-2">
-  <div class="flex flex-row gap-x-1 items-center">
+<li class="flex items-center gap-x-2 px-2 min-w-0">
+  <div class="flex flex-row gap-x-1 items-center min-w-0">
     {#if selected}
       <a
         href={isCurrentPage ? "#top" : undefined}
-        class="text-fg-secondary hover:text-fg-secondary flex flex-row items-center gap-x-2"
+        class="text-fg-secondary hover:text-fg-secondary flex flex-row items-center gap-x-2 min-w-0"
         class:current={isCurrentPage}
       >
-        <span>{selected?.label}</span>
+        <span class="truncate">{selected?.label}</span>
       </a>
     {/if}
     {#if options.size > 1}
diff --git a/web-common/src/components/table-toolbar/TableToolbar.svelte b/web-common/src/components/table-toolbar/TableToolbar.svelte
index 010cd22917fa..bbefac304e3f 100644
--- a/web-common/src/components/table-toolbar/TableToolbar.svelte
+++ b/web-common/src/components/table-toolbar/TableToolbar.svelte
@@ -28,7 +28,9 @@
 </script>
 
 <section class="flex flex-col w-full gap-y-2">
-  <div class="flex flex-row items-center gap-x-2.5">
+  <div
+    class="flex flex-row flex-wrap items-center gap-x-2.5 gap-y-2 sm:flex-nowrap"
+  >
     <div class="flex flex-row items-center gap-x-2.5 shrink-0">
       <TableToolbarFilterDropdown {filterGroups} />
 
diff --git a/web-common/src/features/canvas/CanvasDashboardWrapper.svelte b/web-common/src/features/canvas/CanvasDashboardWrapper.svelte
index f618c704e720..bfbc85f9c1fe 100644
--- a/web-common/src/features/canvas/CanvasDashboardWrapper.svelte
+++ b/web-common/src/features/canvas/CanvasDashboardWrapper.svelte
@@ -125,7 +125,7 @@
         <div
           class="w-full h-fit flex flex-col items-center row-container relative"
           style:max-width="{maxWidth}px"
-          style:min-width="420px"
+          style:min-width="min(420px, 100%)"
           bind:contentRect
         >
           {@render children()}
diff --git a/web-common/src/features/canvas/components/kpi/KPI.svelte b/web-common/src/features/canvas/components/kpi/KPI.svelte
index 3e39562425ad..1a9dc1342189 100644
--- a/web-common/src/features/canvas/components/kpi/KPI.svelte
+++ b/web-common/src/features/canvas/components/kpi/KPI.svelte
@@ -393,8 +393,10 @@
     container-type: inline-size;
   }
 
+  /* The sparkline sits beside the number while both fit and wraps below it
+     when the card is too narrow, so the number never has to give way. */
   .wrapper.spark-right {
-    @apply flex-row;
+    @apply flex-row flex-wrap;
   }
 
   .data-wrapper {
@@ -403,9 +405,8 @@
   }
 
   .spark-right .data-wrapper {
-    @apply items-start h-full;
-    flex: 0 4 20%;
-    min-width: 0;
+    @apply items-start w-auto;
+    flex: none;
   }
 
   .measure-name {
@@ -422,7 +423,7 @@
   }
 
   .big-number {
-    @apply text-3xl font-medium text-fg-primary;
+    @apply text-3xl font-medium text-fg-primary whitespace-nowrap;
   }
 
   :global(.dark) .big-number {
@@ -441,10 +442,11 @@
     @apply size-full flex items-center justify-center flex-shrink min-h-12;
   }
 
+  /* 128px is SPARKLINE_MIN_WIDTH. */
   .spark-right .sparkline-wrapper {
-    @apply mt-2;
-    flex: 4 1 80%;
-    min-width: 0;
+    @apply mt-2 h-auto self-stretch;
+    flex: 1 1 128px;
+    min-width: 128px;
   }
 
   .comparison-value {
diff --git a/web-common/src/features/chat/core/context/picker/InlineContextPicker.svelte b/web-common/src/features/chat/core/context/picker/InlineContextPicker.svelte
index eff6a27ebe0c..5ab081b2ef53 100644
--- a/web-common/src/features/chat/core/context/picker/InlineContextPicker.svelte
+++ b/web-common/src/features/chat/core/context/picker/InlineContextPicker.svelte
@@ -169,7 +169,8 @@
   }
 
   .dropdown-content {
-    @apply flex flex-col w-[400px] max-h-[500px] overflow-auto;
+    /* Cap the popover width to the viewport so it never overflows on narrow screens. */
+    @apply flex flex-col w-[min(400px,calc(100vw-2rem))] max-h-[500px] overflow-auto;
   }
 
   .inline-chat-navigation {
diff --git a/web-common/src/features/chat/core/input/ChatInput.svelte b/web-common/src/features/chat/core/input/ChatInput.svelte
index 9d741eb53c04..a6c625ce2536 100644
--- a/web-common/src/features/chat/core/input/ChatInput.svelte
+++ b/web-common/src/features/chat/core/input/ChatInput.svelte
@@ -227,6 +227,12 @@
     @apply w-full max-h-32 overflow-auto;
   }
 
+  /* iOS Safari zooms into a focused field whose text is under 16px,
+     so the composer stays at 16px on phones. */
+  .chat-input-container :global(.tiptap) {
+    @apply max-sm:text-[16px];
+  }
+
   :global(.tiptap p.is-editor-empty:first-child::before) {
     content: attr(data-placeholder);
     @apply text-fg-muted pointer-events-none absolute;
@@ -255,4 +261,11 @@
   .chat-input-footer {
     @apply flex flex-row gap-x-2;
   }
+
+  /* Comfortable touch targets on mobile; desktop sizing is unchanged. */
+  @media (max-width: 640px) {
+    .chat-input-footer :global(button) {
+      @apply inline-flex items-center justify-center min-h-[44px] min-w-[44px];
+    }
+  }
 </style>
diff --git a/web-common/src/features/chat/layouts/fullpage/ConversationSidebar.svelte b/web-common/src/features/chat/layouts/fullpage/ConversationSidebar.svelte
index 2d0d5a589146..52f490b6122c 100644
--- a/web-common/src/features/chat/layouts/fullpage/ConversationSidebar.svelte
+++ b/web-common/src/features/chat/layouts/fullpage/ConversationSidebar.svelte
@@ -210,11 +210,32 @@
   }
 
   @media (max-width: 640px) {
+    /* The layout stacks vertically, so the sidebar divides with a bottom
+       border instead of a right one. */
+    .conversation-sidebar {
+      @apply border-r-0 border-b;
+    }
+
     .conversation-sidebar:not(.collapsed) {
       width: 100%;
       height: 200px;
     }
 
+    /* Collapsed: a compact horizontal action bar instead of a vertical
+       icon rail, which would otherwise push the chat far down the page. */
+    .conversation-sidebar.collapsed {
+      @apply flex-row items-center;
+      width: 100%;
+    }
+
+    .collapsed-actions {
+      @apply flex-row;
+    }
+
+    .collapsed-footer {
+      @apply flex-row mt-0 ml-auto;
+    }
+
     .conversation-list {
       display: flex;
       flex-direction: row;
diff --git a/web-common/src/features/chat/layouts/sidebar/ConversationHistoryMenu.svelte b/web-common/src/features/chat/layouts/sidebar/ConversationHistoryMenu.svelte
index eba0b0fd53ca..2cc0014ca3d7 100644
--- a/web-common/src/features/chat/layouts/sidebar/ConversationHistoryMenu.svelte
+++ b/web-common/src/features/chat/layouts/sidebar/ConversationHistoryMenu.svelte
@@ -45,7 +45,7 @@
   </DropdownMenu.Trigger>
 
   <DropdownMenu.Content
-    class="max-h-80 overflow-y-auto flex flex-col gap-y-1"
+    class="max-h-80 max-w-[calc(100vw-2rem)] overflow-y-auto flex flex-col gap-y-1"
     align="end"
   >
     {#if conversations.length === 0}
diff --git a/web-common/src/features/chat/layouts/sidebar/SidebarChat.svelte b/web-common/src/features/chat/layouts/sidebar/SidebarChat.svelte
index c3984bb3e838..71c2ea4bf063 100644
--- a/web-common/src/features/chat/layouts/sidebar/SidebarChat.svelte
+++ b/web-common/src/features/chat/layouts/sidebar/SidebarChat.svelte
@@ -111,4 +111,12 @@
     position: relative;
     flex-shrink: 0;
   }
+
+  /* On narrow viewports the resizable sidebar takes over the full width rather
+     than squeezing the dashboard into an unusable sliver. */
+  @media (max-width: 640px) {
+    .chat-sidebar {
+      width: 100vw;
+    }
+  }
 </style>
diff --git a/web-common/src/features/chat/share/ShareChatPopover.svelte b/web-common/src/features/chat/share/ShareChatPopover.svelte
index 84515c756ae5..91cfd352a638 100644
--- a/web-common/src/features/chat/share/ShareChatPopover.svelte
+++ b/web-common/src/features/chat/share/ShareChatPopover.svelte
@@ -78,7 +78,7 @@
       </svelte:fragment>
     </IconButton>
   </PopoverTrigger>
-  <PopoverContent align="end" class="w-[320px] p-4">
+  <PopoverContent align="end" class="w-[min(320px,calc(100vw-2rem))] p-4">
     <div class="flex flex-col gap-y-3">
       <h3 class="text-sm font-medium text-fg-primary">
         {m.chat_share_conversation()}
diff --git a/web-common/src/features/dashboards/filters/dimension-filters/DimensionFilter.svelte b/web-common/src/features/dashboards/filters/dimension-filters/DimensionFilter.svelte
index d1dcdbde363a..d1034ae93e6f 100644
--- a/web-common/src/features/dashboards/filters/dimension-filters/DimensionFilter.svelte
+++ b/web-common/src/features/dashboards/filters/dimension-filters/DimensionFilter.svelte
@@ -446,7 +446,7 @@
   <DropdownMenu.Content
     align="start"
     {side}
-    class="flex flex-col max-h-96 w-[400px] overflow-hidden p-0"
+    class="flex flex-col max-h-96 w-[min(400px,calc(100vw-2rem))] overflow-hidden p-0"
   >
     <div class="flex flex-col px-3 pt-3">
       {#if yamlConfigProvider.editable}
diff --git a/web-common/src/features/dashboards/time-controls/super-pill/SuperPill.svelte b/web-common/src/features/dashboards/time-controls/super-pill/SuperPill.svelte
index 97c0fb7f71a3..17129287d635 100644
--- a/web-common/src/features/dashboards/time-controls/super-pill/SuperPill.svelte
+++ b/web-common/src/features/dashboards/time-controls/super-pill/SuperPill.svelte
@@ -172,7 +172,16 @@
   .wrapper {
     @apply flex w-fit;
     @apply h-[26px] rounded-full;
-    @apply overflow-hidden;
+    /* The hidden y-axis keeps the pill clip; the x-axis scrolls when the
+       flex row squeezes the pill below its content (phones), so trailing
+       controls stay reachable instead of being clipped away.
+       The scrollbar is hidden: a classic one would take ~15px of the 26px pill on Windows and Linux. */
+    @apply overflow-x-auto overflow-y-hidden;
+    scrollbar-width: none;
+  }
+
+  .wrapper::-webkit-scrollbar {
+    display: none;
   }
 
   /* Match both direct child buttons and buttons inside display:contents wrappers */
diff --git a/web-common/src/features/dashboards/time-controls/super-pill/components/Comparison.svelte b/web-common/src/features/dashboards/time-controls/super-pill/components/Comparison.svelte
index cf8b3632cb90..d99a0f10c66f 100644
--- a/web-common/src/features/dashboards/time-controls/super-pill/components/Comparison.svelte
+++ b/web-common/src/features/dashboards/time-controls/super-pill/components/Comparison.svelte
@@ -143,9 +143,18 @@
     {/snippet}
   </DropdownMenu.Trigger>
 
-  <DropdownMenu.Content align="start" {side} class="p-0 overflow-hidden">
-    <div class="flex">
-      <div class="flex flex-col border-r w-48 p-1">
+  <DropdownMenu.Content
+    align="start"
+    {side}
+    class="p-0 overflow-hidden max-w-[calc(100vw-2rem)]"
+  >
+    <!-- Side-by-side panels overflow phones; they stack and scroll instead. -->
+    <div
+      class="flex flex-col sm:flex-row max-h-[70vh] sm:max-h-none overflow-y-auto sm:overflow-y-visible"
+    >
+      <div
+        class="flex flex-col border-b sm:border-b-0 sm:border-r w-full sm:w-48 p-1"
+      >
         {#if inheritOption}
           <DropdownMenu.Item
             onclick={() => {
@@ -197,7 +206,7 @@
         {/if}
       </div>
       {#if showSelector}
-        <div class="bg-surface-background flex flex-col w-60 p-3">
+        <div class="bg-surface-background flex flex-col w-full sm:w-60 p-3">
           {#if !interval || interval?.isValid}
             <CalendarPlusDateInput
               minTimeGrain={V1TimeGrainToDateTimeUnit[
diff --git a/web-common/src/features/dashboards/time-controls/super-pill/components/RangePicker.svelte b/web-common/src/features/dashboards/time-controls/super-pill/components/RangePicker.svelte
index f7ab84672856..e73cf1fc60f3 100644
--- a/web-common/src/features/dashboards/time-controls/super-pill/components/RangePicker.svelte
+++ b/web-common/src/features/dashboards/time-controls/super-pill/components/RangePicker.svelte
@@ -68,9 +68,17 @@
       </button>
     {/snippet}
   </DropdownMenu.Trigger>
-  <DropdownMenu.Content align="start" {side} class="p-0 overflow-hidden">
-    <div class="flex">
-      <div class="flex flex-col w-48 p-1">
+  <DropdownMenu.Content
+    align="start"
+    {side}
+    class="p-0 overflow-hidden max-w-[calc(100vw-2rem)]"
+  >
+    <!-- Side-by-side panels need 448px; on phones they stack and scroll
+         vertically instead of the calendar being clipped by the popover cap. -->
+    <div
+      class="flex flex-col sm:flex-row max-h-[70vh] sm:max-h-none overflow-y-auto sm:overflow-y-visible"
+    >
+      <div class="flex flex-col w-full sm:w-48 p-1">
         <TimeRangeMenu
           {ranges}
           {selected}
@@ -93,7 +101,9 @@
         />
       </div>
       {#if showSelector}
-        <div class="bg-surface-background border-l flex flex-col w-64 p-3">
+        <div
+          class="bg-surface-background border-t sm:border-t-0 sm:border-l flex flex-col w-full sm:w-64 p-3"
+        >
           <CalendarPlusDateInput
             {interval}
             {zone}
diff --git a/web-common/src/features/dashboards/time-controls/super-pill/components/TimeRangeSearch.svelte b/web-common/src/features/dashboards/time-controls/super-pill/components/TimeRangeSearch.svelte
index c03f6921804f..7c0c8803a6b9 100644
--- a/web-common/src/features/dashboards/time-controls/super-pill/components/TimeRangeSearch.svelte
+++ b/web-common/src/features/dashboards/time-controls/super-pill/components/TimeRangeSearch.svelte
@@ -30,7 +30,7 @@
 
 <div
   class="border-b h-fit pt-2.5 py-0 flex p-3 gap-y-2 flex-col overflow-y-auto"
-  style:width="{width}px"
+  style:width="min({width}px, calc(100vw - 2rem))"
 >
   <form
     class:error={(inError || unableToParse) &&
diff --git a/web-common/src/features/dashboards/time-controls/super-pill/new-time-dropdown/RangePickerV2.svelte b/web-common/src/features/dashboards/time-controls/super-pill/new-time-dropdown/RangePickerV2.svelte
index 209af5496d83..83a8a69649cb 100644
--- a/web-common/src/features/dashboards/time-controls/super-pill/new-time-dropdown/RangePickerV2.svelte
+++ b/web-common/src/features/dashboards/time-controls/super-pill/new-time-dropdown/RangePickerV2.svelte
@@ -322,13 +322,19 @@
       }}
     />
 
+    <!-- With the calendar open the side-by-side panels need 456px; on phones
+         they stack (short scrolling list on top, calendar below) instead of
+         the calendar being squeezed by the fixed-width list. -->
     <div
-      class="flex w-56 max-h-fit"
-      class:!w-[456px]={showCalendarPicker}
+      class="flex flex-col sm:flex-row max-h-fit {showCalendarPicker
+        ? '!w-[min(456px,calc(100vw-2rem))]'
+        : 'w-56'}"
       style:height="470px"
     >
       <div
-        class="flex flex-col w-56 overflow-y-auto overflow-x-hidden flex-none py-1"
+        class="flex flex-col w-full sm:w-56 overflow-y-auto overflow-x-hidden flex-none py-1 {showCalendarPicker
+          ? 'max-sm:h-40'
+          : ''}"
       >
         <div class="overflow-x-hidden">
           {#if inheritOption}
@@ -554,7 +560,9 @@
       </div>
 
       {#if showCalendarPicker}
-        <div class="bg-surface-overlay border-l p-3 size-full overflow-y-auto">
+        <div
+          class="bg-surface-overlay border-t sm:border-t-0 sm:border-l p-3 size-full overflow-y-auto"
+        >
           <CalendarPlusDateInput
             {interval}
             {zone}
diff --git a/web-common/src/features/dashboards/workspace/Dashboard.svelte b/web-common/src/features/dashboards/workspace/Dashboard.svelte
index de679c7dd53a..90d17016817a 100644
--- a/web-common/src/features/dashboards/workspace/Dashboard.svelte
+++ b/web-common/src/features/dashboards/workspace/Dashboard.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
   import CellInspector from "@rilldata/web-common/components/CellInspector.svelte";
+  import CtaContentContainer from "@rilldata/web-common/components/calls-to-action/CTAContentContainer.svelte";
+  import CtaHeader from "@rilldata/web-common/components/calls-to-action/CTAHeader.svelte";
+  import CtaMessage from "@rilldata/web-common/components/calls-to-action/CTAMessage.svelte";
   import ErrorPage from "@rilldata/web-common/components/ErrorPage.svelte";
+  import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
+  import { belowSm } from "@rilldata/web-common/lib/store-utils/media-query-store";
   import {
     extractErrorStatusCode,
     isNotFoundError,
@@ -45,6 +50,10 @@
   export let exploreName: string;
   export let metricsViewName: string;
   export let isEmbedded: boolean = false;
+  // Stacks the dashboard below `sm` and hands the pivot a "use desktop" notice there.
+  // Width alone can't tell a phone from a narrow embed iframe or Rill Developer window,
+  // so only Rill Cloud's own explore route opts in.
+  export let phoneLayout: boolean = false;
   export let embedThemeName: Readable<string | null> | null = null;
 
   // Vertical space reserved below the chart for the chart toolbar, axis, big
@@ -165,22 +174,35 @@
 <ThemeProvider theme={$theme}>
   <article
     class="flex flex-col overflow-y-hidden bg-surface-background"
+    class:phone-layout={phoneLayout}
     bind:clientWidth={exploreContainerWidth}
     class:w-full={$dynamicHeight}
     class:size-full={!$dynamicHeight}
   >
     <div
       id="header"
-      class="border-b w-fit min-w-full flex flex-col bg-surface-subtle slide"
+      class="border-b {phoneLayout
+        ? 'w-full sm:w-fit'
+        : 'w-fit'} min-w-full flex flex-col bg-surface-subtle slide"
       class:left-shift={extraLeftPadding}
     >
       {#if mockUserHasNoAccess}
         <div class="mb-3"></div>
       {:else}
         {#key exploreName}
-          <section class="flex relative justify-between gap-x-4 py-4 pb-6 px-4">
+          <!-- In the phone layout the tab bar leaves the corner overlay (it would sit on
+               top of wrapped filter chips) and flows below the filters. -->
+          <section
+            class="flex relative justify-between gap-x-4 py-4 px-4 {phoneLayout
+              ? 'flex-col sm:flex-row gap-y-2 pb-2 sm:pb-6'
+              : 'pb-6'}"
+          >
             <Filters {timeRanges} {metricsViewName} {hasTimeSeries} />
-            <div class="absolute bottom-0 flex flex-col right-0">
+            <div
+              class="flex flex-col {phoneLayout
+                ? 'self-end sm:absolute sm:bottom-0 sm:right-0'
+                : 'absolute bottom-0 right-0'}"
+            >
               <TabBar {hidePivot} {exploreName} onPivot={$showPivot} />
             </div>
           </section>
@@ -196,20 +218,36 @@
         body="The security policy for this dashboard may make contents invisible to you. If you deploy this dashboard, {$selectedMockUserStore?.email} will see a 404."
       />
     {:else if $showPivot}
-      <PivotDisplay {isEmbedded} />
+      {#if phoneLayout && $belowSm}
+        <!-- The pivot's table and config sidebar don't fit phones, so a notice takes its place
+             and the tab bar above leads back to Explore. `{#if}` keeps the pivot and its queries
+             from mounting behind the notice. -->
+        <div class="flex flex-1 items-center justify-center p-8">
+          <CtaContentContainer>
+            <CtaHeader>{m.pivot_desktop_only_title()}</CtaHeader>
+            <CtaMessage>{m.pivot_desktop_only_message()}</CtaMessage>
+          </CtaContentContainer>
+        </div>
+      {:else}
+        <PivotDisplay {isEmbedded} />
+      {/if}
     {:else}
       <div
-        class="flex gap-x-1 overflow-hidden slide pb-0"
-        class:gap-y-2={showTimeDimensionDetail}
-        class:flex-col={showTimeDimensionDetail}
-        class:flex-row={!showTimeDimensionDetail}
+        class="flex gap-x-1 overflow-hidden slide pb-0 {showTimeDimensionDetail
+          ? 'flex-col gap-y-2'
+          : phoneLayout
+            ? 'flex-col sm:flex-row'
+            : 'flex-row'}"
         class:left-shift={extraLeftPadding}
         class:w-full={$dynamicHeight}
         class:size-full={!$dynamicHeight}
         bind:clientHeight={exploreContainerHeight}
       >
         <div
-          class="flex-none pl-4"
+          class="flex-none pl-4 {phoneLayout && !showTimeDimensionDetail
+            ? 'h-[50vh] overflow-y-auto sm:h-auto sm:overflow-y-visible'
+            : ''}"
+          class:max-w-full={phoneLayout}
           class:pt-2={!showTimeDimensionDetail}
           style:width={showTimeDimensionDetail
             ? "auto"
@@ -254,7 +292,11 @@
             hideStartPivotButton={hidePivot}
           />
         {:else}
-          <div class="relative flex-none bg-border w-[1px]">
+          <div
+            class="relative flex-none bg-border w-[1px] {phoneLayout
+              ? 'hidden sm:block'
+              : ''}"
+          >
             <Resizer
               dimension={$exploreTimeseriesWidth}
               min={MIN_TIMESERIES_WIDTH}
@@ -267,7 +309,10 @@
               }}
             />
           </div>
-          <div class="pt-2 pl-1 overflow-auto w-full">
+          <div
+            class="pt-2 pl-1 overflow-auto w-full"
+            class:min-h-0={phoneLayout}
+          >
             {#if showDimensionTable && selectedDimension}
               <DimensionDisplay
                 dimension={selectedDimension}
@@ -309,4 +354,10 @@
   .left-shift {
     @apply pl-8;
   }
+
+  /* Clears the floating nav-toggle button; phones have no room to spare
+     for the indent and the toggle overlays content anyway. */
+  .phone-layout .left-shift {
+    @apply pl-0 sm:pl-8;
+  }
 </style>
diff --git a/web-common/src/layout/header/Header.svelte b/web-common/src/layout/header/Header.svelte
index 6a866eda1440..3bddd3abfad4 100644
--- a/web-common/src/layout/header/Header.svelte
+++ b/web-common/src/layout/header/Header.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <header
-  class="flex items-center w-full pr-4 pl-2 py-1 bg-surface-base border-b"
+  class="flex flex-wrap gap-y-1 sm:flex-nowrap items-center w-full pr-4 pl-2 py-1 bg-surface-base border-b"
   class:border-transparent={!borderBottom}
 >
   <slot />
diff --git a/web-common/src/layout/header/HeaderLogo.svelte b/web-common/src/layout/header/HeaderLogo.svelte
index 8a6d79fcf0e7..0ab84e649910 100644
--- a/web-common/src/layout/header/HeaderLogo.svelte
+++ b/web-common/src/layout/header/HeaderLogo.svelte
@@ -7,7 +7,9 @@
 
 <a
   {href}
-  class="grid place-content-center rounded {logoUrl ? 'pl-2 pr-2' : 'p-2'}"
+  class="grid place-content-center rounded shrink-0 {logoUrl
+    ? 'pl-2 pr-2'
+    : 'p-2'}"
 >
   {#if logoUrl}
     <img src={logoUrl} alt="logo" class="h-7" />
diff --git a/web-common/src/layout/navigation/Navigation.svelte b/web-common/src/layout/navigation/Navigation.svelte
index 8cd5f442137a..5295d8d32225 100644
--- a/web-common/src/layout/navigation/Navigation.svelte
+++ b/web-common/src/layout/navigation/Navigation.svelte
@@ -13,6 +13,7 @@
   import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
   import { connectorExplorerStore } from "@rilldata/web-common/features/connectors/explorer/connector-explorer-store";
   import { fileArtifacts } from "@rilldata/web-common/features/entity-management/file-artifacts";
+  import { onMount } from "svelte";
   import { writable } from "svelte/store";
   import ConnectorExplorer from "../../features/connectors/explorer/ConnectorExplorer.svelte";
   import AddAssetButton from "../../features/entity-management/add/AddAssetButton.svelte";
@@ -63,6 +64,16 @@
 
     previousWidth = currentWidth;
   }
+
+  onMount(() => {
+    previousWidth = window.innerWidth;
+
+    // handleResize only reacts to resize events, so collapse the sidebar here
+    // for viewports that load below the breakpoint (e.g. direct mobile visits).
+    if (window.innerWidth < 768) {
+      $navigationOpen = null;
+    }
+  });
 </script>
 
 <svelte:window
diff --git a/web-common/src/lib/i18n/messages/en.json b/web-common/src/lib/i18n/messages/en.json
index 4db2ae92acfc..817267147163 100644
--- a/web-common/src/lib/i18n/messages/en.json
+++ b/web-common/src/lib/i18n/messages/en.json
@@ -1161,6 +1161,9 @@
   "edit_continue_editing": "Continue editing",
   "edit_create_and_edit": "Create & edit",
   "edit_describe_changes": "Describe your changes...",
+  "edit_desktop_only_back_link": "Back to project",
+  "edit_desktop_only_message": "Switch to a larger screen to edit this project.",
+  "edit_desktop_only_title": "Editing is available on desktop",
   "edit_env_manage_in_settings": "Manage environment variables in",
   "edit_env_settings_link": "Settings →",
   "edit_existing_branch": "Existing branch",
@@ -1669,6 +1672,8 @@
   "pivot_auto": "Auto",
   "pivot_chip_aria": "{title} pivot chip",
   "pivot_collapse_row": "Collapse row",
+  "pivot_desktop_only_message": "Switch to a larger screen to use the pivot view.",
+  "pivot_desktop_only_title": "Pivot is available on desktop",
   "pivot_dim_label": [
     {
       "declarations": ["input count", "local countPlural = count: plural"],
diff --git a/web-common/src/lib/i18n/messages/es.json b/web-common/src/lib/i18n/messages/es.json
index 1c8aaacf560c..272f7ae4252a 100644
--- a/web-common/src/lib/i18n/messages/es.json
+++ b/web-common/src/lib/i18n/messages/es.json
@@ -1170,6 +1170,9 @@
   "edit_continue_editing": "Continuar editando",
   "edit_create_and_edit": "Crear y editar",
   "edit_describe_changes": "Describe tus cambios...",
+  "edit_desktop_only_back_link": "Volver al proyecto",
+  "edit_desktop_only_message": "Cambia a una pantalla más grande para editar este proyecto.",
+  "edit_desktop_only_title": "La edición está disponible en escritorio",
   "edit_env_manage_in_settings": "Gestiona las variables de entorno en",
   "edit_env_settings_link": "Configuración →",
   "edit_existing_branch": "Rama existente",
@@ -1678,6 +1681,8 @@
   "pivot_auto": "Automático",
   "pivot_chip_aria": "Chip de pivote {title}",
   "pivot_collapse_row": "Contraer fila",
+  "pivot_desktop_only_message": "Cambia a una pantalla más grande para usar la vista de pivote.",
+  "pivot_desktop_only_title": "El pivote está disponible en escritorio",
   "pivot_dim_label": [
     {
       "declarations": ["input count", "local countPlural = count: plural"],
diff --git a/web-common/src/lib/store-utils/media-query-store.spec.ts b/web-common/src/lib/store-utils/media-query-store.spec.ts
new file mode 100644
index 000000000000..1347ff50a6ad
--- /dev/null
+++ b/web-common/src/lib/store-utils/media-query-store.spec.ts
@@ -0,0 +1,49 @@
+import { get } from "svelte/store";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { mediaQueryStore } from "./media-query-store";
+
+function mockMatchMedia(initiallyMatches: boolean) {
+  const listeners = new Set<() => void>();
+  const mediaQueryList = {
+    matches: initiallyMatches,
+    addEventListener: (_: string, listener: () => void) =>
+      listeners.add(listener),
+    removeEventListener: (_: string, listener: () => void) =>
+      listeners.delete(listener),
+  };
+  vi.stubGlobal(
+    "matchMedia",
+    vi.fn(() => mediaQueryList),
+  );
+  return {
+    listeners,
+    change(matches: boolean) {
+      mediaQueryList.matches = matches;
+      listeners.forEach((listener) => listener());
+    },
+  };
+}
+
+describe("mediaQueryStore", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("starts with the current match", () => {
+    mockMatchMedia(true);
+    expect(get(mediaQueryStore("(max-width: 100px)"))).toBe(true);
+  });
+
+  it("follows changes and stops listening when unsubscribed", () => {
+    const media = mockMatchMedia(false);
+    const values: boolean[] = [];
+    const unsubscribe = mediaQueryStore("(max-width: 100px)").subscribe((v) =>
+      values.push(v),
+    );
+    media.change(true);
+    expect(values).toEqual([false, true]);
+
+    unsubscribe();
+    expect(media.listeners.size).toBe(0);
+  });
+});
diff --git a/web-common/src/lib/store-utils/media-query-store.ts b/web-common/src/lib/store-utils/media-query-store.ts
new file mode 100644
index 000000000000..cf28c607b1b3
--- /dev/null
+++ b/web-common/src/lib/store-utils/media-query-store.ts
@@ -0,0 +1,20 @@
+import { readable, type Readable } from "svelte/store";
+
+/**
+ * Tracks whether a CSS media query matches.
+ * Unlike `hidden`/`sm:block` classes, rendering from it with `{#if}` keeps the side of a breakpoint
+ * that isn't shown from mounting at all, along with its queries and connections.
+ */
+export function mediaQueryStore(query: string): Readable<boolean> {
+  return readable(false, (set) => {
+    if (typeof window === "undefined") return;
+    const mediaQueryList = window.matchMedia(query);
+    const update = () => set(mediaQueryList.matches);
+    update();
+    mediaQueryList.addEventListener("change", update);
+    return () => mediaQueryList.removeEventListener("change", update);
+  });
+}
+
+/** Below Tailwind's `sm` breakpoint, matching its `max-sm:` variant. */
+export const belowSm = mediaQueryStore("not all and (min-width: 640px)");