diff --git a/web-admin/playwright.config.ts b/web-admin/playwright.config.ts
index 6b6a7b10b110..6e9e3b36b2a7 100644
--- a/web-admin/playwright.config.ts
+++ b/web-admin/playwright.config.ts
@@ -41,6 +41,18 @@ const config: PlaywrightTestConfig = {
         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..e128fca37994 100644
--- a/web-admin/src/app.html
+++ b/web-admin/src/app.html
@@ -46,10 +46,12 @@
       crossorigin
     />
     <meta charset="utf-8" />
-    <!-- Set the mobile viewport width -->
+    <!-- maximum-scale suppresses the iOS auto-zoom on sub-16px inputs; since
+         iOS 10 Safari ignores it for user-initiated pinch zoom, so it does
+         not restrict accessibility. -->
     <meta
       name="viewport"
-      content="width=1024, initial-scale=1.0, user-scalable=yes"
+      content="width=device-width, initial-scale=1, maximum-scale=1"
     />
     <!-- Set the og image for thumbnail previews -->
     <meta
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/alerts/CreateAlert.svelte b/web-admin/src/features/alerts/CreateAlert.svelte
index ce85a49d1e5d..1cc1609971f3 100644
--- a/web-admin/src/features/alerts/CreateAlert.svelte
+++ b/web-admin/src/features/alerts/CreateAlert.svelte
@@ -61,7 +61,7 @@
       {/snippet}
     </DialogTrigger>
     <DialogContent
-      class="p-0 m-0 w-[802px] max-w-fit rounded-md"
+      class="p-0 m-0 w-[min(802px,calc(100vw-2rem))] max-w-fit rounded-md"
       noClose
       onEscapeKeydown={preventClose}
       onInteractOutside={preventClose}
diff --git a/web-admin/src/features/alerts/EditAlert.svelte b/web-admin/src/features/alerts/EditAlert.svelte
index 6700d78d51d1..fe70a89fa906 100644
--- a/web-admin/src/features/alerts/EditAlert.svelte
+++ b/web-admin/src/features/alerts/EditAlert.svelte
@@ -33,7 +33,7 @@
     {/snippet}
   </DialogTrigger>
   <DialogContent
-    class="p-0 m-0 w-[802px] max-w-fit"
+    class="p-0 m-0 w-[min(802px,calc(100vw-2rem))] max-w-fit"
     noClose
     onEscapeKeydown={preventClose}
     onInteractOutside={preventClose}
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 79e18b03f9bc..a0078ecd9caf 100644
--- a/web-admin/src/features/bookmarks/Bookmarks.svelte
+++ b/web-admin/src/features/bookmarks/Bookmarks.svelte
@@ -183,7 +183,7 @@
       </Button>
     {/snippet}
   </DropdownMenuTrigger>
-  <DropdownMenuContent class="w-[450px]">
+  <DropdownMenuContent class="w-[min(450px,calc(100vw-2rem))]">
     <DropdownMenuItem onclick={() => (showDialog = true)}>
       <div class="flex flex-row gap-x-2 items-center">
         <BookmarkPlusIcon size="16px" strokeWidth={1.5} />
diff --git a/web-admin/src/features/branches/BranchesSection.svelte b/web-admin/src/features/branches/BranchesSection.svelte
index aaa2057b59ea..50b9ee6bfec1 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 ac29cd8a9c18..7e32759d3fb9 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";
 
   export let createMagicAuthTokens: boolean;
@@ -73,16 +74,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 3b77c2beaa36..04933fa188b5 100644
--- a/web-admin/src/features/organizations/user-management/dialogs/ConvertGuestToMemberDialog.svelte
+++ b/web-admin/src/features/organizations/user-management/dialogs/ConvertGuestToMemberDialog.svelte
@@ -75,7 +75,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/organizations/user-management/table/groups/OrgGroupsTable.svelte b/web-admin/src/features/organizations/user-management/table/groups/OrgGroupsTable.svelte
index 5b5256bc1ce7..dc470f815f97 100644
--- a/web-admin/src/features/organizations/user-management/table/groups/OrgGroupsTable.svelte
+++ b/web-admin/src/features/organizations/user-management/table/groups/OrgGroupsTable.svelte
@@ -70,12 +70,16 @@
   $: dynamicTableMaxHeight = data.length > 12 ? `calc(100dvh - 300px)` : "auto";
 </script>
 
-<InfiniteScrollTable
-  {data}
-  {columns}
-  {hasNextPage}
-  {isFetchingNextPage}
-  {onLoadMore}
-  maxHeight={dynamicTableMaxHeight}
-  emptyStateMessage={m.groups_table_empty()}
-/>
+<!-- Wrap in a horizontal scroll container: InfiniteScrollTable's own scroll-container
+     only handles overflow-y, so wide columns would otherwise overflow the viewport. -->
+<div class="overflow-x-auto">
+  <InfiniteScrollTable
+    {data}
+    {columns}
+    {hasNextPage}
+    {isFetchingNextPage}
+    {onLoadMore}
+    maxHeight={dynamicTableMaxHeight}
+    emptyStateMessage={m.groups_table_empty()}
+  />
+</div>
diff --git a/web-admin/src/features/organizations/user-management/table/users/OrgUsersTable.svelte b/web-admin/src/features/organizations/user-management/table/users/OrgUsersTable.svelte
index 486efe927500..f6c02e31defa 100644
--- a/web-admin/src/features/organizations/user-management/table/users/OrgUsersTable.svelte
+++ b/web-admin/src/features/organizations/user-management/table/users/OrgUsersTable.svelte
@@ -154,15 +154,19 @@
   };
 </script>
 
-<InfiniteScrollTable
-  data={safeData}
-  {columns}
-  hasNextPage={usersQuery.hasNextPage || invitesQuery.hasNextPage}
-  isFetchingNextPage={usersQuery.isFetchingNextPage ||
-    invitesQuery.isFetchingNextPage}
-  onLoadMore={handleLoadMore}
-  maxHeight={dynamicTableMaxHeight}
-  emptyStateMessage={m.users_table_empty()}
-  {headerIcons}
-  {scrollToTopTrigger}
-/>
+<!-- Wrap in a horizontal scroll container: InfiniteScrollTable's own scroll-container
+     only handles overflow-y, so wide columns would otherwise overflow the viewport. -->
+<div class="overflow-x-auto">
+  <InfiniteScrollTable
+    data={safeData}
+    {columns}
+    hasNextPage={usersQuery.hasNextPage || invitesQuery.hasNextPage}
+    isFetchingNextPage={usersQuery.isFetchingNextPage ||
+      invitesQuery.isFetchingNextPage}
+    onLoadMore={handleLoadMore}
+    maxHeight={dynamicTableMaxHeight}
+    emptyStateMessage={m.users_table_empty()}
+    {headerIcons}
+    {scrollToTopTrigger}
+  />
+</div>
diff --git a/web-admin/src/features/projects/ProjectTabs.svelte b/web-admin/src/features/projects/ProjectTabs.svelte
index 5709f1a91085..d161def92cfb 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;
@@ -62,6 +63,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);
@@ -79,31 +102,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 1f35ee907455..33f32c1750ce 100644
--- a/web-admin/src/features/projects/header/ProjectHeader.svelte
+++ b/web-admin/src/features/projects/header/ProjectHeader.svelte
@@ -214,7 +214,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 $developerChat && !onEditDashboardPreview}
         <ChatToggle open={developerChatOpen} actions={developerChatActions} />
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/resource-table/ProjectResourcesTable.svelte b/web-admin/src/features/projects/status/resource-table/ProjectResourcesTable.svelte
index 1b438cca7870..b8f66bd40943 100644
--- a/web-admin/src/features/projects/status/resource-table/ProjectResourcesTable.svelte
+++ b/web-admin/src/features/projects/status/resource-table/ProjectResourcesTable.svelte
@@ -240,13 +240,15 @@
   $: tableData = data;
 </script>
 
-<VirtualizedTable
-  data={tableData}
-  {columns}
-  columnLayout="minmax(95px, 108px) minmax(100px, 3fr) 48px minmax(80px, 2fr) minmax(100px, 2fr) 56px"
-  containerHeight={550}
-  emptyText={m.status_no_resources_match_filters()}
-/>
+<div class="overflow-x-auto">
+  <VirtualizedTable
+    data={tableData}
+    {columns}
+    columnLayout="minmax(95px, 108px) minmax(100px, 3fr) 48px minmax(80px, 2fr) minmax(100px, 2fr) 56px"
+    containerHeight={550}
+    emptyText={m.status_no_resources_match_filters()}
+  />
+</div>
 
 <RefreshResourceConfirmDialog
   bind:open={isConfirmDialogOpen}
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 64c77ebacefa..dd8eb4428d62 100644
--- a/web-admin/src/routes/[organization]/-/users/+page.svelte
+++ b/web-admin/src/routes/[organization]/-/users/+page.svelte
@@ -139,7 +139,7 @@
     </div>
   {:else if $orgMemberUsersInfiniteQuery.isSuccess && $orgInvitesInfiniteQuery.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/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 7d93b9b7d695..b4a4fd74aeeb 100644
--- a/web-admin/src/routes/[organization]/-/users/guests/+page.svelte
+++ b/web-admin/src/routes/[organization]/-/users/guests/+page.svelte
@@ -124,7 +124,9 @@
     </div>
   {:else if $orgMemberUsersInfiniteQuery.isSuccess && $orgInvitesInfiniteQuery.isSuccess}
     <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 63d1e8922fa3..03e824af7c0c 100644
--- a/web-admin/src/routes/[organization]/[project]/+page.svelte
+++ b/web-admin/src/routes/[organization]/[project]/+page.svelte
@@ -66,7 +66,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({
@@ -75,7 +75,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 b9ef1836869b..d48b433038d9 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";
@@ -143,87 +148,104 @@
   });
 </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}
-          />
-          <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 below `md`
+     we show a "use desktop" notice instead. `contents` keeps this wrapper out
+     of the box tree at `md` and up, so it doesn't affect the editor's layout. -->
+<div class="hidden md:contents">
+  <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}
+            />
+            <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}
+          <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>
+</div>
+
+<div class="flex md:hidden">
+  <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>
 </div>
 
 {#if $overlay !== null}
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/tests/mobile-smoke.spec.ts b/web-admin/tests/mobile-smoke.spec.ts
new file mode 100644
index 000000000000..c3f1724482cb
--- /dev/null
+++ b/web-admin/tests/mobile-smoke.spec.ts
@@ -0,0 +1,121 @@
+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. 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}`;
+    };
+
+    // 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) {
+        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..a0c636718f90 100644
--- a/web-common/src/components/markdown/Markdown.svelte
+++ b/web-common/src/components/markdown/Markdown.svelte
@@ -150,6 +150,10 @@
     @apply w-full text-xs;
     border-collapse: collapse;
     margin-bottom: 0.5rem;
+    /* Wide tables scroll within the message instead of stretching the page. */
+    display: block;
+    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 706552b77bc5..f6d8b52b0858 100644
--- a/web-common/src/components/navigation/breadcrumbs/BreadcrumbItem.svelte
+++ b/web-common/src/components/navigation/breadcrumbs/BreadcrumbItem.svelte
@@ -70,9 +70,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}
@@ -84,11 +84,11 @@
           ? "#top"
           : linkMaker(currentPath, depth, current, 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 cab84a40e072..cd632beaef86 100644
--- a/web-common/src/features/canvas/CanvasDashboardWrapper.svelte
+++ b/web-common/src/features/canvas/CanvasDashboardWrapper.svelte
@@ -119,7 +119,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
         >
           <slot />
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 c0ac30799969..ba5d82dbe091 100644
--- a/web-common/src/features/chat/core/context/picker/InlineContextPicker.svelte
+++ b/web-common/src/features/chat/core/context/picker/InlineContextPicker.svelte
@@ -156,7 +156,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 f0c3ac36486a..495d820d15ae 100644
--- a/web-common/src/features/chat/core/input/ChatInput.svelte
+++ b/web-common/src/features/chat/core/input/ChatInput.svelte
@@ -214,4 +214,11 @@
   .chat-input-footer {
     @apply flex flex-row;
   }
+
+  /* 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 e3c658d6e748..0a01fe19514d 100644
--- a/web-common/src/features/chat/layouts/fullpage/ConversationSidebar.svelte
+++ b/web-common/src/features/chat/layouts/fullpage/ConversationSidebar.svelte
@@ -205,11 +205,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 a70c1f132846..c677f0dadd86 100644
--- a/web-common/src/features/chat/layouts/sidebar/SidebarChat.svelte
+++ b/web-common/src/features/chat/layouts/sidebar/SidebarChat.svelte
@@ -110,4 +110,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/big-number/MeasuresContainer.svelte b/web-common/src/features/dashboards/big-number/MeasuresContainer.svelte
index ec9c91749532..b9ef6954a05a 100644
--- a/web-common/src/features/dashboards/big-number/MeasuresContainer.svelte
+++ b/web-common/src/features/dashboards/big-number/MeasuresContainer.svelte
@@ -144,7 +144,7 @@
 
 <svelte:window onresize={() => calculateGridColumns()} />
 <div
-  class="overflow-y-scroll"
+  class="overflow-y-scroll max-w-full"
   style:height="calc(100% - {GRID_MARGIN_TOP}px)"
   style:width={containerWidths[numColumns]}
   bind:clientHeight={metricsContainerHeight}
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 c26e3a789511..edcacf4a3721 100644
--- a/web-common/src/features/dashboards/filters/dimension-filters/DimensionFilter.svelte
+++ b/web-common/src/features/dashboards/filters/dimension-filters/DimensionFilter.svelte
@@ -506,7 +506,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 toggleFilterPin || toggleFilterRequired}
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 8787e5365795..48aeeccafd6b 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
@@ -163,7 +163,10 @@
   .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. */
+    @apply overflow-x-auto overflow-y-hidden;
   }
 
   /* 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 3376007a8a62..b2086622286e 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
@@ -130,9 +130,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"
+      >
         {#each timeComparisonOptionsState as option (option.name)}
           {@const preset = TIME_COMPARISON[option.name]}
           {@const selected = selectedLabel === option.name}
@@ -173,7 +182,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 7ba52e612c0a..c9451e8963cd 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
@@ -59,9 +59,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}
@@ -77,7 +85,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 014a4731fbb1..dcdc05825d5f 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
@@ -309,13 +309,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 showDefaultItem && defaultTimeRange}
@@ -521,7 +527,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 2e78e25f02a6..5470ac196e5c 100644
--- a/web-common/src/features/dashboards/workspace/Dashboard.svelte
+++ b/web-common/src/features/dashboards/workspace/Dashboard.svelte
@@ -1,6 +1,10 @@
 <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 {
     extractErrorStatusCode,
     isNotFoundError,
@@ -165,16 +169,22 @@
   >
     <div
       id="header"
-      class="border-b w-fit min-w-full flex flex-col bg-surface-subtle slide"
+      class="border-b w-full sm: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">
+          <!-- On phones the tab bar leaves the corner overlay (it would sit on
+               top of wrapped filter chips) and flows below the filters. -->
+          <section
+            class="flex flex-col sm:flex-row relative justify-between gap-x-4 gap-y-2 py-4 pb-2 sm:pb-6 px-4"
+          >
             <Filters {timeRanges} {metricsViewName} {hasTimeSeries} />
-            <div class="absolute bottom-0 flex flex-col right-0">
+            <div
+              class="self-end sm:absolute sm:bottom-0 sm:right-0 flex flex-col"
+            >
               <TabBar {hidePivot} {exploreName} onPivot={$showPivot} />
             </div>
           </section>
@@ -190,20 +200,31 @@
         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} />
+      <!-- The pivot's table and config sidebar don't fit phones; below sm a
+           notice takes its place and the tab bar above leads back to Explore. -->
+      <div class="hidden sm:contents">
+        <PivotDisplay {isEmbedded} />
+      </div>
+      <div class="flex sm:hidden 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}
       <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 flex-col gap-x-1 overflow-hidden slide pb-0 {showTimeDimensionDetail
+          ? 'gap-y-2'
+          : 'sm: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 max-w-full {showTimeDimensionDetail
+            ? ''
+            : 'h-[50vh] overflow-y-auto sm:h-auto sm:overflow-y-visible'}"
           class:pt-2={!showTimeDimensionDetail}
           style:width={showTimeDimensionDetail
             ? "auto"
@@ -246,7 +267,7 @@
             hideStartPivotButton={hidePivot}
           />
         {:else}
-          <div class="relative flex-none bg-border w-[1px]">
+          <div class="relative flex-none bg-border w-[1px] hidden sm:block">
             <Resizer
               dimension={$exploreTimeseriesWidth}
               min={MIN_TIMESERIES_WIDTH}
@@ -259,7 +280,7 @@
               }}
             />
           </div>
-          <div class="pt-2 pl-1 overflow-auto w-full">
+          <div class="pt-2 pl-1 overflow-auto w-full min-h-0">
             {#if showDimensionTable && selectedDimension}
               <DimensionDisplay
                 dimension={selectedDimension}
@@ -297,6 +318,8 @@
 
 <style lang="postcss">
   .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. */
+    @apply 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 76f5273c2a90..51fe4c00a5de 100644
--- a/web-common/src/lib/i18n/messages/en.json
+++ b/web-common/src/lib/i18n/messages/en.json
@@ -973,6 +973,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",
@@ -1433,6 +1436,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 59c416bdf29a..e87a893bdd8e 100644
--- a/web-common/src/lib/i18n/messages/es.json
+++ b/web-common/src/lib/i18n/messages/es.json
@@ -982,6 +982,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",
@@ -1442,6 +1445,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"],