From be23422e5b5969ddea312921aed2cb892d3ca9ef Mon Sep 17 00:00:00 2001
From: ktx-vaidehi <134508096+ktx-vaidehi@users.noreply.github.com>
Date: Fri, 11 Sep 2026 14:00:35 +0000
Subject: [PATCH] feat(ui): responsive mobile/tablet support across the app
 (#13763)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .claude/skills/ui-architect/SKILL.md          |  65 ++++-
 .../references/component-catalog.md           |   4 +
 .../ui-architect/references/conventions.md    |   6 +-
 .../references/core-controls-table.md         |   1 +
 .../ui-architect/references/house-rules.md    |   2 +-
 .../references/overlay-navigation.md          |   3 +
 .../ui-architect/references/page-recipes.md   |  47 ++-
 .../ui-architect/references/responsive.md     | 276 ++++++++++++++++++
 scripts/translations/.translation_state.json  |   4 +
 web/src/components/DateTime.vue               |  45 ++-
 web/src/components/Header.vue                 |  30 +-
 web/src/components/MenuLink.vue               |  19 +-
 web/src/components/O2AIChat.vue               |   2 +-
 web/src/components/OrganizationSelector.vue   |   2 +-
 .../about/FeatureComparisonTable.vue          |   2 +-
 web/src/components/alerts/AddAlert.vue        |  14 +-
 web/src/components/alerts/AddTemplate.vue     |   4 +-
 .../components/alerts/AlertGroupsTable.vue    |   2 +-
 web/src/components/alerts/AlertHistory.vue    |  74 ++++-
 .../components/alerts/AlertHistoryDrawer.vue  |   2 +-
 web/src/components/alerts/AlertInsights.vue   |   4 +-
 web/src/components/alerts/AlertList.vue       | 115 ++++++--
 .../components/alerts/AlertSectionTabs.vue    |   4 +-
 .../alerts/AlertsDestinationList.vue          |  69 ++++-
 .../components/alerts/DependencyEntityRow.vue |   2 +-
 .../alerts/ExternalAlertSourcesList.vue       |  60 ++++
 web/src/components/alerts/ImportAlert.vue     |  16 +-
 .../components/alerts/ImportDestination.vue   |   6 +-
 web/src/components/alerts/ImportTemplate.vue  |   6 +-
 web/src/components/alerts/IncidentList.vue    |  54 +++-
 .../alerts/PipelinesDestinationList.vue       |  36 +++
 web/src/components/alerts/TemplateList.vue    |  89 +++++-
 web/src/components/common/AppTabs.vue         |   9 +-
 web/src/components/common/BaseImport.vue      |   8 +-
 web/src/components/common/KpiCard.vue         |  24 +-
 web/src/components/common/KpiCardRow.vue      |   7 +-
 .../components/common/sidebar/FolderList.vue  | 266 +++++++++++------
 .../dashboards/OverrideConfigPopup.vue        |   2 +-
 .../components/dashboards/PanelContainer.vue  |   6 +-
 .../dashboards/PanelEditor/PanelEditor.vue    | 141 ++++++++-
 .../dashboards/addPanel/ChartSelection.vue    |   6 +-
 .../addPanel/DashboardGeoMapsQueryBuilder.vue |  12 +-
 .../addPanel/DashboardMapsQueryBuilder.vue    |   8 +-
 .../addPanel/DashboardQueryBuilder.vue        |  22 +-
 .../addPanel/DashboardQueryEditor.vue         |   6 +-
 .../addPanel/DashboardSankeyChartBuilder.vue  |  12 +-
 .../dashboards/addPanel/PanelFieldList.vue    |   9 +-
 .../dashboards/addPanel/PanelSidebar.vue      |   2 +-
 .../dashboards/addPanel/QueryTypeSelector.vue |   2 +-
 .../dashboards/addPanel/ShowLegendsPopup.vue  |   2 +-
 .../dynamicFunction/DynamicFunctionPopUp.vue  |   6 +-
 .../dashboards/panels/ChartRenderer.vue       |  36 +++
 .../dashboards/panels/TableRenderer.vue       |   7 +
 .../settings/AddSettingVariable.vue           |   4 +-
 .../dashboards/settings/TabsSettings.vue      |  38 +++
 .../dashboards/settings/VariableSettings.vue  |  36 +++
 .../components/dashboards/tabs/TabList.vue    |   2 +-
 .../dashboards/viewPanel/ViewPanel.vue        |  17 +-
 web/src/components/dbm/DbmInsightStrip.vue    |   2 +-
 web/src/components/dbm/DbmRefreshButton.vue   |   2 +-
 web/src/components/dbm/DbmRowActions.vue      |  31 +-
 web/src/components/dbm/DbmScopeFilters.vue    |   4 +-
 .../components/dbm/DbmTableToolbar.spec.ts    |   4 +-
 web/src/components/dbm/DbmTableToolbar.vue    |   6 +-
 web/src/components/functions/AddFunction.vue  |  13 +-
 .../functions/EnrichmentTableList.vue         |  76 ++++-
 web/src/components/functions/FunctionList.vue |  48 ++-
 .../components/functions/FunctionsToolbar.vue |   4 +-
 web/src/components/iam/IngestionTokens.vue    |   2 +-
 web/src/components/iam/SyntheticsTokens.vue   |   2 +-
 web/src/components/iam/groups/AppGroups.vue   |  39 ++-
 .../iam/organizations/ListOrganizations.vue   |  39 ++-
 web/src/components/iam/quota/Quota.vue        |  20 +-
 web/src/components/iam/roles/RoleTable.vue    |  37 ++-
 .../serviceAccounts/ServiceAccountsList.vue   |  49 +++-
 .../components/iam/users/InvitationList.vue   |  36 ++-
 web/src/components/iam/users/User.vue         |  60 +++-
 .../components/ingestion/AIIntegrations.vue   | 115 +++++++-
 web/src/components/ingestion/Custom.vue       |   2 +-
 .../ingestion/DataSourceSidebarLayout.vue     | 120 +++++++-
 .../ingestion/recommended/AWSQuickSetup.vue   |  12 +-
 .../ingestion/setupCard/SetupCardRenderer.vue |  10 +
 web/src/components/login/Login.vue            |   5 +-
 web/src/components/logstream/schema.vue       |  19 +-
 .../components/pipeline/ImportPipeline.vue    |   2 +-
 .../pipeline/PipelineSectionTabs.vue          |   2 +-
 web/src/components/pipeline/PipelinesList.vue |  32 +-
 .../components/pipelines/BackfillJobsList.vue |  76 ++++-
 .../components/pipelines/PipelineHistory.vue  |   4 +-
 .../promql/components/MetricSelector.vue      |   2 +-
 .../components/PromQLBuilderOptions.vue       |   9 +-
 web/src/components/queries/RunningQueries.vue |   7 +-
 .../components/queries/RunningQueriesList.vue |  35 +++
 web/src/components/reports/CreateReport.vue   |  27 +-
 web/src/components/reports/ReportList.vue     |  86 +++++-
 .../rum/errorTracking/list/ErrorsKpiCards.vue |  22 +-
 .../sessionReplay/SessionsMetricsStrip.vue    |  23 +-
 web/src/components/settings/AiToolsets.vue    |  37 ++-
 web/src/components/settings/CipherKeys.vue    |  37 ++-
 .../settings/DiscoveredServices.vue           |   2 +-
 .../components/settings/DomainManagement.vue  |   4 +-
 .../settings/GenAiAgentMappingSettings.vue    |   5 +-
 web/src/components/settings/General.vue       |  20 +-
 .../settings/ImportModelPricing.vue           |   2 +-
 .../settings/ImportRegexPattern.vue           |   2 +-
 .../settings/LlmProvidersSettings.vue         |  33 +++
 .../settings/ModelPricingEditor.vue           |  10 +-
 .../components/settings/ModelPricingList.vue  |  66 ++++-
 web/src/components/settings/Nodes.vue         |  17 +-
 .../settings/OrganizationManagement.vue       |  97 +++++-
 .../settings/OrganizationSettings.vue         |  12 +-
 .../components/settings/RegexPatternList.vue  |  46 ++-
 .../settings/SyntheticsLocationsList.vue      |  54 +++-
 .../components/shared/HomeViewSkeleton.vue    |  14 +-
 .../synthetic-monitoring/MonitorTable.vue     |  43 ++-
 .../synthetics/journey/BrowserJourneyStep.vue |   2 +-
 .../synthetics/journey/JourneySteps.vue       |  58 +++-
 .../results/ProtocolRunSummary.spec.ts        |   1 +
 .../workflows/WorkflowEditor.spec.ts          |   2 +-
 .../components/workflows/WorkflowEditor.vue   |  55 ++--
 web/src/components/workflows/WorkflowRuns.vue |   8 +-
 .../components/workflows/WorkflowsList.vue    |  25 +-
 web/src/composables/useBreakpoint.spec.ts     |  84 ++++++
 web/src/composables/useBreakpoint.ts          |  63 ++++
 .../AIObservability/AgentScopeCascade.vue     |  11 +-
 .../components/AIObservability/AiScopeBar.vue |   2 +-
 .../AIObservability/ExperimentBrowser.vue     |  38 +++
 web/src/enterprise/components/OnlineEvals.vue |   3 +-
 .../components/billings/Billing.vue           |  10 +
 .../components/billings/BillingGroup.vue      |  34 +++
 .../enterprise/components/billings/plans.vue  |   2 +-
 .../enterprise/components/billings/usage.vue  |  16 +-
 .../components/onlineEvals/EvalJobList.vue    |  58 +++-
 .../components/onlineEvals/QualityPage.vue    |   2 +-
 .../onlineEvals/ScoreConfigList.vue           |  44 ++-
 .../components/onlineEvals/ScorerList.vue     |  44 ++-
 .../onlineEvals/quality/QualityKpiCard.vue    |  18 +-
 .../quality/QualityKpiSkeleton.vue            |   2 +-
 .../AIObservability/DatasetDetailPage.vue     |  33 +++
 .../views/AIObservability/DatasetsPage.vue    |  33 +++
 .../views/AIObservability/DiscoveryPage.vue   |  10 +-
 .../views/AIObservability/PlaygroundPage.vue  |  26 +-
 .../views/AIObservability/RemoteTasksPage.vue |  34 +++
 web/src/layouts/MainLayout.vue                |  90 +++++-
 .../core/EmptyState/EmptyStateActionCard.vue  |   2 +-
 .../EmptyState/EmptyStateIngestionCard.vue    |   2 +-
 .../lib/core/EmptyState/OEmptyState.spec.ts   |  15 +-
 web/src/lib/core/EmptyState/OEmptyState.vue   |  10 +-
 web/src/lib/core/Navbar/ONavGroup.vue         |  77 ++++-
 web/src/lib/core/Navbar/ONavbar.vue           |   2 +-
 web/src/lib/core/PageHeader/OPageHeader.vue   | 114 +++++++-
 web/src/lib/core/PageLayout/OPageLayout.vue   |  78 ++++-
 .../lib/core/PageLayout/pageLayoutSidebar.ts  |  25 ++
 .../lib/core/RefreshButton/ORefreshButton.vue |   2 +-
 web/src/lib/core/Table/OTable.vue             |  60 ++--
 web/src/lib/core/Table/cells/OCodeCell.vue    |   2 +-
 .../core/Table/composables/useTableCore.ts    |  43 ++-
 .../Table/sub-components/OTableBodyCell.vue   |   2 +-
 .../Table/sub-components/OTableHeader.vue     |   4 +-
 .../Table/sub-components/OTablePagination.vue |  11 +-
 .../core/ToggleGroup/OToggleGroup.types.ts    |  12 +
 web/src/lib/core/ToggleGroup/OToggleGroup.vue |  68 ++++-
 .../lib/core/ToggleGroup/OToggleGroupItem.vue |  46 ++-
 .../ToggleGroup/OToggleGroupMenuScope.vue     |  38 +++
 web/src/lib/data/StatStrip/OStatCard.vue      |  18 +-
 web/src/lib/data/StatStrip/OStatStrip.vue     |   4 +-
 web/src/lib/forms/Color/OColor.vue            |   2 +-
 web/src/lib/forms/Combobox/OCombobox.vue      |   5 +-
 .../forms/DateTimeRange/ODateTimeRange.vue    |   4 +-
 web/src/lib/forms/Select/OSelect.vue          |   7 +-
 web/src/lib/forms/Time/OTime.vue              |   1 +
 web/src/lib/lists/FieldList/OFieldList.vue    |   2 +-
 web/src/lib/lists/FieldList/OFieldRow.vue     |   2 +-
 web/src/lib/navigation/Tabs/OTab.vue          |   7 +-
 web/src/lib/navigation/Tabs/OTabs.types.ts    |   4 +
 web/src/lib/navigation/Tabs/OTabs.vue         |   2 +
 web/src/lib/overlay/Drawer/ODrawer.types.ts   |   6 +
 web/src/lib/overlay/Drawer/ODrawer.vue        |  44 ++-
 web/src/lib/overlay/Dropdown/ODropdown.vue    |   7 +-
 web/src/lib/overlay/Popover/OPopover.vue      |   7 +-
 web/src/locales/languages/ar-SA.json          |   4 +
 web/src/locales/languages/de-DE.json          |   4 +
 web/src/locales/languages/en-US.json          |   4 +
 web/src/locales/languages/es-ES.json          |   4 +
 web/src/locales/languages/fr-FR.json          |   4 +
 web/src/locales/languages/it-IT.json          |   4 +
 web/src/locales/languages/ja-JP.json          |   4 +
 web/src/locales/languages/ko-KR.json          |   4 +
 web/src/locales/languages/nl-NL.json          |   4 +
 web/src/locales/languages/pl-PL.json          |   4 +
 web/src/locales/languages/pt-PT.json          |   4 +
 web/src/locales/languages/ru-RU.json          |   4 +
 web/src/locales/languages/tr-TR.json          |   4 +
 web/src/locales/languages/vi-VN.json          |   4 +
 web/src/locales/languages/zh-CN.json          |   4 +
 web/src/locales/languages/zh-TW.json          |   4 +
 web/src/plugins/logs/DetailTable.vue          |   6 +-
 web/src/plugins/logs/Index.vue                |  83 +++++-
 web/src/plugins/logs/SearchBar.vue            | 116 +++++++-
 web/src/plugins/logs/SearchHistory.vue        |  12 +-
 web/src/plugins/logs/SearchJobInspector.vue   |  60 ++--
 web/src/plugins/logs/SearchResult.vue         |  47 ++-
 web/src/plugins/logs/SearchSchedulersList.vue |  60 +++-
 .../plugins/metrics/explorer/MetricCard.vue   |   4 +-
 .../metrics/explorer/MetricsExplorer.vue      |  69 ++++-
 .../plugins/pipelines/PipelineFlow.spec.ts    |  65 ++++-
 web/src/plugins/pipelines/PipelineFlow.vue    |  25 +-
 web/src/plugins/traces/Index.vue              |  71 ++++-
 web/src/plugins/traces/IndexList.vue          |   7 +
 .../plugins/traces/LLMInsightsDashboard.vue   |  17 +-
 web/src/plugins/traces/SearchBar.vue          |  26 +-
 web/src/plugins/traces/SearchResult.spec.ts   |   1 +
 web/src/plugins/traces/SearchResult.vue       |  22 +-
 web/src/plugins/traces/ServiceGraph.vue       |  29 +-
 web/src/plugins/traces/ServicesCatalog.vue    |  10 +-
 web/src/plugins/traces/TraceTree.vue          |   7 +
 web/src/test/__mocks__/global.ts              |   3 +-
 web/src/utils/dashboard/constants.ts          |   3 +-
 web/src/views/About.vue                       |  14 +-
 web/src/views/AlertLibrary/AlertLibrary.vue   |  40 ++-
 .../views/Dashboards/DashboardSettings.vue    |  26 +-
 web/src/views/Dashboards/Dashboards.vue       |  63 +++-
 web/src/views/Dashboards/ImportDashboard.vue  |  50 +++-
 .../Dashboards/RenderDashboardCharts.vue      |  33 +++
 web/src/views/Dashboards/ViewDashboard.vue    |  17 +-
 .../Dashboards/addPanel/AddJoinPopUp.vue      |   5 +-
 .../views/Dashboards/addPanel/AddPanel.vue    |  78 +++--
 .../views/DatabaseMonitoring/ActivityPage.vue |   4 +-
 .../DatabaseMonitoring/BlockedQueriesPage.vue |   2 +-
 .../DatabaseMonitoring/DatabasesPage.vue      |   2 +-
 .../DatabaseMonitoring/DeadlocksPage.vue      |   2 +-
 .../views/DatabaseMonitoring/QueriesPage.vue  |   6 +-
 .../views/DatabaseMonitoring/SamplesPage.vue  |  12 +-
 .../DatabaseMonitoring/TableHealthPage.vue    |   4 +-
 web/src/views/Functions.vue                   |   2 +-
 web/src/views/HomeChatHistory.vue             |   2 +-
 web/src/views/HomeView.vue                    |  54 +++-
 web/src/views/Ingestion.vue                   |  21 +-
 web/src/views/LogStream.vue                   |  54 +++-
 web/src/views/OverviewTab.vue                 |   4 +-
 web/src/views/RUM/AppErrors.vue               |  69 ++++-
 web/src/views/RUM/AppSessions.vue             |  64 +++-
 web/src/views/SyntheticMonitoring.vue         |  38 ++-
 web/src/views/UsageTab.vue                    |   3 +-
 web/src/views/slos/SloList.vue                |  68 ++++-
 web/src/views/synthetics/PrivateLocations.vue |  40 +++
 web/src/views/synthetics/RunDetail.vue        |   2 +-
 .../status-pages/StatusPagesList.vue          |  12 +
 248 files changed, 5621 insertions(+), 860 deletions(-)
 create mode 100644 .claude/skills/ui-architect/references/responsive.md
 create mode 100644 web/src/composables/useBreakpoint.spec.ts
 create mode 100644 web/src/composables/useBreakpoint.ts
 create mode 100644 web/src/lib/core/PageLayout/pageLayoutSidebar.ts
 create mode 100644 web/src/lib/core/ToggleGroup/OToggleGroupMenuScope.vue

diff --git a/.claude/skills/ui-architect/SKILL.md b/.claude/skills/ui-architect/SKILL.md
index c876fd634b..0f2eda21c5 100644
--- a/.claude/skills/ui-architect/SKILL.md
+++ b/.claude/skills/ui-architect/SKILL.md
@@ -3,7 +3,7 @@ name: ui-architect
 description: >-
   Authoring guardrails for building ANY new frontend UI in the OpenObserve web
   app (web/) — new views, pages, panels, dialogs, feature components, or edits
-  to existing ones. Enforce six house rules the moment you write Vue/template
+  to existing ones. Enforce seven house rules the moment you write Vue/template
   markup: (1) use OPageHeader for every page/module header, (2) build UI from
   O2 library components in web/src/lib — never bare HTML controls when an O2
   equivalent exists, (3) NEVER write px — always rem, including inside Tailwind class
@@ -29,7 +29,12 @@ description: >-
   is banned) with keys added to web/src/locales/languages/en-US.json; text-carrying
   props/fields are typed I18nText and i18n keys stored as data are typed I18nKey,
   and the ONLY opt-out for a genuinely non-translatable string is raw() — never an
-  eslint-disable. It also settles the recurring
+  eslint-disable, (7) every page is responsive — phones and tablets adapt through
+  max-md:/max-lg: variants and useBreakpoint() while the laptop (≥lg) view stays
+  identical; headers, toolbars and stat strips keep one row, filter toggles collapse
+  to dropdowns (mobile-dropdown), secondary header actions go to #actions-overflow,
+  side panels become drawers that open from their own row, row actions fold into a
+  kebab, and popups fit the viewport. It also settles the recurring
   structural decisions: use OTable for any tabular data, follow the
   view → service → Vuex/local-ref layering for fetching list data, choose the
   right form container (ConfirmDialog vs ODialog vs ODrawer vs a full in-page
@@ -38,7 +43,8 @@ description: >-
   v-model/ref mirrors, automatic submit/loading, correct field-array keys).
   Trigger this whenever the user asks to create, add, build, scaffold, lay out,
   validate, or restyle any screen, component, header, table, list, dialog,
-  drawer, form, field, or panel in the web frontend, or asks where a
+  drawer, form, field, or panel in the web frontend, asks to make any of them
+  work on mobile / phone / tablet / small screens (responsive), or asks where a
   form/table/fetch should live, how to validate a form, how to add a keyboard
   shortcut, how to build a new reusable/common O2 component when nothing existing
   fits (create one in web/src/lib instead of assembling divs and classes),
@@ -61,7 +67,7 @@ token system, one spacing scale.
 
 This skill governs **feature/app UI** — views under `web/src/views` and components
 under `web/src/components` — built from the shared **O2 component library** in
-`web/src/lib`. This page is the **contract + map**: the six laws and the
+`web/src/lib`. This page is the **contract + map**: the seven laws and the
 recurring structural decisions, each in a line or two, each pointing to the
 reference that carries the full rationale, examples, and per-component detail.
 Open the linked reference before you implement that specific thing — don't guess a
@@ -69,10 +75,11 @@ prop, a class string, or a path.
 
 ---
 
-## The six house rules
+## The seven house rules
 
 The always-true laws. Each is stated here in brief; the full **what / why / how +
-code** for all six is in [references/house-rules.md](references/house-rules.md) —
+code** for rules 1–6 is in [references/house-rules.md](references/house-rules.md), and
+rule 7 has its own [references/responsive.md](references/responsive.md) —
 read it once, it is the backbone of everything below.
 
 1. **Every page/module header is `OPageHeader`** — never a hand-rolled
@@ -513,6 +520,33 @@ read it once, it is the backbone of everything below.
    > Toast/notification copy added by this convention lives under `toastMessages.*`,
    > grouped by module.
 
+7. **Every page is responsive — and the laptop view does not move.** New pages
+   are built for 375 px phones and 768 px tablets from the first commit, using the
+   method in [references/responsive.md](references/responsive.md):
+   - **Desktop is frozen.** Responsive rules are additive below a breakpoint —
+     `max-md:` (phone), `max-lg:` / `md:max-lg:` (tablet) — or a JS branch on
+     `useBreakpoint()`'s `isMobile` / `!lgUp`. An unprefixed class change or a bare
+     `md:`/`lg:` class that alters ≥1024 px is a blocker. JS is only for structure
+     (rail → drawer, toggle strip → dropdown, splitter locked shut).
+   - **One row of chrome.** Header: primaries in `#actions`, secondaries in
+     `#actions-overflow` (inline on desktop, one ⋮ below md; `overflow-first` when
+     they precede the CTA). Toolbar: wrapper `max-md:contents`, filter
+     `OToggleGroup mobile-dropdown`, search `min-w-0 flex-1 max-md:min-w-40`.
+     Stat tiles: `OStatStrip` / `KpiCard` (compact to icon + value below lg).
+   - **Side panels open from their own row.** `OPageLayout #sidebar` and
+     `FolderList` already become drawers; any other rail renders in an
+     `ODrawer` with `anchor` set to its trigger's row. Only the main nav opens from
+     the top.
+   - **Tables keep every column** and scroll within the frame (OTable does it);
+     inline row actions get `max-md:hidden` plus one `md:hidden` kebab mirroring them
+     with `<data-test>-menu` items; the footer count is `max-md:hidden`.
+   - **Nothing clipped, nothing hover-only.** Popups use library components and
+     `min(<w>, calc(100vw - 1.5rem))` widths; an `h-full` pane beside a stacked
+     sibling gets `max-md:h-auto max-md:min-h-0`; hover-revealed controls get
+     `max-md:opacity-100`.
+   - **Verify** at 375 / 360 / 768 / 1280 in the in-app browser, and at 1280 compare
+     against main — identical is the bar.
+
 ## Structural decisions
 
 *What* to reach for and *where the code lives* — the recurring calls that
@@ -535,6 +569,7 @@ and each domain has its own reference below.
 | **New page in nav** | a route **+ exactly one** surface (rail item / flyout child / Settings / IAM sub-page) **+** an env/role gate — the route condition, the nav-entry gate, and the SectionRail `visible` all express the same rule | [navigation-menus](references/navigation-menus.md) |
 | **Keyboard shortcuts** | registry-driven — declare in `shortcutRegistry.ts`, bind with `useShortcuts([{ id, handler }])`; never an ad-hoc `keydown` listener or a hardcoded `⌘N` in a template | [keyboard-shortcuts](references/keyboard-shortcuts.md) |
 | **Cancel / Save row** | cancel = `variant="outline"`, save = `variant="primary"`, both `size="sm-action"`, spaced with `gap-2` on the parent | [conventions](references/conventions.md) |
+| **Responsive** | `max-md:`/`max-lg:` variants + `useBreakpoint()` for structure; desktop unchanged; one row of header/toolbar/stat chrome; rails → anchored drawers; row actions → kebab; popups ≤ viewport | [responsive](references/responsive.md) |
 | **Nothing fits** | build a reusable component — generic primitive → a new `O*` in `web/src/lib`; app-specific composition → a named component in `web/src/components`. Never hand-assemble `<div>` + utility classes to fake a component | [creating-components](references/creating-components.md) |
 
 **Dark mode is automatic** — every O2 component and token resolves correctly in
@@ -709,9 +744,21 @@ considering the UI done:
 - [ ] `data-test` on every interactive and key output element, pattern
       `<module>-<filename>-<descriptor>` (see the project FE rules).
 - [ ] New component uses `<script setup lang="ts">`, no `// @ts-nocheck`.
-- [ ] **Comments are one or two lines** — the *why* of a non-obvious choice, not
-      a re-telling of the code or the history of the PR that added it (no ticket
-      ids, "review finding", "as discussed"). Same in specs. See
+- [ ] **Responsive, desktop untouched** — every new/changed class that affects
+      layout is `max-md:` / `max-lg:` gated (run the grep in
+      [responsive § The contract](references/responsive.md#the-contract)); the page
+      was checked at 375, 768 and 1280 and 1280 matches main.
+- [ ] **Phone chrome is one row** — secondary header actions in
+      `#actions-overflow`, toolbar filter `OToggleGroup mobile-dropdown`, search with
+      a `max-md:min-w-*` floor, stat tiles via `OStatStrip` / `KpiCard`.
+- [ ] **Rails and row actions adapt** — side rails render in an `ODrawer` anchored
+      to their trigger's row (or come from `OPageLayout #sidebar` / `FolderList`);
+      inline row actions are `max-md:hidden` with a `md:hidden` kebab mirroring them
+      (`<data-test>-menu`); no hover-only affordance without `max-md:opacity-100`.
+- [ ] **Comments are one line, or none** — the *why* of a non-obvious constraint,
+      never layout narration ("< md this wraps"), a re-telling of the code, or the
+      history of the PR that added it (no ticket ids, "review finding", "as
+      discussed"). Same in specs. See
       [conventions § Comments stay short](references/conventions.md).
 - [ ] `cd web && npm run lint && npm run type-check:app` pass. **`type-check:app`,
       not `type-check`** — the latter runs `tsconfig.vitest.json`, whose `include`
diff --git a/.claude/skills/ui-architect/references/component-catalog.md b/.claude/skills/ui-architect/references/component-catalog.md
index 126f20a74b..f5f0a2ba03 100644
--- a/.claude/skills/ui-architect/references/component-catalog.md
+++ b/.claude/skills/ui-architect/references/component-catalog.md
@@ -23,6 +23,7 @@ markup — don't guess a prop name.
 | [references/page-recipes.md](page-recipes.md) | **Whole-page layouts: the listing/table page (full-height flush skeleton, mandatory search · refresh · column-visibility toggle, filtered-vs-first-run empty state) and the detail/editor page** |
 | [references/navigation-menus.md](navigation-menus.md) | **Registering a new page in navigation: the route composables, the left-rail item (`linksList`), Settings/IAM sub-pages (`SectionRail`), hover-flyout children (`navGroups.ts`), and cloud/enterprise/RBAC gating** |
 | [references/overlay-navigation.md](overlay-navigation.md) | Dialog, Drawer, Dropdown, Popover, Tooltip · Pagination, Stepper, Tabs |
+| [references/responsive.md](responsive.md) | **Phones & tablets with an unchanged laptop view: breakpoints + `useBreakpoint`, one-row header/toolbar/stat chrome, rails → anchored drawers, row-action kebab, popup sizing, clipping and touch gotchas, verification** |
 | [references/feedback-data.md](feedback-data.md) | Banner, Toast (+ useToast), Spinner, Skeleton, InnerLoading · ProgressBar, Timeline, Tree · FieldList |
 
 > **Headless vs form-bound.** Most form controls come as a pair: `OInput`
@@ -54,6 +55,9 @@ markup — don't guess a prop name.
 | Mutually exclusive choice | `ORadioGroup` (few) / `OSelect` (many) | forms-inputs |
 | Instant on/off toggle | `OSwitch` | forms-inputs |
 | Segmented control | `OToggleGroup` | core-controls-table |
+| Filter strip that must fit a phone row | `OToggleGroup mobile-dropdown` | **responsive** |
+| Side rail / field list on a phone | `ODrawer` with `anchor` (or `OPageLayout #sidebar` / `FolderList`) | **responsive** |
+| Secondary header actions on a phone | `OPageHeader`/`OPageLayout` `#actions-overflow` | **responsive** |
 | Build a validated form | `OForm` + Zod schema (binding rules) | **forms-validation** |
 | Read form state for conditional rendering | `useOForm` (owner) / `inject`+`useStore` (child) | forms-validation |
 | Add repeatable/dynamic field rows | `z.array` + indexed `name`, `:key="index"` | forms-validation |
diff --git a/.claude/skills/ui-architect/references/conventions.md b/.claude/skills/ui-architect/references/conventions.md
index 4b8f66919c..ffcc3d8ce3 100644
--- a/.claude/skills/ui-architect/references/conventions.md
+++ b/.claude/skills/ui-architect/references/conventions.md
@@ -148,8 +148,10 @@ conditional.
 
 ### Comments stay short
 
-**One or two lines.** A comment carries the *why* behind a non-obvious choice —
-not a re-telling of the code, and not the history of the PR that added it.
+**One line, or none** (CLAUDE.md, enforced in review). A comment carries the *why*
+behind a non-obvious constraint — not a re-telling of the code, not layout narration
+("< md the toolbar wraps", "matches the header height"), and not the history of the
+PR that added it. If the point needs a second line, it does not belong in a comment.
 
 ```vue
 <!-- good -->
diff --git a/.claude/skills/ui-architect/references/core-controls-table.md b/.claude/skills/ui-architect/references/core-controls-table.md
index 345d66cb04..863832e4f8 100644
--- a/.claude/skills/ui-architect/references/core-controls-table.md
+++ b/.claude/skills/ui-architect/references/core-controls-table.md
@@ -164,6 +164,7 @@ Authoring reference for O2's core control components (Button, Navbar, RefreshBut
 - `disabled` (boolean, default `false`) — disables all items
 - `label` (string) — text label beside the bar; for rich content use the `label` slot
 - `labelPosition` (`"left"` | `"right"` | `"top"`, default `"left"`)
+- `mobileDropdown` (boolean, default `false`) — below md a single-select horizontal group renders as a dropdown whose trigger shows the active item. Use it on every toolbar filter strip so it doesn't claim its own phone row. Data-tests: trigger `<group data-test>-dropdown-btn`, items `<item data-test>-item`. `AppTabs` forwards it. See [responsive § Toolbars](responsive.md#toolbars-one-row-filters-become-a-dropdown).
 **Slots:** `default` (OToggleGroupItem children), `label` (overrides the `label` prop)
 **Emits:** `update:modelValue` (`AcceptableValue | AcceptableValue[]`)
 **Example:**
diff --git a/.claude/skills/ui-architect/references/house-rules.md b/.claude/skills/ui-architect/references/house-rules.md
index e5529d7b64..f6bc555723 100644
--- a/.claude/skills/ui-architect/references/house-rules.md
+++ b/.claude/skills/ui-architect/references/house-rules.md
@@ -1,6 +1,6 @@
 # House rules — full treatment (what · why · how)
 
-> Extracted from the ui-architect contract. The always-loaded summary is in ../SKILL.md § The six house rules — read this for the full rationale and code.
+> Extracted from the ui-architect contract. The always-loaded summary is in ../SKILL.md § The seven house rules — read this for the full rationale and code of rules 1–6; rule 7 (responsive) lives in [responsive.md](responsive.md).
 
 ## The house rules
 
diff --git a/.claude/skills/ui-architect/references/overlay-navigation.md b/.claude/skills/ui-architect/references/overlay-navigation.md
index b62faad842..47c1fa00ea 100644
--- a/.claude/skills/ui-architect/references/overlay-navigation.md
+++ b/.claude/skills/ui-architect/references/overlay-navigation.md
@@ -87,6 +87,9 @@ Rule of thumb: **Tooltip = hint, Dropdown = action menu, Popover = anything free
 - `seamless` (boolean — default `false`; hides the backdrop so the page stays interactive)
 - `lazy` (boolean — default `true`; body slot mounts on open and is destroyed on close — set `false` to preserve child state across open/close)
 - `portalTarget` (string selector | HTMLElement | null — scope the drawer to a container with `position:absolute`; the target needs `position:relative; overflow:hidden`)
+- `anchor` (string selector | HTMLElement — the drawer and its backdrop start at this element's edge instead of the viewport top, so a mobile side panel opens from its trigger's row; re-measured on open and resize)
+- `anchorEdge` (`"top"|"bottom"` — default `"top"`; use `"bottom"` when the trigger lives in the header itself)
+- Below md a `width` is clamped to at least 88% so a "40%" drawer is still usable on a phone. See [responsive § Side panels](responsive.md#side-panels-open-from-their-own-row).
 - Shared with ODialog: `open`, `persistent`, `title`, `subTitle`, `showClose`, `formId`, all `…ButtonLabel`/`…ButtonVariant`/`…ButtonDisabled`/`…ButtonLoading`
 
 **Slots:** `trigger`, `header`, `header-left`, `header-right`, `default`, `footer` (identical to ODialog)
diff --git a/.claude/skills/ui-architect/references/page-recipes.md b/.claude/skills/ui-architect/references/page-recipes.md
index 728f302ed8..a12ed88897 100644
--- a/.claude/skills/ui-architect/references/page-recipes.md
+++ b/.claude/skills/ui-architect/references/page-recipes.md
@@ -27,9 +27,11 @@ Any routed view is: an `OPageHeader` (rule 1) on top, then the page body below
 it, all inside a **full-height flex column** so the header stays put and only the
 body scrolls.
 
-- **Primary page action** (New / Add / Create) and page-level secondary actions
-  (Import, an overflow `ODropdown`) go in the header's **`#actions`** slot as O2
-  buttons — never in the table toolbar.
+- **Primary page action** (New / Add / Create) goes in the header's
+  **`#actions`** slot; page-level secondary actions (Import, Export, an overflow
+  `ODropdown`) go in **`#actions-overflow`** — inline on desktop, behind one ⋮ on
+  phones (add `overflow-first` so they keep their place before the CTA). Never in the
+  table toolbar. See [responsive.md](responsive.md#page-shell-the-header-stays-on-one-row).
 - **The create CTA is label-only — no `icon-left="add"`.** Secondary header
   actions keep their semantic icons (Import → `upload-file`), and in-section
   adders inside the body keep their `+`; it is only the header's create button
@@ -141,21 +143,29 @@ for every list — don't ship a listing page without them.
   data-test="channels-table"
   @row-click="edit"
 >
-  <!-- filters + search on the LEFT of the toolbar (fills the row) -->
+  <!-- filters + search on the LEFT of the toolbar (fills the row); max-md:contents +
+       mobile-dropdown keep the phone toolbar on one row -->
   <template #toolbar>
-    <div class="flex items-center gap-2 w-full">
-      <OToggleGroup :model-value="typeFilter" @update:model-value="filterByType">
+    <div class="flex w-full min-w-0 items-center gap-2 max-md:contents">
+      <OToggleGroup
+        mobile-dropdown
+        :model-value="typeFilter"
+        data-test="channels-type-filter"
+        @update:model-value="filterByType"
+      >
         <OToggleGroupItem value="all" size="sm">{{ t("channels.all") }}</OToggleGroupItem>
         <OToggleGroupItem value="prebuilt" size="sm">{{ t("channels.prebuilt") }}</OToggleGroupItem>
         <OToggleGroupItem value="custom" size="sm">{{ t("channels.custom") }}</OToggleGroupItem>
       </OToggleGroup>
-      <OSearchInput
-        v-model="search"
-        class="flex-1"
-        :placeholder="t('channels.search')"
-        clearable
-        data-test="channels-search"
-      />
+      <div class="min-w-0 flex-1 max-md:min-w-40">
+        <OSearchInput
+          v-model="search"
+          class="w-full"
+          :placeholder="t('channels.search')"
+          clearable
+          data-test="channels-search"
+        />
+      </div>
     </div>
   </template>
 
@@ -352,7 +362,9 @@ visible data.
   blank table.
 - **Primary action** (New) is in the header `#actions`; **row actions**
   (edit/delete/…) are in the `isAction` column as O2 buttons; **destructive
-  delete** goes through `ConfirmDialog` + `useConfirmDialog`.
+  delete** goes through `ConfirmDialog` + `useConfirmDialog`. On phones the inline
+  row buttons are `max-md:hidden` and one `md:hidden` kebab mirrors them — see
+  [responsive § Tables and row actions](responsive.md#tables-and-row-actions).
 - **Keyboard shortcuts** (register + bind — see
   [keyboard-shortcuts.md](keyboard-shortcuts.md)): `n` → create, `/` → focus
   search, `r` → refresh. Advertise `r` via the refresh button's `OTooltip
@@ -403,7 +415,12 @@ form — those go in an `ODialog`/`ODrawer`; see SKILL.md § Forms):
 - [ ] **`:forbidden`** bound to a ref the page sets from a 403 on *its own* list
       request (cleared at the start of every load path), so a denied user sees
       "You don't have access" rather than a create CTA that will 403.
-- [ ] Row actions in an `isAction` column; delete via `ConfirmDialog`.
+- [ ] Row actions in an `isAction` column; delete via `ConfirmDialog`; inline
+      buttons `max-md:hidden` + a `md:hidden` kebab mirroring them (`-menu` data-tests).
+- [ ] **Responsive** — toolbar recipe (`max-md:contents`, `mobile-dropdown`, search
+      floor), footer count `max-md:hidden`, secondary header actions in
+      `#actions-overflow`; checked at 375 / 768 / 1280 with 1280 identical to main
+      (see [responsive.md](responsive.md)).
 - [ ] `n` / `/` / `r` keyboard shortcuts registered and bound.
 - [ ] **Registered in navigation** and gated for the right env/role — see
       [navigation-menus.md](navigation-menus.md).
diff --git a/.claude/skills/ui-architect/references/responsive.md b/.claude/skills/ui-architect/references/responsive.md
new file mode 100644
index 0000000000..87d523ee8e
--- /dev/null
+++ b/.claude/skills/ui-architect/references/responsive.md
@@ -0,0 +1,276 @@
+# Responsive layout — phones, tablets, and an untouched laptop
+
+Every page in `web/` must work on a phone (375 / 360 px wide) and a tablet
+(768 px) **without changing what a laptop shows**. This reference is the method the
+whole app was converted with; new pages follow it from the first commit instead of
+being retro-fitted.
+
+## Table of contents
+
+- [The contract](#the-contract)
+- [Page shell: the header stays on one row](#page-shell-the-header-stays-on-one-row)
+- [Side panels open from their own row](#side-panels-open-from-their-own-row)
+- [Toolbars: one row, filters become a dropdown](#toolbars-one-row-filters-become-a-dropdown)
+- [Tables and row actions](#tables-and-row-actions)
+- [Stat strips and KPI cards: one row](#stat-strips-and-kpi-cards-one-row)
+- [Popups, dropdowns and dialogs fit the viewport](#popups-dropdowns-and-dialogs-fit-the-viewport)
+- [Nothing is clipped](#nothing-is-clipped)
+- [Forms and settings rows](#forms-and-settings-rows)
+- [Touch has no hover](#touch-has-no-hover)
+- [Gotchas that already shipped once](#gotchas-that-already-shipped-once)
+- [Verification](#verification)
+
+---
+
+## The contract
+
+| Tier | Width | Tailwind | JS (`useBreakpoint()`) |
+| --- | --- | --- | --- |
+| Mobile | `< 48rem` (768 px) | `max-md:` | `isMobile` (`!mdUp`) |
+| Tablet | `48rem – 64rem` | `md:max-lg:` | `isTablet` |
+| Desktop / laptop | `≥ 64rem` (1024 px) | unprefixed | `isDesktop` (`lgUp`) |
+
+1. **Desktop is frozen.** Every responsive rule is *additive below a breakpoint*:
+   `max-md:` / `max-lg:` / `md:max-lg:` variants, `@media (max-width: 47.99rem)` in a
+   surviving `<style>` block, or a JS branch on `isMobile` / `!lgUp`. An unprefixed
+   class change, a bare `md:`/`lg:` class, or a new always-on prop/attribute changes
+   the laptop view and is a review blocker — even when it "looks the same".
+2. **CSS first, JS only for structure.** Hiding, wrapping, stacking and resizing are
+   Tailwind variants. Reach for `useBreakpoint()` (`@/composables/useBreakpoint`) only
+   when the *component tree* changes — an inline rail becomes a drawer, a toggle strip
+   becomes a dropdown, a splitter locks shut. It is a singleton (one `matchMedia` pair
+   for the app), so calling it per component is free.
+3. **Reuse the library behaviour.** `OPageLayout`, `OPageHeader`, `OTable`,
+   `OToggleGroup`, `OStatStrip`, `KpiCard`, `FolderList`, `ODrawer` and every popup
+   already adapt. A new page that uses them correctly is mostly responsive for free;
+   hand-rolled equivalents are where phones break.
+
+Audit the desktop surface of a change before calling it done:
+
+```bash
+git diff origin/main -- web/src | grep '^+' | grep -vE 'max-md:|max-lg:|md:max-lg:|@media \(max-width'
+```
+
+Every added line that still carries a class, prop or style is a potential laptop
+change — justify it or gate it.
+
+---
+
+## Page shell: the header stays on one row
+
+`OPageLayout` / `OPageHeader` handle the phone header: the decorative module icon and
+the subtitle drop below md, the title truncates, and below lg the row may wrap
+(desktop keeps its fixed `h-15` row so `h-full` slot content — inline tabs, dividers —
+spans it).
+
+- **Primary actions in `#actions`, secondary ones in `#actions-overflow`.** The
+  overflow slot renders inline on desktop and collapses behind one ⋮ "More" button
+  below md, so the primary CTA keeps the title row. Add **`overflow-first`** when the
+  secondaries sit *before* the primary on desktop (the usual "Import · Export · New"
+  order) — without it they render after `#actions`.
+- **Never reorder the laptop toolbar by moving a control between slots.** If a
+  secondary control sits between primaries on desktop, render it twice:
+  `v-if="!isMobile"` at its desktop position in `#actions`, `v-if="isMobile"` in
+  `#actions-overflow` (see `ViewDashboard.vue`'s `AutoRefreshInterval`).
+- Wide header controls (date pickers) drop their text label below md:
+  `class="max-md:[&_.date-time-label]:hidden"`; labelled buttons go icon-only with
+  `<span class="max-md:hidden">{{ label }}</span>` and keep a `:title` / `OTooltip`.
+- A header should never take more than two rows on a phone. If it does, something
+  belongs in `#actions-overflow` or in the page body.
+
+## Side panels open from their own row
+
+Only the main navigation drawer slides in from the top of the screen. Every other
+side panel opens **from the row its trigger lives in**, so the chrome above it stays
+visible.
+
+- **`OPageLayout #sidebar`** becomes a left `ODrawer` below md. Its ☰ trigger is
+  claimed by the page's first `OPageHeader` (no extra row) and the drawer anchors to
+  the header's bottom edge; it closes on navigation. Don't add your own trigger row.
+  Drawer content mounts lazily, so nothing the page needs on load may depend on a
+  sidebar component's mount side effects.
+- **`FolderList`** collapses to a one-row folder trigger + drawer below md on its own.
+  Pass `:drawer-on-mobile="false"` when it is already inside an `OPageLayout`
+  `#sidebar` (a drawer inside a drawer).
+- **Any other rail** (field list, facet rail, chat history, integration list):
+  hide the inline copy (`max-md:hidden` or `v-if="!isMobile"`) and render the same
+  component in a drawer anchored to its trigger's row:
+
+  ```vue
+  <div data-drawer-anchor="alert-library-toolbar" class="flex items-center gap-3">
+    <OButton class="md:hidden" size="icon-toolbar" icon-left="filter-list"
+      data-test="alert-library-mobile-filters-btn" @click="filtersOpen = true" />
+    …
+  </div>
+  <ODrawer v-if="isMobile" v-model:open="filtersOpen" side="left" size="sm" bleed seamless
+    anchor='[data-drawer-anchor="alert-library-toolbar"]'>
+    <LibraryRail … />
+  </ODrawer>
+  ```
+
+  `anchor` takes a CSS selector or an element; the drawer's top starts at the
+  anchor's top edge, or its bottom edge with `anchor-edge="bottom"` (use that when
+  the trigger sits in the header itself).
+- **Splitters**: lock the rail pane shut on phones (`:limits="isMobile ? [0, 0] : limits"`
+  and set the model to 0), or flip `:horizontal="isMobile"` when both panes should
+  stack. Restore the desktop size when the breakpoint flips back.
+- **A short rail** (Logs / Metrics / Traces, a handful of sections) reads better as a
+  horizontal tab strip than as a drawer: `DataSourceSidebarLayout compact-mode="strip"`,
+  or `OTabs :orientation="isMobile ? 'horizontal' : 'vertical'"`.
+
+## Toolbars: one row, filters become a dropdown
+
+The recipe every list toolbar follows:
+
+```vue
+<template #toolbar>
+  <!-- max-md:contents lets the filter, the search and OTable's own controls share one row -->
+  <div class="flex w-full min-w-0 items-center gap-2 max-md:contents">
+    <OToggleGroup v-model="typeFilter" mobile-dropdown data-test="channels-type-filter">
+      <OToggleGroupItem value="all" size="sm" data-test="channels-type-all">…</OToggleGroupItem>
+      …
+    </OToggleGroup>
+    <div class="min-w-0 flex-1 max-md:min-w-40">
+      <OSearchInput v-model="search" class="w-full" … />
+    </div>
+  </div>
+</template>
+```
+
+- **`mobile-dropdown`** turns a single-select horizontal `OToggleGroup` into a
+  dropdown below md: the trigger shows the active item, the menu lists every item with
+  a check on the active one. Data-tests: trigger `<group data-test>-dropdown-btn`,
+  items `<item data-test>-item`. `AppTabs` forwards the same prop. This is the answer
+  whenever a filter strip would claim its own row — do not hand-roll a second control.
+- **Search needs a floor.** `flex-1` is `basis-0`; without `max-md:min-w-40` (or
+  `min-w-24` in a crowded row) it shrinks to nothing instead of wrapping. A fixed
+  `w-64` search becomes `w-64 max-md:w-auto max-md:min-w-40 max-md:flex-1`.
+- **Page toolbars** (Logs / Metrics / Traces style): the mode toggle becomes an
+  `ODropdown` showing the current mode (see `MetricsExplorer.vue`),
+  `AutoRefreshInterval :is-compact="isMobile"`, text buttons go icon-only, spacers
+  that pin a cluster right are `max-md:hidden` and the cluster takes `max-md:ms-auto`.
+- An `OTable` toolbar wraps below md and right-aligns its own controls (column toggle,
+  `#toolbar-trailing`) automatically.
+
+## Tables and row actions
+
+- **`OTable` handles phones itself**: every column stays, the table scrolls
+  horizontally within its frame, oversized columns are capped at 200 px, the index
+  column is dropped and persisted desktop column sizes are ignored. Tablets get a
+  horizontal-scroll fallback once fill columns can't fit. **Do not hide data columns
+  for mobile** — there is no per-column breakpoint flag.
+- **Row actions → one kebab below md.** Inline action buttons get
+  `class="max-md:hidden"`; add one `ODropdown` whose trigger is `md:hidden` and whose
+  items (each `class="md:hidden"`) mirror the inline buttons — same `v-if`, same
+  `:disabled`, `data-test="<inline data-test>-menu"`:
+
+  ```vue
+  <OButton class="max-md:hidden" icon-left="edit" :data-test="`x-${row.id}-edit`" @click="edit(row)" />
+  <ODropdown side="bottom" align="end">
+    <template #trigger>
+      <OButton icon-left="more-vert" variant="ghost" size="icon-xs-sq" class="md:hidden"
+        data-test="x-row-more-actions" @click.stop />
+    </template>
+    <ODropdownItem icon-left="edit" class="md:hidden" :data-test="`x-${row.id}-edit-menu`"
+      @select="edit(row)">
+      <span>{{ t("common.edit") }}</span>
+    </ODropdownItem>
+  </ODropdown>
+  ```
+
+  If the row already has an overflow menu, prepend the mirrored items (plus an
+  `ODropdownSeparator class="md:hidden"`) instead of adding a second kebab. When every
+  item is conditional, `v-if` the whole `ODropdown` on "any item applies" so a row never
+  opens an empty menu. Hover-only buttons with no click action (a preview tooltip) have
+  no menu counterpart.
+- **Footer on one row**: the plain "N items" count is `max-md:hidden` — the pager's
+  "x – y of z" already says it. Bulk-action buttons stay.
+
+## Stat strips and KPI cards: one row
+
+`OStatStrip` / `OStatCard` and `KpiCard` / `KpiCardRow` compact below lg to icon +
+value; the label moves into the tile's `title`. Use them. A hand-rolled tile row follows
+the same recipe so it never takes two rows of chrome:
+
+- row: `max-lg:flex max-lg:flex-wrap max-lg:gap-1.5` (or `max-md:grid-cols-4` for a
+  fixed four-up);
+- tile: `max-lg:shrink-0 max-lg:basis-auto max-lg:px-1.5 max-lg:py-1`, `:title="label"`;
+- label, caption, trend and sparkline: `max-lg:hidden`; value: `max-lg:text-lg`.
+
+## Popups, dropdowns and dialogs fit the viewport
+
+- Library popups (`ODropdown`, `OPopover`, `OSelect`, `OCombobox`, `OColor`, `OTime`,
+  `ODateTimeRange`): below lg they cap to the available height, scroll, and keep an
+  8 px margin from the viewport edge. Build floating UI from them, not from absolutely
+  positioned divs.
+- **No popup is wider than the phone.** A fixed width becomes
+  `w-156 max-lg:w-[calc(100vw-1.5rem)]`; an inline or constant width uses
+  `min(48rem, calc(100vw - 1.5rem))` (see `FIELD_FUNCTION_MENU_WIDTH`). Multi-pane
+  popups stack with `max-md:flex-col`.
+- `ODrawer` percentage widths clamp to 88% on phones automatically.
+- A hover-opened submenu inside a menu needs a tap path below md (see
+  [Touch has no hover](#touch-has-no-hover)).
+
+## Nothing is clipped
+
+- **`h-full` beside a stacked sibling** inside an `overflow-hidden` column is clipped
+  once the row becomes a column (`max-md:flex-col`): `h-full` beats `flex-1`. Give that
+  pane `max-md:h-auto max-md:min-h-0`.
+- A fixed-height region whose content grows on phones scrolls: `max-lg:overflow-y-auto`,
+  and grids that must size to content use `max-lg:auto-rows-min`.
+- `OEmptyState` already scrolls with safe centering below lg; custom hero content goes
+  in a `max-lg:overflow-y-auto` container.
+- Full-viewport shells use `h-dvh`, never `100vh` (mobile browser chrome overlaps it).
+- Long chips and IDs: `max-md:max-w-full max-md:truncate` on the text, not on the row.
+
+## Forms and settings rows
+
+- Side-by-side fields stack: `max-md:flex-col` / `max-md:grid-cols-1`; label/value
+  settings grids `grid-cols-3 max-lg:grid-cols-1`.
+- Fixed field widths (`w-100`, `min-w-100`, inline `style="width: 30%"`) get
+  `max-md:w-full` / `max-md:min-w-0` (with `!` when an inline style must lose).
+- Tall editors in a drawer or split view: stack panes below lg
+  (`:horizontal="!lgUp"` on the splitter) and give the empty preview pane no height
+  until it has something to show.
+
+## Touch has no hover
+
+- Hover-revealed affordances — `opacity-0 group-hover:opacity-100`,
+  `invisible group-hover:visible`, `hidden group-hover:flex` — get the matching
+  `max-md:opacity-100` / `max-md:visible` / `max-md:flex`.
+- A tap fires `mouseenter` **before** `click`. A hover-opened submenu must ignore hover
+  below md (`@mouseenter="!isMobile && …"`) and toggle on click only, ignoring clicks
+  that land inside the submenu itself.
+- Nav/flyout menus that open on hover become inline accordions below md (`ONavGroup`).
+
+## Gotchas that already shipped once
+
+- **`min-h-*` instead of `h-*` on a desktop row breaks `h-full` children.** Percentage
+  heights need a definite parent height; keep fixed heights on desktop and relax them
+  only below a breakpoint.
+- **An empty flex item still costs a `gap`.** Render wrapper divs only when they have
+  content, or the siblings shift by the gap.
+- **`chevron-down` is not in the icon registry** — it renders an empty box. Use
+  `arrow-drop-down` for dropdown carets.
+- **Container width ≠ viewport width.** A toolbar squeezed by a folder rail at desktop
+  width uses a named container query (`@container/name` + `@max-[38rem]/name:hidden`),
+  not a viewport breakpoint.
+- **Watchers that resize on the breakpoint** (`watch(isMobile, …, { immediate: true })`)
+  must restore the desktop value when flipping back and must not overwrite a user's
+  desktop choice on first load.
+- **Compact labels must stay correct**: shortening a date range may drop the year only
+  when both ends share it.
+
+## Verification
+
+1. In the in-app browser pane (not Playwright) against the local dev server, check
+   **375×812, 360, 768×1024 and 1280** for every page you touched.
+2. At 1280 compare against main side by side — header height, toolbar order, column
+   widths, popup positions. Identical is the bar.
+3. Useful in-page probes (`javascript_tool`): elements with `overflow: hidden` whose
+   `scrollWidth/scrollHeight` exceed their client size (clipping); the number of distinct
+   row tops in the header + toolbar band before the content (chrome rows — aim for one,
+   two at most); popup `getBoundingClientRect()` against `innerWidth/innerHeight`.
+4. `cd web && npm run lint && npm run type-check:app`, plus the specs of every library
+   component you changed. Specs run with a desktop `matchMedia` (min-width queries match),
+   so a mobile branch needs its own test that stubs `matchMedia` to not match.
diff --git a/scripts/translations/.translation_state.json b/scripts/translations/.translation_state.json
index b3b832983d..b66a67127e 100644
--- a/scripts/translations/.translation_state.json
+++ b/scripts/translations/.translation_state.json
@@ -4453,6 +4453,7 @@
     "minuteWithValue": "1b1794a11c6d012e",
     "minutes": "4f846a84e7fc9ef6",
     "months": "09ca7551b3e90626",
+    "more": "d47d7cb0e4f8fd2b",
     "move": "6ecc3df6bffdd06c",
     "name": "dcd1d5223f73b3a9",
     "nameIsRequired": "604fd1b2e29c688a",
@@ -4551,6 +4552,7 @@
       "redirecting": "cd23991b4e02a17e"
     },
     "showMore": "ba8a80fdd7376631",
+    "sidePanel": "c28cdd98645b370f",
     "sidebar": {
       "folderCreateFailed": "4bb050aa86768e25",
       "folderUpdateFailed": "ff2c3beb908479a5"
@@ -13016,6 +13018,7 @@
     "quickPickStreamsLabel": "aa2db1e403a5ced8",
     "range": "99379c2fee16dece",
     "recordsChip": "d135619da331f2a4",
+    "recordsChipShort": "fd8f122cce20482f",
     "recordsPerPage": "7051b8bbc62daa11",
     "redirect_to_logs_page": "2445f40404b0508b",
     "refreshCacheAndRunQuery": "e90aca13f125a692",
@@ -13059,6 +13062,7 @@
     "sessionRefreshedRetrySearch": "a5f9f50b88e0d55d",
     "shareLink": "6480bb463dff4777",
     "showEditor": "a314f8725f27e525",
+    "showFields": "c47c7b14bdf3c94b",
     "showHideColumns": "0b71f0103a1f85d5",
     "showHistogramLabel": "b32dc489fba87a9a",
     "showOnlyInterestingFields": "fb62632df8bc2208",
diff --git a/web/src/components/DateTime.vue b/web/src/components/DateTime.vue
index 3d9bdd3537..b072ca0481 100644
--- a/web/src/components/DateTime.vue
+++ b/web/src/components/DateTime.vue
@@ -35,13 +35,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :class="{
             [selectedType + 'type']: !disableRelative,
             hideRelative: disableRelative,
-            'min-w-71.5': !disableRelative && selectedType === 'absolute',
+            'md:min-w-71.5': !disableRelative && selectedType === 'absolute',
             'w-fit': disableRelative,
           }"
+          class="max-md:max-w-full max-md:min-w-0"
           :disabled="disable"
           icon-left="schedule"
         >
-          <span class="date-time-label flex-1 text-left font-semibold">{{ triggerLabel }}</span>
+          <span
+            class="date-time-label flex-1 text-left font-semibold max-md:min-w-0 max-md:truncate"
+            >{{ triggerLabel }}</span
+          >
           <template #icon-right
             ><OIcon
               name="arrow-drop-down"
@@ -316,6 +320,7 @@ import { copyToClipboard } from "@/utils/clipboard";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import { useStore } from "vuex";
 import { raw, useI18nTyped, type I18nKey } from "@/types/i18n";
+import useBreakpoint from "@/composables/useBreakpoint";
 import { toZonedTime, fromZonedTime } from "date-fns-tz";
 
 interface ConsumableDateTime {
@@ -966,6 +971,30 @@ export default defineComponent({
       markApplied();
     };
 
+    const { isMobile } = useBreakpoint();
+
+    const compactRangeLabel = (label: string) => {
+      const REL_UNIT: Record<string, string> = {
+        second: "s",
+        minute: "m",
+        hour: "h",
+        day: "d",
+        week: "w",
+        month: "M",
+      };
+      const rel = label.match(/^Past (\d+) ([A-Za-z]+?)s?$/);
+      if (rel) return `Past ${rel[1]}${REL_UNIT[rel[2].toLowerCase()] ?? ` ${rel[2]}`}`;
+      const abs = label.match(
+        /^(\d{4})\/(\d{2}\/\d{2}) (\d{2}:\d{2})(?::\d{2})? - (\d{4})\/(\d{2}\/\d{2}) (\d{2}:\d{2})(?::\d{2})?$/,
+      );
+      // The year is only dropped when both ends share it, or a cross-year range would read as same-day.
+      if (!abs || abs[1] !== abs[4]) return label.replace(/\b(\d{2}:\d{2}):\d{2}\b/g, "$1");
+      const [, , fromDay, fromTime, , toDay, toTime] = abs;
+      return fromDay === toDay
+        ? `${fromDay} ${fromTime} - ${toTime}`
+        : `${fromDay} ${fromTime} - ${toDay} ${toTime}`;
+    };
+
     /**
      * What the trigger button renders.
      *
@@ -976,11 +1005,13 @@ export default defineComponent({
      * back to what's actually applied; see `appliedDisplayValue`.
      * The `||` fallback covers the first paint, before the mount-time apply.
      */
-    const triggerLabel = computed(() =>
-      props.autoApply || menuOpen.value
-        ? getDisplayValue.value
-        : appliedDisplayValue.value || getDisplayValue.value,
-    );
+    const triggerLabel = computed(() => {
+      const label =
+        props.autoApply || menuOpen.value
+          ? getDisplayValue.value
+          : appliedDisplayValue.value || getDisplayValue.value;
+      return isMobile.value ? compactRangeLabel(label) : label;
+    });
 
     const getDisplayValue = computed(() => {
       if (!props.disableRelative && selectedType.value === "relative") {
diff --git a/web/src/components/Header.vue b/web/src/components/Header.vue
index ef0e7bb487..4cc01bac48 100644
--- a/web/src/components/Header.vue
+++ b/web/src/components/Header.vue
@@ -17,7 +17,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div class="bg-surface-chrome-deeper flex h-10 w-full shrink-0 flex-nowrap items-center">
     <!-- LEFT SIDE: Logo -->
-    <div class="flex shrink-0 items-center justify-start ps-3">
+    <div class="flex shrink-0 items-center justify-start gap-1 ps-3 max-md:ps-1.5">
+      <OButton
+        variant="ghost"
+        size="icon-toolbar"
+        class="md:hidden"
+        data-test="header-mobile-nav-toggle"
+        :aria-label="t('components.navbar.mainNavigation')"
+        @click="$emit('toggle-mobile-nav')"
+      >
+        <OIcon name="menu" size="sm" class="size-5!" />
+      </OButton>
       <!-- LOGO SECTION: Displays custom or default OpenObserve logo -->
       <!-- Shows custom logo/text if configured in enterprise mode -->
       <div
@@ -136,7 +146,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div class="flex shrink-0 items-center justify-end gap-1 pe-3">
       <!-- QUOTA WARNING SECTION: Shows warning when quota threshold is reached -->
       <div
-        class="me-4 flex items-center gap-1"
+        class="me-4 flex items-center gap-1 max-md:hidden"
         v-if="store.state.organizationData.quotaThresholdMsg"
       >
         <div type="warning" icon="cloud" class="bg-status-warning-bg rounded-default inline p-1.25">
@@ -186,6 +196,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               : 'primary'
           "
           size="xs"
+          class="max-md:hidden"
           data-test="upgrade-to-enterprise-btn"
           @click="openEnterpriseDialog"
         >
@@ -238,12 +249,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </template>
 
           <!-- THEME SWITCHER: Toggle between light and dark mode -->
-          <ThemeSwitcher></ThemeSwitcher>
+          <ThemeSwitcher class="max-md:hidden"></ThemeSwitcher>
 
           <!-- SLACK COMMUNITY LINK -->
           <OButton
             variant="ghost"
             size="icon-toolbar"
+            class="max-md:hidden"
             data-test="menu-link-slack-item"
             @click="openSlack"
           >
@@ -254,7 +266,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- HELP MENU: Contains links to docs, API, and about page -->
           <ODropdown side="bottom" align="end">
             <template #trigger>
-              <OButton variant="ghost" size="icon-toolbar" data-test="menu-link-help-item">
+              <OButton
+                variant="ghost"
+                size="icon-toolbar"
+                class="max-md:hidden"
+                data-test="menu-link-help-item"
+              >
                 <OIcon name="help-outline" size="sm" class="size-5!" />
                 <OTooltip side="top" align="center" :content="t('menu.help')" />
               </OButton>
@@ -336,7 +353,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <!-- Language selector — nested sub-dropdown (click to open) -->
               <div
                 data-test="header-language-submenu-trigger"
-                class="hover:bg-dropdown-item-hover-bg relative flex cursor-pointer items-center gap-3 px-3 py-1.5 text-sm leading-[1.2] select-none"
+                class="hover:bg-dropdown-item-hover-bg relative flex cursor-pointer items-center gap-3 px-3 py-1.5 text-sm leading-[1.2] select-none max-md:flex-wrap"
                 @click.stop="showLanguageSubmenu = !showLanguageSubmenu"
               >
                 <OIcon size="xs" name="language" class="padding-none" />
@@ -361,7 +378,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <!-- Submenu — absolutely positioned to the left of parent dropdown -->
                 <div
                   v-if="showLanguageSubmenu"
-                  class="rounded-default bg-dropdown-bg border-dropdown-border absolute end-full top-0 z-9999 me-1 min-w-50 border py-1 shadow-lg dark:shadow-lg"
+                  class="rounded-default bg-dropdown-bg border-dropdown-border absolute end-full top-0 z-9999 me-1 min-w-50 border py-1 shadow-lg max-md:static max-md:me-0 max-md:mt-1 max-md:w-full max-md:min-w-0 max-md:basis-full max-md:shadow-none dark:shadow-lg"
                   data-test="language-dropdown-item"
                   @click.stop
                 >
@@ -542,6 +559,7 @@ export default defineComponent({
     "changeLanguage",
     "openPredefinedThemes",
     "openShortcuts",
+    "toggle-mobile-nav",
     "signout",
   ],
   setup(props, { emit }) {
diff --git a/web/src/components/MenuLink.vue b/web/src/components/MenuLink.vue
index d0075c6e90..f4bc01e035 100644
--- a/web/src/components/MenuLink.vue
+++ b/web/src/components/MenuLink.vue
@@ -19,7 +19,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
        and submenu-group triggers (<button>, used by ONavGroup) all share the
        exact same tile markup and styling — a group tile is literally a MenuLink. -->
   <component :is="rootComponent" v-bind="rootProps" :class="rootClass" @click="onRootClick">
-    <div class="nav-menu-item-avatar flex w-full flex-col items-center gap-0.5">
+    <div
+      class="nav-menu-item-avatar flex w-full flex-col items-center gap-0.5 max-md:flex-row max-md:items-center max-md:gap-3 max-md:px-1"
+    >
       <div
         class="icon-wrapper rounded-default relative inline-flex items-center justify-center p-0.5 transition-colors duration-250"
         :class="isActive ? activeIconClass : 'text-tabs-inactive-text group-hover:text-accent'"
@@ -37,7 +39,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </div>
       <div
-        class="nav-menu-item-label line-clamp-2 w-full text-center text-xs leading-tight tracking-[0.01em] break-normal wrap-normal [hyphens:none] transition-colors duration-250"
+        class="nav-menu-item-label line-clamp-2 w-full text-center text-xs leading-tight tracking-[0.01em] break-normal wrap-normal [hyphens:none] transition-colors duration-250 max-md:text-left max-md:text-sm"
         :class="
           isActive
             ? activeLabelClass
@@ -53,15 +55,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
          hover, or stays lit while the flyout is open / the section is active. -->
     <span
       v-if="asTrigger || submenu"
-      class="absolute top-3 right-1 transition-opacity duration-150"
-      :class="
+      class="absolute top-3 right-1 transition-opacity duration-150 max-md:top-1/2 max-md:right-3 max-md:-translate-y-1/2 max-md:opacity-100"
+      :class="[
         isActive || expanded
           ? 'text-accent opacity-100'
-          : 'text-tabs-inactive-text opacity-70 group-hover:opacity-100'
-      "
+          : 'text-tabs-inactive-text opacity-70 group-hover:opacity-100',
+        expanded ? 'max-md:rotate-90' : '',
+      ]"
       aria-hidden="true"
     >
-      <OIcon name="chevron-right" size="xs" />
+      <OIcon name="chevron-right" size="xs" class="max-md:size-4.5!" />
     </span>
   </component>
 </template>
@@ -267,6 +270,8 @@ export default defineComponent({
     const rootClass = computed(() => [
       "nav-menu-item",
       "group relative block [text-decoration:none]! text-inherit shrink-0 mx-1 px-0 py-1 min-h-0 rounded-surface transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1",
+      // Drawer rows are tap targets, so they clear the 44px touch-target minimum.
+      "max-md:flex max-md:min-h-11 max-md:items-center max-md:px-2 max-md:py-2",
       // Sit above the rail's sliding pill so icon/label stay readable.
       slideActive.value ? "z-10" : "",
       isActive.value
diff --git a/web/src/components/O2AIChat.vue b/web/src/components/O2AIChat.vue
index c999eb0351..736c3945f6 100644
--- a/web/src/components/O2AIChat.vue
+++ b/web/src/components/O2AIChat.vue
@@ -65,7 +65,7 @@
                       <OButton
                         variant="ghost"
                         size="icon-xs-circle"
-                        class="delete-history-btn opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+                        class="delete-history-btn opacity-0 transition-opacity duration-200 group-hover:opacity-100 max-md:opacity-100"
                         @click.stop="deleteChat(chat.id)"
                       >
                         <OIcon name="delete" size="sm" />
diff --git a/web/src/components/OrganizationSelector.vue b/web/src/components/OrganizationSelector.vue
index 62c14b136a..1bd442f45b 100644
--- a/web/src/components/OrganizationSelector.vue
+++ b/web/src/components/OrganizationSelector.vue
@@ -206,7 +206,7 @@ const rowStateClass = (row: { org: OrgOption; index: number }) => {
           variant="outline-primary"
           size="xs"
           data-test="navbar-organizations-select-trigger"
-          class="text-text-body! w-56"
+          class="text-text-body! w-56 max-md:w-28"
           :class="open ? 'ring-focus-ring-accent ring-2 ring-inset' : ''"
         >
           <template #icon-left>
diff --git a/web/src/components/about/FeatureComparisonTable.vue b/web/src/components/about/FeatureComparisonTable.vue
index 3befcc2a90..99df371beb 100644
--- a/web/src/components/about/FeatureComparisonTable.vue
+++ b/web/src/components/about/FeatureComparisonTable.vue
@@ -48,7 +48,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </div>
 
     <!-- ── Edition Cards Grid ──────────────────────────────────────────── -->
-    <div class="grid grid-cols-3 gap-5 pt-4">
+    <div class="grid grid-cols-3 gap-5 pt-4 max-md:grid-cols-1">
       <!-- eslint-disable local/no-hardcoded-px -- query condition: a threshold for WHEN layout changes, not a rendered length -->
       <div
         v-for="ed in editionList"
diff --git a/web/src/components/alerts/AddAlert.vue b/web/src/components/alerts/AddAlert.vue
index 164e187c14..6b7a183571 100644
--- a/web/src/components/alerts/AddAlert.vue
+++ b/web/src/components/alerts/AddAlert.vue
@@ -159,7 +159,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         />
       </div>
 
-      <div class="flex min-h-0 flex-1">
+      <div class="flex min-h-0 flex-1 max-lg:flex-col">
         <!-- LEFT column wrapper (flex: 6.5) -->
         <div
           :class="[
@@ -198,7 +198,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </OToggleGroupItem>
               </OToggleGroup>
             </div>
-            <div v-if="!isCompositeMode" class="flex items-center gap-4 px-3 py-2">
+            <div
+              v-if="!isCompositeMode"
+              class="flex items-center gap-4 px-3 py-2 max-md:flex-wrap max-md:gap-2"
+            >
               <!-- Stream Type -->
               <div v-if="!isCompositeMode" class="flex items-center gap-1.5">
                 <div class="text-text-heading text-xs font-semibold whitespace-nowrap">
@@ -219,7 +222,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
 
               <!-- Stream Name -->
-              <div v-if="!isCompositeMode" class="flex min-w-0 flex-1 items-center gap-1.5">
+              <div
+                v-if="!isCompositeMode"
+                class="flex min-w-0 flex-1 items-center gap-1.5 max-md:basis-full"
+              >
                 <div class="text-text-heading text-xs font-semibold whitespace-nowrap">
                   {{ t("alerts.stream_name") }} <span class="text-text-body">*</span>
                 </div>
@@ -456,7 +462,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- border-s: full-height vertical divider flush against the Preview/Summary pane -->
         <div
           v-if="!isCompositeMode"
-          class="border-border-default flex min-h-0 min-w-0 flex-[3.5] flex-col gap-2 overflow-hidden border-s pt-2 pb-2"
+          class="border-border-default flex min-h-0 min-w-0 flex-[3.5] flex-col gap-2 overflow-hidden border-s pt-2 pb-2 max-lg:border-s-0 max-lg:border-t"
         >
           <!-- Preview Card -->
           <div class="bg-card-glass-bg flex min-h-0 flex-1 flex-col overflow-hidden">
diff --git a/web/src/components/alerts/AddTemplate.vue b/web/src/components/alerts/AddTemplate.vue
index 28d9c22ed0..987ee41ff9 100644
--- a/web/src/components/alerts/AddTemplate.vue
+++ b/web/src/components/alerts/AddTemplate.vue
@@ -30,7 +30,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     }"
     bleed
   >
-    <OSplitter class="h-full" v-model="splitterModel" unit="%" :horizontal="false">
+    <OSplitter class="h-full" v-model="splitterModel" unit="%" :horizontal="isMobile">
       <template v-slot:before>
         <OForm :form="form" v-slot="{ isSubmitting }" class="bg-card-glass-bg flex h-full flex-col">
           <div class="overflow-auto p-3">
@@ -314,6 +314,7 @@ import {
   type AddTemplateForm,
 } from "./AddTemplate.schema";
 import ContentTemplateForm from "./template-content/ContentTemplateForm.vue";
+import useBreakpoint from "@/composables/useBreakpoint";
 import {
   emptyContentSpec,
   linkUrlBadScheme,
@@ -341,6 +342,7 @@ const emit = defineEmits(["get:templates", "cancel:hideform"]);
 const QueryEditor = defineAsyncComponent(() => import("@/components/CodeQueryEditor.vue"));
 const { t } = useI18nTyped();
 const splitterModel: Ref<number> = ref(55);
+const { isMobile } = useBreakpoint();
 const store = useStore();
 const router = useRouter();
 const isUpdatingTemplate = ref(false);
diff --git a/web/src/components/alerts/AlertGroupsTable.vue b/web/src/components/alerts/AlertGroupsTable.vue
index 60a6ddbabf..88cc727777 100644
--- a/web/src/components/alerts/AlertGroupsTable.vue
+++ b/web/src/components/alerts/AlertGroupsTable.vue
@@ -42,7 +42,7 @@
     data-test="alerts-alertgroupstable-table"
   >
     <template #toolbar>
-      <div class="flex w-full items-center gap-2">
+      <div class="flex w-full items-center gap-2 max-lg:min-w-0 max-md:contents">
         <OSearchInput
           v-model="search"
           class="flex-1"
diff --git a/web/src/components/alerts/AlertHistory.vue b/web/src/components/alerts/AlertHistory.vue
index e521cede0c..3c8a522d63 100644
--- a/web/src/components/alerts/AlertHistory.vue
+++ b/web/src/components/alerts/AlertHistory.vue
@@ -43,7 +43,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         @update:model-value="onAlertSelected"
         :placeholder="t('alerts.searcHistory')"
         data-test="alert-history-search-select"
-        class="o2-search-input min-w-62.5"
+        class="o2-search-input min-w-62.5 max-md:hidden"
         clearable
         @clear="clearSearch"
       >
@@ -60,6 +60,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         variant="ghost"
         icon-left="search"
         size="icon-sm"
+        class="max-md:hidden"
         @click="manualSearch"
         data-test="alert-history-manual-search-btn"
         :disabled="loading"
@@ -77,6 +78,41 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <OTooltip :content="t('common.refresh')" />
       </OButton>
     </template>
+    <div
+      class="border-border-default flex shrink-0 items-center gap-1 border-b px-3 py-1.5 md:hidden"
+    >
+      <OSelect
+        v-model="selectedAlert"
+        :options="filteredAlertOptions"
+        labelKey="label"
+        valueKey="value"
+        @update:model-value="onAlertSelected"
+        :placeholder="t('alerts.searcHistory')"
+        data-test="alert-history-search-select-mobile"
+        class="o2-search-input min-w-0 flex-1"
+        clearable
+        @clear="clearSearch"
+      >
+        <template #icon-left>
+          <OIcon class="o2-search-input-icon" name="search" size="sm" />
+        </template>
+        <template #empty>
+          <div class="text-muted-foreground px-3 py-2">
+            {{ t("alerts.noAlertsFound") }}
+          </div>
+        </template>
+      </OSelect>
+      <OButton
+        variant="ghost"
+        icon-left="search"
+        size="icon-sm"
+        @click="manualSearch"
+        data-test="alert-history-manual-search-btn-mobile"
+        :disabled="loading"
+      >
+        <OTooltip :content="t('common.search')" />
+      </OButton>
+    </div>
     <div class="min-h-0 flex-1 overflow-hidden">
       <div class="bg-card-glass-bg h-full">
         <!-- eslint-disable local/no-hardcoded-px -- mixed with vh/vw — vh tracks the window while rem tracks font-size; keep the expression unit-consistent -->
@@ -238,6 +274,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               variant="ghost"
               size="icon-sm"
               icon-left="visibility"
+              class="max-md:hidden"
               @click="showDetailsDialog(row)"
               data-test="alert-history-view-details"
             >
@@ -249,6 +286,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               variant="ghost-destructive"
               size="icon-sm"
               icon-left="error"
+              class="max-md:hidden"
               @click.stop="showErrorDialog(row)"
             >
               <OTooltip
@@ -257,6 +295,38 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 "
               />
             </OButton>
+            <ODropdown side="bottom" align="end">
+              <template #trigger>
+                <OButton
+                  icon-left="more-vert"
+                  variant="ghost"
+                  size="icon-xs-sq"
+                  class="md:hidden"
+                  data-test="alert-history-row-more-actions"
+                  @click.stop
+                />
+              </template>
+              <ODropdownItem
+                icon-left="visibility"
+                class="md:hidden"
+                data-test="alert-history-view-details-menu"
+                @select="showDetailsDialog(row)"
+              >
+                <span>{{ t("alerts.viewDetails") }}</span>
+              </ODropdownItem>
+              <ODropdownItem
+                v-if="row.error"
+                icon-left="error"
+                variant="destructive"
+                class="md:hidden"
+                :data-test="`pipeline-list-${row.name}-error-indicator-menu`"
+                @select="showErrorDialog(row)"
+              >
+                <span>{{
+                  t("common.lastErrorAt", { time: new Date(row.timestamp / 1000).toLocaleString() })
+                }}</span>
+              </ODropdownItem>
+            </ODropdown>
           </template>
         </OTable>
       </div>
@@ -486,6 +556,8 @@ import OButton from "@/lib/core/Button/OButton.vue";
 import ODialog from "@/lib/overlay/Dialog/ODialog.vue";
 import OSelect from "@/lib/forms/Select/OSelect.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import OSeparator from "@/lib/core/Separator/OSeparator.vue";
 import { COL } from "@/lib/core/Table/OTable.types";
diff --git a/web/src/components/alerts/AlertHistoryDrawer.vue b/web/src/components/alerts/AlertHistoryDrawer.vue
index 8841d781e3..c14a17f752 100644
--- a/web/src/components/alerts/AlertHistoryDrawer.vue
+++ b/web/src/components/alerts/AlertHistoryDrawer.vue
@@ -240,7 +240,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
                   <template #bottom>
                     <div class="flex h-12 w-full items-center">
-                      <div class="flex w-55 items-center text-xs font-normal">
+                      <div class="flex w-55 items-center text-xs font-normal max-md:hidden">
                         {{ resultTotal }} {{ t("alerts.alertDetails.results") }}
                       </div>
                     </div>
diff --git a/web/src/components/alerts/AlertInsights.vue b/web/src/components/alerts/AlertInsights.vue
index 9a2e62661d..b53bf49f02 100644
--- a/web/src/components/alerts/AlertInsights.vue
+++ b/web/src/components/alerts/AlertInsights.vue
@@ -197,8 +197,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </div>
 
     <!-- Dashboard Content -->
-    <div class="min-h-0 flex-1 px-2.5 pb-2.5">
-      <div class="bg-card-glass-bg mb-2.5 h-[calc(100vh-13rem)]">
+    <div class="min-h-0 flex-1 px-2.5 pb-2.5 max-lg:overflow-y-auto">
+      <div class="bg-card-glass-bg mb-2.5 h-[calc(100vh-13rem)] max-md:h-auto">
         <div @contextmenu="handleNativeContextMenu">
           <div v-show="isLoading" class="flex h-100 items-center justify-center">
             <OSpinner size="md" />
diff --git a/web/src/components/alerts/AlertList.vue b/web/src/components/alerts/AlertList.vue
index 029d00d2e1..d3c4459a9b 100644
--- a/web/src/components/alerts/AlertList.vue
+++ b/web/src/components/alerts/AlertList.vue
@@ -19,6 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div data-test="alert-list-page" class="flex h-full flex-col">
     <OPageLayout
+      overflow-first
       bleed
       v-if="!showAddAlertDialog && !showImportAlertDialog"
       :title="t('alerts.header')"
@@ -37,24 +38,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <template #actions>
         <!-- The provider behind the Terraform export tab, which is otherwise
              only discoverable once the export dialog is already open. -->
-        <IacRegistryLinks data-test="alert-list-iac-registries" />
-        <!-- Import button -->
-        <OButton
-          :class="isCompactToolbar ? 'min-w-0! px-2! py-0!' : ''"
-          variant="outline"
-          size="sm"
-          @click="importAlert"
-          data-test="alert-import"
-          icon-left="upload-file"
-        >
-          <template v-if="!isCompactToolbar">{{ t(`dashboard.import`) }}</template>
-          <OTooltip
-            v-if="isCompactToolbar"
-            :content="t('dashboard.import')"
-            side="bottom"
-            shortcut-id="alertsImport"
-          />
-        </OButton>
         <!-- Add button — routes to anomaly creation on anomaly tab, alert creation otherwise -->
         <OButton
           data-test="alert-list-add-alert-btn"
@@ -78,15 +61,38 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >
       </template>
 
-      <div data-test="alert-list-splitter" class="flex min-h-0 flex-1">
+      <template #actions-overflow>
+        <IacRegistryLinks data-test="alert-list-iac-registries" />
+        <!-- Import button -->
+        <OButton
+          :class="isCompactToolbar ? 'min-w-0! px-2! py-0!' : ''"
+          variant="outline"
+          size="sm"
+          @click="importAlert"
+          data-test="alert-import"
+          icon-left="upload-file"
+        >
+          <template v-if="!isCompactToolbar">{{ t(`dashboard.import`) }}</template>
+          <OTooltip
+            v-if="isCompactToolbar"
+            :content="t('dashboard.import')"
+            side="bottom"
+            shortcut-id="alertsImport"
+          />
+        </OButton>
+      </template>
+
+      <div data-test="alert-list-splitter" class="flex min-h-0 flex-1 max-md:flex-col">
         <!-- Left: FolderList -->
-        <div class="w-rail h-full shrink-0">
+        <div
+          class="w-rail max-md:border-border-default h-full shrink-0 max-md:h-auto max-md:w-full max-md:border-b"
+        >
           <div class="h-full">
             <FolderList type="alerts" @update:activeFolderId="updateActiveFolderId" />
           </div>
         </div>
         <!-- Right: Table -->
-        <div class="h-full min-w-0 flex-1">
+        <div class="h-full min-w-0 flex-1 max-md:h-auto max-md:min-h-0">
           <div class="bg-card-glass-bg flex h-full flex-col">
             <!-- Alert List Table (shows all alert types including anomaly detection rows) -->
             <OTable
@@ -139,8 +145,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
               <!-- Toolbar: alert-type filter + search (inline folder scope) + refresh. -->
               <template #toolbar>
-                <div class="flex w-full items-center gap-2">
+                <!-- A container, not a viewport breakpoint: the folder rail squeezes this toolbar at any width. -->
+                <div
+                  class="flex w-full items-center gap-2 max-lg:@container/alert-toolbar max-lg:min-w-0 max-lg:flex-1 max-lg:flex-wrap max-lg:gap-y-1.5 max-md:contents"
+                >
                   <OToggleGroup
+                    mobile-dropdown
                     :model-value="activeTab"
                     data-test="alert-list-tabs"
                     @update:model-value="(v) => onAlertTabChange(v as string)"
@@ -151,12 +161,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       :value="tab.value"
                       size="sm"
                       :icon-left="tab.icon"
+                      :title="lgUp ? undefined : tab.label"
                       :data-test="`alert-list-tab-${tab.value}`"
                     >
-                      {{ tab.label }}
+                      <span class="@max-[34rem]/alert-toolbar:hidden">{{ tab.label }}</span>
                     </OToggleGroupItem>
                   </OToggleGroup>
-                  <div class="min-w-0 flex-1">
+                  <!-- flex-1 is basis-0, so the min-w floor is what wraps the input before its scope chips spill. -->
+                  <div class="min-w-0 flex-1 md:max-lg:min-w-80">
                     <OInput
                       v-model="dynamicQueryModel"
                       :placeholder="
@@ -183,7 +195,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                             icon-left="folder-outline"
                             data-test="alert-list-search-scope-current"
                             :title="t('alerts.searchThisFolderTooltip')"
-                            >{{ t("alerts.searchThisFolder") }}</OToggleGroupItem
+                            ><span class="max-md:hidden">{{
+                              t("alerts.searchThisFolder")
+                            }}</span></OToggleGroupItem
                           >
                           <OToggleGroupItem
                             value="all"
@@ -191,7 +205,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                             icon-left="search"
                             data-test="alert-list-search-across-folders-toggle"
                             :title="t('alerts.searchAllFoldersTooltip')"
-                            >{{ t("alerts.searchAllFolders") }}</OToggleGroupItem
+                            ><span class="max-md:hidden">{{
+                              t("alerts.searchAllFolders")
+                            }}</span></OToggleGroupItem
                           >
                         </OToggleGroup>
                       </template>
@@ -476,7 +492,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     data-test="alert-list-loading-alert"
                     v-if="alertStateLoadingMap[row.uuid]"
                     style="display: inline-block; width: 2.07125rem; height: auto"
-                    class="ms-1 flex items-center justify-center"
+                    class="ms-1 flex items-center justify-center max-md:hidden"
                     :title="row.enabled ? t('common.turningOff') : t('common.turningOn')"
                   >
                     <OSpinner size="xs" />
@@ -485,7 +501,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     v-else
                     :data-row-action="row.enabled ? 'pause' : 'resume'"
                     :data-test="`alert-list-${row.name}-pause-start-alert`"
-                    class="ms-1"
+                    class="ms-1 max-md:hidden"
                     :variant="row.enabled ? 'ghost-destructive' : 'ghost-success'"
                     size="icon-sm"
                     :icon-left="row.enabled ? 'pause' : 'play-arrow'"
@@ -503,6 +519,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     variant="ghost"
                     size="icon-sm"
                     icon-left="edit"
+                    class="max-md:hidden"
                     @click.stop="editAlert(row)"
                   >
                     <OTooltip
@@ -516,7 +533,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                        button receives no pointer events, so a tooltip anchored
                        to it would never open — leaving a greyed-out control
                        with no way to find out why. -->
-                  <span class="inline-flex">
+                  <span class="inline-flex max-md:hidden">
                     <OTooltip
                       v-if="isSloRow(row)"
                       side="bottom"
@@ -569,6 +586,39 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         :data-test="`alert-list-${row.name}-more-options`"
                       />
                     </template>
+                    <ODropdownItem
+                      class="md:hidden"
+                      :disabled="!!alertStateLoadingMap[row.uuid]"
+                      :data-test="`alert-list-${row.name}-pause-start-alert-menu`"
+                      @select="toggleAlertState(row)"
+                    >
+                      <template #icon-left>
+                        <OIcon :name="row.enabled ? 'pause' : 'play-arrow'" size="sm" />
+                      </template>
+                      {{ row.enabled ? t("alerts.pause") : t("alerts.start") }}
+                    </ODropdownItem>
+                    <ODropdownItem
+                      class="md:hidden"
+                      :data-test="`alert-list-${row.name}-update-alert-menu`"
+                      @select="editAlert(row)"
+                    >
+                      <template #icon-left>
+                        <OIcon name="edit" size="sm" />
+                      </template>
+                      {{ t("alerts.edit") }}
+                    </ODropdownItem>
+                    <ODropdownItem
+                      class="md:hidden"
+                      :disabled="isSloRow(row)"
+                      :data-test="`alert-list-${row.name}-clone-alert-menu`"
+                      @select="duplicateAlert(row)"
+                    >
+                      <template #icon-left>
+                        <OIcon name="content-copy" size="sm" />
+                      </template>
+                      {{ t("alerts.clone") }}
+                    </ODropdownItem>
+                    <ODropdownSeparator class="md:hidden" />
                     <ODropdownItem
                       :data-test="`alert-list-${row.name}-move-alert`"
                       @select="moveAlertToAnotherFolder(row)"
@@ -676,7 +726,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       >{{ selectedAlerts.length }} {{ t("alerts.conditionOf") }} {{ resultTotal }}
                       {{ t("alerts.selectedLabel") }}</template
                     >
-                    <template v-else>{{ resultTotal }} {{ t("alerts.header") }}</template>
+                    <span v-else class="max-md:hidden"
+                      >{{ resultTotal }} {{ t("alerts.header") }}</span
+                    >
                   </div>
 
                   <OButton
@@ -902,6 +954,7 @@ import FolderList from "../common/sidebar/FolderList.vue";
 import MoveAcrossFolders from "../common/sidebar/MoveAcrossFolders.vue";
 import { invalidateDependencyGraphCache } from "@/composables/alerts/useDependencyGraph";
 import { nextTick } from "vue";
+import useBreakpoint from "@/composables/useBreakpoint";
 import SelectFolderDropDown from "../common/sidebar/SelectFolderDropDown.vue";
 import OToggleGroup from "@/lib/core/ToggleGroup/OToggleGroup.vue";
 import OToggleGroupItem from "@/lib/core/ToggleGroup/OToggleGroupItem.vue";
@@ -971,6 +1024,7 @@ export default defineComponent({
   setup() {
     const store = useStore();
     const { t } = useI18nTyped();
+    const { lgUp } = useBreakpoint();
     const router = useRouter();
     const { track } = useReo();
     const formData: Ref<Alert | {}> = ref({});
@@ -3418,6 +3472,7 @@ export default defineComponent({
     ]);
 
     return {
+      lgUp,
       raw,
       t,
       store,
diff --git a/web/src/components/alerts/AlertSectionTabs.vue b/web/src/components/alerts/AlertSectionTabs.vue
index 2a8a3f882c..2d2f302388 100644
--- a/web/src/components/alerts/AlertSectionTabs.vue
+++ b/web/src/components/alerts/AlertSectionTabs.vue
@@ -38,7 +38,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       :data-test="`alert-section-tab-${section.key}`"
     >
       <OIcon :name="section.icon" size="sm" class="shrink-0" />
-      <span>{{ section.label }}</span>
+      <span :class="section.key === activeSectionKey ? '' : 'max-md:hidden'">{{
+        section.label
+      }}</span>
     </OTab>
   </OTabs>
 </template>
diff --git a/web/src/components/alerts/AlertsDestinationList.vue b/web/src/components/alerts/AlertsDestinationList.vue
index 04ff04319e..9112e3d18b 100644
--- a/web/src/components/alerts/AlertsDestinationList.vue
+++ b/web/src/components/alerts/AlertsDestinationList.vue
@@ -17,6 +17,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div class="flex h-full flex-col p-0">
     <OPageLayout
+      overflow-first
       bleed
       v-if="!showDestinationEditor && !showImportDestination"
       :title="t('alerts.header')"
@@ -30,13 +31,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </template>
 
       <template #actions>
-        <OButton
-          variant="outline"
-          size="sm"
-          @click="importDestination"
-          data-test="destination-import"
-          >{{ t(`dashboard.import`) }}</OButton
-        >
         <OButton
           data-test="alert-destination-list-add-alert-btn"
           variant="primary"
@@ -46,6 +40,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           >{{ t(`alert_destinations.add`) }}</OButton
         >
       </template>
+      <template #actions-overflow>
+        <OButton
+          variant="outline"
+          size="sm"
+          @click="importDestination"
+          data-test="destination-import"
+          >{{ t(`dashboard.import`) }}</OButton
+        >
+      </template>
+
       <div class="bg-card-glass-bg min-h-0 flex-1">
         <OTable
           ref="oTableRef"
@@ -73,8 +77,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           @update:current-page="onPageChange"
         >
           <template #toolbar>
-            <div class="flex w-full items-center gap-2">
+            <div class="flex w-full items-center gap-2 max-lg:min-w-0 max-md:contents">
               <OToggleGroup
+                mobile-dropdown
                 :model-value="activeTab"
                 @update:model-value="
                   (v) => {
@@ -99,7 +104,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OSearchInput
                 v-model="filterQuery"
                 data-test="destination-list-search-input"
-                class="flex-1"
+                class="flex-1 max-lg:min-w-0 max-md:min-w-40"
                 :placeholder="t('alert_destinations.search')"
               />
             </div>
@@ -122,7 +127,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </template>
 
           <template #bottom="{ totalRows }">
-            <span class="text-xs font-normal">
+            <span class="text-xs font-normal max-md:hidden">
               {{ totalRows.toLocaleString() }} {{ t("alert_destinations.header") }}
             </span>
             <OButton
@@ -222,6 +227,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-row-action="export"
                 variant="ghost"
                 size="icon-sm"
+                class="max-md:hidden"
                 :title="t('alert_destinations.exportDestination')"
                 @click.stop="exportDestination(row)"
               >
@@ -232,6 +238,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-row-action="edit"
                 variant="ghost"
                 size="icon-sm"
+                class="max-md:hidden"
                 :title="t('alert_destinations.edit')"
                 @click="editDestination(row)"
               >
@@ -242,12 +249,50 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-row-action="delete"
                 variant="ghost"
                 size="icon-sm"
+                class="max-md:hidden"
                 :title="t('alert_destinations.delete')"
                 :loading="deletingDestinations.has(row.name)"
                 @click="conformDeleteDestination(row)"
               >
                 <OIcon name="delete" size="sm" />
               </OButton>
+              <ODropdown side="bottom" align="end">
+                <template #trigger>
+                  <OButton
+                    icon-left="more-vert"
+                    variant="ghost"
+                    size="icon-xs-sq"
+                    class="md:hidden"
+                    data-test="alert-destination-list-row-more-actions"
+                    @click.stop
+                  />
+                </template>
+                <ODropdownItem
+                  icon-left="download"
+                  class="md:hidden"
+                  data-test="destination-export-menu"
+                  @select="exportDestination(row)"
+                >
+                  <span>{{ t("alert_destinations.exportDestination") }}</span>
+                </ODropdownItem>
+                <ODropdownItem
+                  icon-left="edit"
+                  class="md:hidden"
+                  :data-test="`alert-destination-list-${row.name}-update-destination-menu`"
+                  @select="editDestination(row)"
+                >
+                  <span>{{ t("alert_destinations.edit") }}</span>
+                </ODropdownItem>
+                <ODropdownItem
+                  icon-left="delete"
+                  variant="destructive"
+                  class="md:hidden"
+                  :data-test="`alert-destination-list-${row.name}-delete-destination-menu`"
+                  @select="conformDeleteDestination(row)"
+                >
+                  <span>{{ t("alert_destinations.delete") }}</span>
+                </ODropdownItem>
+              </ODropdown>
             </div>
           </template>
 
@@ -323,6 +368,8 @@ import { useReo } from "@/services/reodotdev_analytics";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
 import OTable from "@/lib/core/Table/OTable.vue";
@@ -350,6 +397,8 @@ export default defineComponent({
     ImportDestination,
     OButton,
     OTooltip,
+    ODropdown,
+    ODropdownItem,
     OSearchInput,
     OTag,
     OTable,
diff --git a/web/src/components/alerts/DependencyEntityRow.vue b/web/src/components/alerts/DependencyEntityRow.vue
index 98c1bbc2e9..75e684cc99 100644
--- a/web/src/components/alerts/DependencyEntityRow.vue
+++ b/web/src/components/alerts/DependencyEntityRow.vue
@@ -58,7 +58,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <div
       v-if="!deleting"
-      class="flex shrink-0 items-center gap-0.5 opacity-0 group-hover:opacity-100"
+      class="flex shrink-0 items-center gap-0.5 opacity-0 group-hover:opacity-100 max-md:opacity-100"
     >
       <OButton
         v-if="!node.missing"
diff --git a/web/src/components/alerts/ExternalAlertSourcesList.vue b/web/src/components/alerts/ExternalAlertSourcesList.vue
index 3904674138..5a2c9813da 100644
--- a/web/src/components/alerts/ExternalAlertSourcesList.vue
+++ b/web/src/components/alerts/ExternalAlertSourcesList.vue
@@ -201,6 +201,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 variant="ghost"
                 size="icon-sm"
                 icon-left="edit"
+                class="max-md:hidden"
                 :title="t('alert_sources.edit')"
                 :data-test="`alert-sources-edit-${row.integration.id}`"
                 @click="openEditFor(row.integration)"
@@ -209,6 +210,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 variant="ghost"
                 size="icon-sm"
                 icon-left="autorenew"
+                class="max-md:hidden"
                 :title="t('alert_sources.rotateToken')"
                 :data-test="`alert-sources-rotate-${row.integration.id}`"
                 @click="confirmRotate(row.integration)"
@@ -217,6 +219,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :variant="row.integration.enabled ? 'ghost-destructive' : 'ghost-success'"
                 size="icon-sm"
                 :icon-left="row.integration.enabled ? 'pause' : 'play-arrow'"
+                class="max-md:hidden"
                 :title="
                   row.integration.enabled ? t('alert_sources.disable') : t('alert_sources.enable')
                 "
@@ -227,6 +230,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 variant="ghost-destructive"
                 size="icon-sm"
                 icon-left="delete"
+                class="max-md:hidden"
                 :disabled="row.integration.name === 'default'"
                 :title="
                   row.integration.name === 'default'
@@ -236,6 +240,58 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :data-test="`alert-sources-delete-${row.integration.id}`"
                 @click="confirmDelete(row.integration)"
               />
+              <ODropdown side="bottom" align="end">
+                <template #trigger>
+                  <OButton
+                    icon-left="more-vert"
+                    variant="ghost"
+                    size="icon-xs-sq"
+                    class="md:hidden"
+                    data-test="alert-sources-row-more-actions"
+                    @click.stop
+                  />
+                </template>
+                <ODropdownItem
+                  icon-left="edit"
+                  class="md:hidden"
+                  :data-test="`alert-sources-edit-${row.integration.id}-menu`"
+                  @select="openEditFor(row.integration)"
+                >
+                  <span>{{ t("alert_sources.edit") }}</span>
+                </ODropdownItem>
+                <ODropdownItem
+                  icon-left="autorenew"
+                  class="md:hidden"
+                  :data-test="`alert-sources-rotate-${row.integration.id}-menu`"
+                  @select="confirmRotate(row.integration)"
+                >
+                  <span>{{ t("alert_sources.rotateToken") }}</span>
+                </ODropdownItem>
+                <ODropdownItem
+                  :icon-left="row.integration.enabled ? 'pause' : 'play-arrow'"
+                  class="md:hidden"
+                  :data-test="`alert-sources-toggle-enabled-${row.integration.id}-menu`"
+                  @select="toggleEnabledFor(row.integration)"
+                >
+                  <span>{{
+                    row.integration.enabled ? t("alert_sources.disable") : t("alert_sources.enable")
+                  }}</span>
+                </ODropdownItem>
+                <ODropdownItem
+                  icon-left="delete"
+                  variant="destructive"
+                  class="md:hidden"
+                  :disabled="row.integration.name === 'default'"
+                  :data-test="`alert-sources-delete-${row.integration.id}-menu`"
+                  @select="confirmDelete(row.integration)"
+                >
+                  <span>{{
+                    row.integration.name === "default"
+                      ? t("alert_sources.defaultCannotDelete")
+                      : t("alert_sources.delete")
+                  }}</span>
+                </ODropdownItem>
+              </ODropdown>
             </div>
             <span
               v-else
@@ -285,6 +341,8 @@ import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
 import AddExternalAlertSource from "./AddExternalAlertSource.vue";
 import alertSources from "@/services/alert_sources";
@@ -332,6 +390,8 @@ export default defineComponent({
     OSearchInput,
     OEmptyState,
     OTooltip,
+    ODropdown,
+    ODropdownItem,
     ConfirmDialog,
     AddExternalAlertSource,
   },
diff --git a/web/src/components/alerts/ImportAlert.vue b/web/src/components/alerts/ImportAlert.vue
index 051c5400e1..55f5df2e99 100644
--- a/web/src/components/alerts/ImportAlert.vue
+++ b/web/src/components/alerts/ImportAlert.vue
@@ -27,8 +27,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   >
     <!-- Custom URL Input Section with Folder Dropdown -->
     <template #url-input-section="{ url, updateUrl }">
-      <div class="my-[0.725rem] flex items-end gap-2">
-        <div class="w-[69%]">
+      <div class="my-[0.725rem] flex items-end gap-2 max-md:flex-wrap">
+        <div class="w-[69%] max-md:w-full">
           <OInput
             data-test="alert-import-url-input"
             :model-value="url"
@@ -38,7 +38,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           />
         </div>
 
-        <div class="w-[30%]" data-test="alert-folder-dropdown">
+        <div class="w-[30%] max-md:w-full" data-test="alert-folder-dropdown">
           <SelectFolderDropDown
             :type="'alerts'"
             @folder-selected="updateActiveFolderId"
@@ -50,8 +50,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- Custom File Input Section with Folder Dropdown -->
     <template #file-input-section="{ jsonFiles, updateFiles }">
-      <div class="mb-1 flex w-[calc(100%-0.625rem)] items-start gap-2">
-        <div class="w-[69%]">
+      <div class="mb-1 flex w-[calc(100%-0.625rem)] items-start gap-2 max-md:flex-wrap">
+        <div class="w-[69%] max-md:w-full">
           <OFile
             data-test="alert-import-json-file-input"
             :model-value="jsonFiles"
@@ -64,7 +64,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             size="md"
           />
         </div>
-        <div class="w-[30%]">
+        <div class="w-[30%] max-md:w-full">
           <SelectFolderDropDown
             :type="'alerts'"
             @folder-selected="updateActiveFolderId"
@@ -76,7 +76,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- Output Section with Alert-specific Error Display -->
     <template #output-content>
-      <div class="border-border-default flex h-full w-full min-w-100 flex-col border-s">
+      <div
+        class="border-border-default flex h-full w-full min-w-100 flex-col border-s max-md:min-w-0"
+      >
         <div
           v-if="alertErrorsToDisplay.length > 0"
           class="text-text-heading shrink-0 py-3 text-center text-sm font-semibold"
diff --git a/web/src/components/alerts/ImportDestination.vue b/web/src/components/alerts/ImportDestination.vue
index 75108b692f..899000a4ce 100644
--- a/web/src/components/alerts/ImportDestination.vue
+++ b/web/src/components/alerts/ImportDestination.vue
@@ -27,7 +27,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   >
     <!-- Output Section with Destination-specific Error Display -->
     <template #output-content>
-      <div class="border-border-default flex h-full w-full min-w-100 flex-col border-s">
+      <div
+        class="border-border-default flex h-full w-full min-w-100 flex-col border-s max-md:min-w-0"
+      >
         <div
           v-if="destinationErrorsToDisplay.length > 0 || destinationCreators.length > 0"
           class="text-text-heading shrink-0 py-3 text-center text-sm font-semibold"
@@ -42,7 +44,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           {{ t("alert_destinations.import.outputMessages") }}
         </div>
         <OSeparator class="mt-1 shrink-0" />
-        <div class="min-h-0 w-full min-w-100 flex-1 [resize:none] overflow-auto">
+        <div class="min-h-0 w-full min-w-100 flex-1 [resize:none] overflow-auto max-md:min-w-0">
           <!-- Destination Errors Section -->
           <div class="error-section mb-2.5 p-2.5" v-if="destinationErrorsToDisplay.length > 0">
             <div class="error-list">
diff --git a/web/src/components/alerts/ImportTemplate.vue b/web/src/components/alerts/ImportTemplate.vue
index df106872ed..0125807674 100644
--- a/web/src/components/alerts/ImportTemplate.vue
+++ b/web/src/components/alerts/ImportTemplate.vue
@@ -27,7 +27,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   >
     <!-- Output Section with Template-specific Error Display -->
     <template #output-content>
-      <div class="border-border-default flex h-full w-full min-w-100 flex-col border-s">
+      <div
+        class="border-border-default flex h-full w-full min-w-100 flex-col border-s max-md:min-w-0"
+      >
         <div
           v-if="templateErrorsToDisplay.length > 0 || tempalteCreators.length > 0"
           class="text-text-heading shrink-0 py-3 text-center text-sm font-semibold"
@@ -42,7 +44,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           {{ t("alert_templates.outputMessages") }}
         </div>
         <OSeparator class="mt-1 shrink-0" />
-        <div class="min-h-0 w-full min-w-100 flex-1 [resize:none] overflow-auto">
+        <div class="min-h-0 w-full min-w-100 flex-1 [resize:none] overflow-auto max-md:min-w-0">
           <!-- Template Errors Section -->
           <div class="error-section mb-2.5 p-2.5" v-if="templateErrorsToDisplay.length > 0">
             <div class="error-list">
diff --git a/web/src/components/alerts/IncidentList.vue b/web/src/components/alerts/IncidentList.vue
index 924c2a267d..4eabdb3d47 100644
--- a/web/src/components/alerts/IncidentList.vue
+++ b/web/src/components/alerts/IncidentList.vue
@@ -52,8 +52,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Toolbar: status toggle (All / Active / Resolved) + search — same
              shape as the Alerts page tabs. -->
         <template #toolbar>
-          <div class="flex w-full items-center gap-2">
+          <div class="flex w-full items-center gap-2 max-lg:min-w-0 max-md:contents">
             <OToggleGroup
+              mobile-dropdown
               :model-value="statusFilter"
               @update:model-value="(v) => filterByStatus(v as string)"
               data-test="incident-status-filter-group"
@@ -77,7 +78,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </OToggleGroup>
             <OSearchInput
               v-model="searchQuery"
-              class="min-w-0 flex-1"
+              class="min-w-0 flex-1 max-md:min-w-40"
               :placeholder="t('alerts.incidents.search')"
               data-test="incident-search-input"
               clearable
@@ -196,6 +197,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               v-if="row.status === 'open'"
               variant="ghost-warning"
               size="icon-sm"
+              class="max-md:hidden"
               @click.stop="acknowledgeIncident(row)"
               data-test="incident-ack-btn"
               ><OIcon name="visibility" size="sm" /><OTooltip
@@ -205,6 +207,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               v-if="row.status !== 'resolved'"
               variant="ghost-primary"
               size="icon-sm"
+              class="max-md:hidden"
               @click.stop="resolveIncident(row)"
               data-test="incident-resolve-btn"
               ><OIcon name="task-alt" size="sm" /><OTooltip
@@ -214,11 +217,52 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               v-if="row.status === 'resolved'"
               variant="ghost-warning"
               size="icon-sm"
+              class="max-md:hidden"
               @click.stop="reopenIncident(row)"
               data-test="incident-reopen-btn"
               ><OIcon name="restart-alt" size="sm" /><OTooltip
                 :content="t('alerts.incidents.reopen')"
             /></OButton>
+            <ODropdown side="bottom" align="end">
+              <template #trigger>
+                <OButton
+                  icon-left="more-vert"
+                  :title="t('dashboard.moreActions')"
+                  variant="ghost"
+                  size="icon-xs-sq"
+                  class="md:hidden"
+                  data-test="incident-row-more-actions"
+                  @click.stop
+                />
+              </template>
+              <ODropdownItem
+                v-if="row.status === 'open'"
+                icon-left="visibility"
+                class="md:hidden"
+                data-test="incident-ack-btn-menu"
+                @select="acknowledgeIncident(row)"
+              >
+                <span>{{ t("alerts.incidents.acknowledge") }}</span>
+              </ODropdownItem>
+              <ODropdownItem
+                v-if="row.status !== 'resolved'"
+                icon-left="task-alt"
+                class="md:hidden"
+                data-test="incident-resolve-btn-menu"
+                @select="resolveIncident(row)"
+              >
+                <span>{{ t("alerts.incidents.resolve") }}</span>
+              </ODropdownItem>
+              <ODropdownItem
+                v-if="row.status === 'resolved'"
+                icon-left="restart-alt"
+                class="md:hidden"
+                data-test="incident-reopen-btn-menu"
+                @select="reopenIncident(row)"
+              >
+                <span>{{ t("alerts.incidents.reopen") }}</span>
+              </ODropdownItem>
+            </ODropdown>
           </div>
         </template>
 
@@ -238,7 +282,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Bottom -->
         <template #bottom>
           <div class="flex h-12 w-full items-center justify-between">
-            <div class="flex w-25 items-center text-xs font-normal">
+            <div class="flex w-25 items-center text-xs font-normal max-md:hidden">
               {{ visibleIncidents.length }}
               {{
                 visibleIncidents.length === 1
@@ -276,6 +320,8 @@ import OStatStrip from "@/lib/data/StatStrip/OStatStrip.vue";
 import type { StatItem } from "@/lib/data/StatStrip/OStatStrip.types";
 import OToggleGroup from "@/lib/core/ToggleGroup/OToggleGroup.vue";
 import OToggleGroupItem from "@/lib/core/ToggleGroup/OToggleGroupItem.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import { COL } from "@/lib/core/Table/OTable.types";
@@ -296,6 +342,8 @@ export default defineComponent({
     OStatStrip,
     OToggleGroup,
     OToggleGroupItem,
+    ODropdown,
+    ODropdownItem,
   },
   setup() {
     const { t } = useI18nTyped();
diff --git a/web/src/components/alerts/PipelinesDestinationList.vue b/web/src/components/alerts/PipelinesDestinationList.vue
index 979efa36a6..7230471acf 100644
--- a/web/src/components/alerts/PipelinesDestinationList.vue
+++ b/web/src/components/alerts/PipelinesDestinationList.vue
@@ -110,6 +110,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               data-row-action="edit"
               variant="ghost"
               size="icon-sm"
+              class="max-md:hidden"
               :title="t('alert_destinations.edit')"
               @click="editDestination(row)"
             >
@@ -120,11 +121,42 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               data-row-action="delete"
               variant="ghost"
               size="icon-sm"
+              class="max-md:hidden"
               :title="t('alert_destinations.delete')"
               @click="conformDeleteDestination(row)"
             >
               <OIcon name="delete" size="sm" />
             </OButton>
+            <ODropdown side="bottom" align="end">
+              <template #trigger>
+                <OButton
+                  icon-left="more-vert"
+                  :title="t('dashboard.moreActions')"
+                  variant="ghost"
+                  size="icon-xs-sq"
+                  class="md:hidden"
+                  data-test="alert-destination-list-row-more-actions"
+                  @click.stop
+                />
+              </template>
+              <ODropdownItem
+                icon-left="edit"
+                class="md:hidden"
+                :data-test="`alert-destination-list-${row.name}-update-destination-menu`"
+                @select="editDestination(row)"
+              >
+                <span>{{ t("alert_destinations.edit") }}</span>
+              </ODropdownItem>
+              <ODropdownItem
+                icon-left="delete"
+                variant="destructive"
+                class="md:hidden"
+                :data-test="`alert-destination-list-${row.name}-delete-destination-menu`"
+                @select="conformDeleteDestination(row)"
+              >
+                <span>{{ t("alert_destinations.delete") }}</span>
+              </ODropdownItem>
+            </ODropdown>
           </template>
 
           <template v-if="selectedDestinations.length > 0" #bottom>
@@ -196,6 +228,8 @@ import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
 import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import OTable from "@/lib/core/Table/OTable.vue";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import { COL } from "@/lib/core/Table/OTable.types";
@@ -225,6 +259,8 @@ export default defineComponent({
     OTag,
     OSearchInput,
     OTable,
+    ODropdown,
+    ODropdownItem,
   },
   setup() {
     const store = useStore();
diff --git a/web/src/components/alerts/TemplateList.vue b/web/src/components/alerts/TemplateList.vue
index b87ca142f8..426e006cb8 100644
--- a/web/src/components/alerts/TemplateList.vue
+++ b/web/src/components/alerts/TemplateList.vue
@@ -17,6 +17,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div class="flex h-full flex-col p-0">
     <OPageLayout
+      overflow-first
       bleed
       v-if="!showImportTemplate && !showTemplateEditor"
       :title="t('alerts.header')"
@@ -29,13 +30,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </template>
 
       <template #actions>
-        <OButton
-          variant="outline"
-          size="sm-action"
-          @click="importTemplate"
-          data-test="template-import"
-          >{{ t(`dashboard.import`) }}</OButton
-        >
         <OButton
           data-test="template-list-add-btn"
           variant="primary"
@@ -44,6 +38,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           >{{ t(`alert_templates.add`) }}</OButton
         >
       </template>
+      <template #actions-overflow>
+        <OButton
+          variant="outline"
+          size="sm-action"
+          @click="importTemplate"
+          data-test="template-import"
+          >{{ t(`dashboard.import`) }}</OButton
+        >
+      </template>
+
       <div class="bg-card-glass-bg min-h-0 flex-1 overflow-hidden">
         <OTable
           ref="oTableRef"
@@ -71,8 +75,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           @update:current-page="onPageChange"
         >
           <template #toolbar>
-            <div class="flex w-full items-center gap-2">
+            <div class="flex w-full items-center gap-2 max-lg:min-w-0 max-md:contents">
               <OToggleGroup
+                mobile-dropdown
                 :model-value="activeTab"
                 @update:model-value="
                   (v: any) => {
@@ -96,7 +101,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </OToggleGroup>
               <OSearchInput
                 v-model="filterQuery"
-                class="flex-1"
+                class="flex-1 max-lg:min-w-0 max-md:min-w-40"
                 :placeholder="t('template.search')"
                 data-test="template-list-search-input"
               />
@@ -168,7 +173,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template #cell-actions="{ row }">
             <OButton
               :title="t('alert_templates.exportTemplate')"
-              class="ms-1"
+              class="ms-1 max-md:hidden"
               variant="ghost"
               size="icon-sm"
               @click.stop="exportTemplate(row)"
@@ -179,7 +184,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </OButton>
             <OButton
               :data-test="`alert-template-list-${row.name}-update-template`"
-              class="ms-1"
+              class="ms-1 max-md:hidden"
               variant="ghost"
               size="icon-sm"
               :title="
@@ -193,7 +198,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </OButton>
             <OButton
               :data-test="`alert-template-list-${row.name}-clone-template`"
-              class="ms-1"
+              class="ms-1 max-md:hidden"
               variant="ghost"
               size="icon-sm"
               :title="t('alert_templates.clone')"
@@ -204,7 +209,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </OButton>
             <OButton
               :data-test="`alert-template-list-${row.name}-delete-template`"
-              class="ms-1"
+              class="ms-1 max-md:hidden"
               variant="ghost"
               size="icon-sm"
               :title="
@@ -219,6 +224,62 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             >
               <OIcon name="delete" size="sm" />
             </OButton>
+            <ODropdown side="bottom" align="end">
+              <template #trigger>
+                <OButton
+                  icon-left="more-vert"
+                  :title="t('dashboard.moreActions')"
+                  variant="ghost"
+                  size="icon-xs-sq"
+                  class="md:hidden"
+                  data-test="alert-template-list-row-more-actions"
+                  @click.stop
+                />
+              </template>
+              <ODropdownItem
+                icon-left="download"
+                class="md:hidden"
+                data-test="destination-export-menu"
+                @select="exportTemplate(row)"
+              >
+                <span>{{ t("alert_templates.exportTemplate") }}</span>
+              </ODropdownItem>
+              <ODropdownItem
+                icon-left="edit"
+                class="md:hidden"
+                :disabled="row.isPrebuilt"
+                :data-test="`alert-template-list-${row.name}-update-template-menu`"
+                @select="editTemplate(row)"
+              >
+                <span>{{
+                  row.isPrebuilt
+                    ? t("alert_templates.systemReadOnlyEdit")
+                    : t("alert_templates.edit")
+                }}</span>
+              </ODropdownItem>
+              <ODropdownItem
+                icon-left="content-copy"
+                class="md:hidden"
+                :data-test="`alert-template-list-${row.name}-clone-template-menu`"
+                @select="cloneTemplate(row)"
+              >
+                <span>{{ t("alert_templates.clone") }}</span>
+              </ODropdownItem>
+              <ODropdownItem
+                icon-left="delete"
+                variant="destructive"
+                class="md:hidden"
+                :disabled="row.isPrebuilt"
+                :data-test="`alert-template-list-${row.name}-delete-template-menu`"
+                @select="conformDeleteDestination(row)"
+              >
+                <span>{{
+                  row.isPrebuilt
+                    ? t("alert_templates.systemReadOnlyDelete")
+                    : t("alert_templates.delete")
+                }}</span>
+              </ODropdownItem>
+            </ODropdown>
           </template>
           <template #cell-used_by="{ row }">
             <DependencyUsageCell
@@ -292,6 +353,8 @@ import OTable from "@/lib/core/Table/OTable.vue";
 import OToggleGroup from "@/lib/core/ToggleGroup/OToggleGroup.vue";
 import OToggleGroupItem from "@/lib/core/ToggleGroup/OToggleGroupItem.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
 import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import AlertSectionTabs from "@/components/alerts/AlertSectionTabs.vue";
diff --git a/web/src/components/common/AppTabs.vue b/web/src/components/common/AppTabs.vue
index 1d0dbfd813..0ebcf75f12 100644
--- a/web/src/components/common/AppTabs.vue
+++ b/web/src/components/common/AppTabs.vue
@@ -15,7 +15,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <OToggleGroup v-if="show" :model-value="activeTab" @update:model-value="onSelect">
+  <OToggleGroup
+    v-if="show"
+    :model-value="activeTab"
+    :mobile-dropdown="mobileDropdown"
+    @update:model-value="onSelect"
+  >
     <OToggleGroupItem
       v-for="tab in visibleTabs"
       :key="tab.value"
@@ -77,11 +82,13 @@ const props = withDefaults(
     size?: ToggleGroupItemSize;
     // Tooltip shown when hovering an unsaved-changes dot (optional).
     dirtyTitle?: I18nText;
+    mobileDropdown?: boolean;
   }>(),
   {
     show: true,
     size: "sm",
     dirtyTitle: raw(""),
+    mobileDropdown: false,
   },
 );
 
diff --git a/web/src/components/common/BaseImport.vue b/web/src/components/common/BaseImport.vue
index 5ec3326418..4dc6538e2d 100644
--- a/web/src/components/common/BaseImport.vue
+++ b/web/src/components/common/BaseImport.vue
@@ -67,8 +67,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           class="logs-search-splitter h-full min-h-0 w-full"
           v-model="splitterModel"
           :style="splitterStyle"
-          :limits="[30, 60]"
-          :horizontal="false"
+          :limits="[30, stackPanes ? 100 : 60]"
+          :horizontal="stackPanes"
         >
           <template #before>
             <div class="border-border-default flex h-full w-full flex-col border-e">
@@ -218,6 +218,7 @@ import OFile from "@/lib/forms/File/OFile.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import OSeparator from "@/lib/core/Separator/OSeparator.vue";
 import OSplitter from "@/lib/core/Splitter/OSplitter.vue";
+import useBreakpoint from "@/composables/useBreakpoint";
 
 export default defineComponent({
   name: "BaseImport",
@@ -325,6 +326,8 @@ export default defineComponent({
   emits: ["back", "cancel", "import", "update:jsonStr", "update:jsonArray", "update:activeTab"],
   setup(props, { emit }) {
     const { t } = useI18nTyped();
+    const { lgUp } = useBreakpoint();
+    const stackPanes = computed(() => !lgUp.value);
 
     // State
     const jsonStr = ref<any>("");
@@ -519,6 +522,7 @@ export default defineComponent({
     return {
       raw,
       t,
+      stackPanes,
       jsonStr,
       jsonFiles,
       url,
diff --git a/web/src/components/common/KpiCard.vue b/web/src/components/common/KpiCard.vue
index 386391f5b5..7d2c82d198 100644
--- a/web/src/components/common/KpiCard.vue
+++ b/web/src/components/common/KpiCard.vue
@@ -30,12 +30,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <component
     :is="as"
-    class="bg-card-glass-bg rounded-default border-border-default flex flex-col gap-1 border px-3.5 py-2.5 transition-shadow duration-200 ease-in-out hover:shadow-md"
+    class="bg-card-glass-bg rounded-default border-border-default flex flex-col gap-1 border px-3.5 py-2.5 transition-shadow duration-200 ease-in-out hover:shadow-md max-lg:shrink-0 max-lg:basis-auto max-lg:flex-row-reverse max-lg:items-center max-lg:gap-1.5 max-lg:px-1.5 max-lg:py-1"
     :data-test="dataTest"
+    :title="label && !lgUp ? String(label) : undefined"
   >
-    <div class="mb-1 flex items-center justify-between gap-2">
+    <div class="mb-1 flex items-center justify-between gap-2 max-lg:mb-0">
       <div
-        class="min-w-0 truncate"
+        class="min-w-0 truncate max-lg:hidden"
         :class="labelClass || 'text-2xs text-text-secondary leading-normal font-semibold'"
       >
         <slot name="label">{{ label }}</slot>
@@ -44,7 +45,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         v-if="icon || $slots.icon"
         class="rounded-default inline-flex shrink-0 items-center justify-center"
         :class="[
-          iconSize === 'md' ? 'h-10 w-10' : 'h-6 w-6',
+          iconSize === 'md' ? 'h-10 w-10 max-lg:h-6 max-lg:w-6 max-lg:*:size-4' : 'h-6 w-6',
+
           iconClass || 'bg-surface-subtle text-text-secondary',
         ]"
       >
@@ -54,15 +56,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </span>
     </div>
 
-    <div v-if="$slots.value" class="flex items-baseline gap-1">
+    <div
+      v-if="$slots.value"
+      class="flex items-baseline gap-1 max-lg:[&>:first-child]:text-lg max-lg:[&>:first-child]:leading-none"
+    >
       <slot name="value" />
     </div>
 
-    <div v-if="$slots.trend" class="text-3xs flex items-center gap-1 font-medium">
+    <div v-if="$slots.trend" class="text-3xs flex items-center gap-1 font-medium max-lg:hidden">
       <slot name="trend" />
     </div>
 
-    <slot name="footer" />
+    <div v-if="$slots.footer" class="contents max-lg:hidden">
+      <slot name="footer" />
+    </div>
   </component>
 </template>
 
@@ -70,6 +77,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { raw, type I18nText } from "@/types/i18n";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import type { IconName } from "@/lib/core/Icon/OIcon.icons";
+import useBreakpoint from "@/composables/useBreakpoint";
+
+const { lgUp } = useBreakpoint();
 
 withDefaults(
   defineProps<{
diff --git a/web/src/components/common/KpiCardRow.vue b/web/src/components/common/KpiCardRow.vue
index 0de966b04d..fe1b474f89 100644
--- a/web/src/components/common/KpiCardRow.vue
+++ b/web/src/components/common/KpiCardRow.vue
@@ -31,7 +31,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   inset, so it lines up with the header and any table below it.
 -->
 <template>
-  <div class="grid" :class="gap" :style="gridStyle" data-test="kpi-card-row">
+  <div
+    class="grid max-lg:flex max-lg:flex-wrap max-lg:gap-1.5"
+    :class="gap"
+    :style="gridStyle"
+    data-test="kpi-card-row"
+  >
     <slot />
   </div>
 </template>
diff --git a/web/src/components/common/sidebar/FolderList.vue b/web/src/components/common/sidebar/FolderList.vue
index d0b8af2a5b..ad98ba005e 100644
--- a/web/src/components/common/sidebar/FolderList.vue
+++ b/web/src/components/common/sidebar/FolderList.vue
@@ -17,109 +17,148 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <!-- eslint-disable vue/v-on-event-hyphenation -->
 <!-- eslint-disable vue/attribute-hyphenation -->
 <template>
-  <div class="bg-surface-panel border-border-default flex h-full flex-col border-e pb-1">
-    <div class="folder-header bg-transparent">
-      <div
-        class="text-text-heading ps-page-edge flex items-center justify-between gap-2 py-1.5 pe-1.5 text-sm font-semibold"
+  <div
+    class="bg-surface-panel flex flex-col"
+    :class="mobileRail ? '' : 'border-border-default h-full border-e pb-1'"
+  >
+    <div
+      v-if="mobileRail"
+      class="flex items-center justify-between gap-1 py-1 ps-1.5 pe-1.5"
+      data-drawer-anchor="folder-list"
+    >
+      <OButton
+        variant="ghost"
+        size="sm"
+        data-test="folder-list-mobile-toggle"
+        @click="mobileDrawerOpen = true"
       >
-        {{ t("dashboard.folders") }}
-        <div>
-          <OButton
-            variant="ghost"
-            size="icon"
-            @click.stop="addFolder"
-            data-test="dashboard-new-folder-btn"
-            :title="t('common.addFolder')"
-          >
-            <OIcon name="add" size="sm" />
-          </OButton>
-        </div>
-      </div>
-      <!-- Search Input -->
-      <div class="px-1.5 pb-1.5">
-        <OSearchInput
-          v-model="searchQuery"
-          data-test="folder-search"
-          :placeholder="t('dashboard.searchFolder')"
-          clearable
-          class="w-full"
-        />
-      </div>
+        <template #icon-left><OIcon name="folder-outline" size="sm" /></template>
+        <span class="max-w-52 truncate">{{ activeFolderName || t("dashboard.folders") }}</span>
+      </OButton>
+      <OButton
+        variant="ghost"
+        size="icon"
+        @click.stop="addFolder"
+        data-test="dashboard-new-folder-btn"
+        :title="t('common.addFolder')"
+      >
+        <OIcon name="add" size="sm" />
+      </OButton>
     </div>
-    <div class="folders-tabs flex-1 overflow-y-auto px-1.5">
-      <OTabs
-        orientation="vertical"
-        dense
-        v-model="activeFolderId"
-        data-test="dashboards-folder-tabs"
-      >
-        <OTab
-          v-for="tab in filteredTabs"
-          :key="tab.folderId"
-          :name="tab.folderId"
-          class="test-class min-h-6"
-          :data-test="`dashboard-folder-tab-${tab.folderId}`"
-          @click="onTabClick(tab.folderId)"
-        >
+    <component
+      :is="mobileRail ? 'ODrawer' : 'div'"
+      v-bind="railWrapperProps"
+      :class="mobileRail ? undefined : 'contents'"
+    >
+      <div class="flex min-h-0 flex-col" :class="mobileRail ? 'h-full' : 'flex-1'">
+        <div class="folder-header bg-transparent">
           <div
-            class="folder-item group/row flex min-h-6 w-full flex-nowrap items-center gap-1.5"
-            :data-test="`dashboard-folder-tab-name-${tab.name}`"
+            v-if="!mobileRail"
+            class="text-text-heading ps-page-edge flex items-center justify-between gap-2 py-1.5 pe-1.5 text-sm font-semibold"
           >
-            <!-- Fixed-width icon slot. Always rendered, so every folder name
-                 starts on the same x-position whether or not it has an icon. -->
-            <FolderIcon
-              :token="iconFor(tab)"
-              :favorite="tab.folderId === FAVORITES_FOLDER_ID"
-              :data-test="`dashboard-folder-icon-${tab.name}`"
-            />
-            <span
-              class="folder-name min-w-0 flex-1 truncate text-left"
-              :title="tab.name"
-              :data-test="`dashboard-folder-name-${tab.name}`"
-              >{{ tab.name }}</span
-            >
-            <!-- Kept in flow rather than overlaid: an overlay needs a backdrop
-                 matching the row, and OTab only paints a hover background on
-                 INACTIVE tabs, so it would read wrong on the open folder. -->
-            <div
-              v-if="tab.folderId.toLowerCase() != 'default' && tab.folderId !== FAVORITES_FOLDER_ID"
-              class="hidden shrink-0 items-center group-hover/row:flex has-[[data-state=open]]:flex"
-            >
-              <ODropdown side="bottom" align="start">
-                <template #trigger>
-                  <OButton
-                    size="icon"
-                    variant="ghost"
-                    icon-left="more-vert"
-                    class="h-5 w-5"
-                    data-test="dashboard-more-icon"
-                  />
-                </template>
-                <ODropdownItem
-                  data-test="dashboard-edit-folder-icon"
-                  @select="editFolder(tab.folderId)"
-                >
-                  <template #icon-left>
-                    <OIcon name="edit" size="xs" />
-                  </template>
-                  {{ t("common.edit") }}
-                </ODropdownItem>
-                <ODropdownItem
-                  variant="destructive"
-                  data-test="dashboard-delete-folder-icon"
-                  @select="showDeleteFolderDialogFn(tab.folderId)"
-                >
-                  <template #icon-left>
-                    <OIcon name="delete" size="xs" />
-                  </template>
-                  {{ t("common.delete") }}
-                </ODropdownItem>
-              </ODropdown>
+            {{ t("dashboard.folders") }}
+            <div>
+              <OButton
+                variant="ghost"
+                size="icon"
+                @click.stop="addFolder"
+                data-test="dashboard-new-folder-btn"
+                :title="t('common.addFolder')"
+              >
+                <OIcon name="add" size="sm" />
+              </OButton>
             </div>
           </div>
-        </OTab>
-      </OTabs>
-    </div>
+          <!-- Search Input -->
+          <div class="px-1.5 pb-1.5" :class="mobileRail ? 'pt-1' : ''">
+            <OSearchInput
+              v-model="searchQuery"
+              data-test="folder-search"
+              :placeholder="t('dashboard.searchFolder')"
+              clearable
+              class="w-full"
+            />
+          </div>
+        </div>
+        <div class="folders-tabs flex-1 overflow-y-auto px-1.5">
+          <OTabs
+            orientation="vertical"
+            dense
+            v-model="activeFolderId"
+            data-test="dashboards-folder-tabs"
+          >
+            <OTab
+              v-for="tab in filteredTabs"
+              :key="tab.folderId"
+              :name="tab.folderId"
+              class="test-class min-h-6"
+              :data-test="`dashboard-folder-tab-${tab.folderId}`"
+              @click="onTabClick(tab.folderId)"
+            >
+              <div
+                class="folder-item group/row flex min-h-6 w-full flex-nowrap items-center gap-1.5"
+                :data-test="`dashboard-folder-tab-name-${tab.name}`"
+              >
+                <!-- Fixed-width icon slot. Always rendered, so every folder name
+                 starts on the same x-position whether or not it has an icon. -->
+                <FolderIcon
+                  :token="iconFor(tab)"
+                  :favorite="tab.folderId === FAVORITES_FOLDER_ID"
+                  :data-test="`dashboard-folder-icon-${tab.name}`"
+                />
+                <span
+                  class="folder-name min-w-0 flex-1 truncate text-left"
+                  :title="tab.name"
+                  :data-test="`dashboard-folder-name-${tab.name}`"
+                  >{{ tab.name }}</span
+                >
+                <!-- Kept in flow rather than overlaid: an overlay needs a backdrop
+                 matching the row, and OTab only paints a hover background on
+                 INACTIVE tabs, so it would read wrong on the open folder. -->
+                <div
+                  v-if="
+                    tab.folderId.toLowerCase() != 'default' && tab.folderId !== FAVORITES_FOLDER_ID
+                  "
+                  class="hidden shrink-0 items-center group-hover/row:flex has-[[data-state=open]]:flex max-md:flex"
+                  @click="isMobile && $event.stopPropagation()"
+                >
+                  <ODropdown side="bottom" align="start">
+                    <template #trigger>
+                      <OButton
+                        size="icon"
+                        variant="ghost"
+                        icon-left="more-vert"
+                        class="h-5 w-5"
+                        data-test="dashboard-more-icon"
+                      />
+                    </template>
+                    <ODropdownItem
+                      data-test="dashboard-edit-folder-icon"
+                      @select="editFolder(tab.folderId)"
+                    >
+                      <template #icon-left>
+                        <OIcon name="edit" size="xs" />
+                      </template>
+                      {{ t("common.edit") }}
+                    </ODropdownItem>
+                    <ODropdownItem
+                      variant="destructive"
+                      data-test="dashboard-delete-folder-icon"
+                      @select="showDeleteFolderDialogFn(tab.folderId)"
+                    >
+                      <template #icon-left>
+                        <OIcon name="delete" size="xs" />
+                      </template>
+                      {{ t("common.delete") }}
+                    </ODropdownItem>
+                  </ODropdown>
+                </div>
+              </div>
+            </OTab>
+          </OTabs>
+        </div>
+      </div>
+    </component>
   </div>
   <AddFolder
     v-model:open="showAddFolderDialog"
@@ -143,10 +182,12 @@ import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
 import OTabs from "@/lib/navigation/Tabs/OTabs.vue";
 import OTab from "@/lib/navigation/Tabs/OTab.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
+import ODrawer from "@/lib/overlay/Drawer/ODrawer.vue";
 import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
 import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 // @ts-nocheck
 import { computed, defineComponent, onMounted, ref, watch } from "vue";
+import useBreakpoint from "@/composables/useBreakpoint";
 import { useStore } from "vuex";
 import { useI18nTyped, raw } from "@/types/i18n";
 
@@ -172,6 +213,7 @@ export default defineComponent({
     OTab,
     OButton,
     OSearchInput,
+    ODrawer,
     ODropdown,
     ODropdownItem,
   },
@@ -186,6 +228,11 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    // Off when the rail already lives inside another drawer (OPageLayout #sidebar), or the triggers double-wrap.
+    drawerOnMobile: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: ["update:folders", "update:activeFolderId"],
   setup(props, { emit }) {
@@ -193,6 +240,25 @@ export default defineComponent({
     const { t } = useI18nTyped();
     const { showPositiveNotification, showErrorNotification } = useNotifications();
     const activeFolderId = ref("");
+    const { isMobile } = useBreakpoint();
+    const mobileDrawerOpen = ref(false);
+    const mobileRail = computed(() => isMobile.value && props.drawerOnMobile);
+    const railWrapperProps = computed(() =>
+      mobileRail.value
+        ? {
+            open: mobileDrawerOpen.value,
+            side: "left",
+            size: "sm",
+            bleed: true,
+            title: t("dashboard.folders"),
+            anchor: '[data-drawer-anchor="folder-list"]',
+            "onUpdate:open": (v: boolean) => (mobileDrawerOpen.value = v),
+          }
+        : {},
+    );
+    const activeFolderName = computed(
+      () => filteredTabs.value.find((f: any) => f.folderId === activeFolderId.value)?.name ?? "",
+    );
     const showAddFolderDialog = ref(false);
     const isFolderEditMode = ref(false);
     const selectedFolderToEdit = ref(null);
@@ -295,6 +361,7 @@ export default defineComponent({
       if (folderId === activeFolderId.value) {
         emit("update:activeFolderId", folderId);
       }
+      mobileDrawerOpen.value = false;
     };
 
     const filteredTabs = computed(() => {
@@ -313,6 +380,11 @@ export default defineComponent({
     });
 
     return {
+      isMobile,
+      mobileDrawerOpen,
+      mobileRail,
+      railWrapperProps,
+      activeFolderName,
       t,
       activeFolderId,
       showAddFolderDialog,
diff --git a/web/src/components/dashboards/OverrideConfigPopup.vue b/web/src/components/dashboards/OverrideConfigPopup.vue
index 7efb5016c9..1900fd23f6 100644
--- a/web/src/components/dashboards/OverrideConfigPopup.vue
+++ b/web/src/components/dashboards/OverrideConfigPopup.vue
@@ -104,7 +104,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               icon-left="close"
               :title="t('common.remove')"
               :data-test="`dashboard-addpanel-config-delete-column-${idx}`"
-              class="absolute! top-1/2 right-1 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100"
+              class="absolute! top-1/2 right-1 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 max-md:opacity-100"
               @click.stop="removeColumn(idx)"
             />
           </div>
diff --git a/web/src/components/dashboards/PanelContainer.vue b/web/src/components/dashboards/PanelContainer.vue
index d2d701b6be..911943b28d 100644
--- a/web/src/components/dashboards/PanelContainer.vue
+++ b/web/src/components/dashboards/PanelContainer.vue
@@ -22,6 +22,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     :data-test="`dashboard-panel-container`"
     :data-test-panel-id="props.data.id"
     :data-test-panel-title="props.data.title"
+    :data-panel-type="props.data.type"
   >
     <div
       :class="{
@@ -408,6 +409,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script lang="ts">
+import useBreakpoint from "@/composables/useBreakpoint";
 import {
   defineComponent,
   ref,
@@ -588,8 +590,10 @@ export default defineComponent({
     // layout while hidden so the title's truncation point never moves when the
     // pointer enters or leaves; `invisible` (visibility:hidden) also takes them
     // out of the tab order and the a11y tree, so nothing hidden is reachable.
+    // Touch has no hover, so < md the controls are simply always shown.
+    const { isMobile } = useBreakpoint();
     const hoverRevealClass = computed(() =>
-      isCurrentlyHoveredPanel.value ? "" : "invisible pointer-events-none",
+      isCurrentlyHoveredPanel.value || isMobile.value ? "" : "invisible pointer-events-none",
     );
 
     //for edit panel
diff --git a/web/src/components/dashboards/PanelEditor/PanelEditor.vue b/web/src/components/dashboards/PanelEditor/PanelEditor.vue
index 5e20b6e95c..d846b6606d 100644
--- a/web/src/components/dashboards/PanelEditor/PanelEditor.vue
+++ b/web/src/components/dashboards/PanelEditor/PanelEditor.vue
@@ -16,11 +16,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div class="flex h-full min-h-0 w-full flex-1" data-test="panel-editor-container">
-    <div class="flex" :style="rowStyle">
+    <div class="flex max-md:flex-col" :style="rowStyle">
       <!-- Chart Type Selection Sidebar -->
-      <div>
+      <div class="max-md:shrink-0">
         <div
-          class="scroll bg-surface-panel! border-border-default flex h-full max-w-25 min-w-25 flex-col overflow-x-hidden overflow-y-auto border-e"
+          class="scroll bg-surface-panel! border-border-default flex h-full max-w-25 min-w-25 flex-col overflow-x-hidden overflow-y-auto border-e max-md:h-auto max-md:w-full max-md:max-w-full max-md:min-w-0 max-md:overflow-x-hidden max-md:border-e-0 max-md:border-b"
         >
           <ChartSelection
             v-model:selectedChartType="dashboardPanelData.data.type"
@@ -38,7 +38,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       >
         <!-- Collapsed field list bar -->
         <div
-          v-if="!dashboardPanelData.layout.showFieldList"
+          v-if="!dashboardPanelData.layout.showFieldList && !isMobile"
           class="bg-surface-panel! border-border-default flex h-full w-12.5 shrink-0 cursor-pointer flex-col items-center justify-start overflow-y-auto border-e"
           data-test="panel-editor-field-list-sidebar-collapsed"
           @click="collapseFieldList"
@@ -59,6 +59,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-model="dashboardPanelData.layout.splitter"
           :limits="splitterLimits"
           :style="splitterStyle"
+          class="max-md:relative"
+          :before-class="fieldListPaneClass"
           :disable="!dashboardPanelData.layout.showFieldList"
           separatorClass="field-list-separator"
           :separatorStyle="{
@@ -72,7 +74,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template #before>
             <div :class="fieldListWrapperClass">
               <div
-                v-if="dashboardPanelData.layout.showFieldList"
+                v-if="dashboardPanelData.layout.showFieldList && !isMobile"
                 class="bg-surface-panel! flex flex-col"
                 :style="fieldListContainerStyle"
               >
@@ -92,6 +94,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 @scroll.passive="onBuilderScroll"
               >
                 <div class="flex h-full w-full flex-col" :style="layoutPanelContainerStyle">
+                  <div
+                    v-if="isMobile"
+                    class="border-border-default flex items-center border-b px-2 py-1.5"
+                    data-drawer-anchor="panel-editor-fields"
+                  >
+                    <OButton
+                      variant="outline"
+                      size="sm"
+                      icon-left="add"
+                      data-test="panel-editor-mobile-fields-btn"
+                      @click="mobileFieldsOpen = true"
+                    >
+                      {{ t("panel.fields") }}
+                    </OButton>
+                  </div>
                   <!-- Mode selection + Add To Dashboard row. Skip when empty (e.g.
                        dashboard mode) so its `my-2` margin isn't dead space. -->
                   <div
@@ -306,7 +323,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
               <!-- Config Panel Sidebar -->
               <div
-                class="col-auto"
+                :class="configPanelClass"
                 :style="pageType === 'logs' || pageType === 'build' ? { height: '100%' } : {}"
               >
                 <PanelSidebar
@@ -397,7 +414,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       >
         <!-- Collapsed field list bar for custom chart -->
         <div
-          v-if="!dashboardPanelData.layout.showFieldList"
+          v-if="!dashboardPanelData.layout.showFieldList && !isMobile"
           class="bg-surface-panel! border-border-default flex h-full w-12.5 shrink-0 cursor-pointer flex-col items-center justify-start overflow-y-auto border-e"
           data-test="panel-editor-field-list-sidebar-collapsed"
           @click="collapseFieldList"
@@ -417,9 +434,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <OSplitter
           v-model="dashboardPanelData.layout.splitter"
           :limits="[0, 20]"
+          class="max-md:relative"
+          :before-class="fieldListPaneClass"
           :disable="!dashboardPanelData.layout.showFieldList"
           :style="{
-            width: dashboardPanelData.layout.showFieldList ? '100%' : 'calc(100% - 3.125rem)',
+            width:
+              dashboardPanelData.layout.showFieldList || isMobile
+                ? '100%'
+                : 'calc(100% - 3.125rem)',
             height: '100%',
           }"
           separatorClass="field-list-separator"
@@ -440,7 +462,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template #before>
             <div :class="fieldListWrapperClass">
               <div
-                v-if="dashboardPanelData.layout.showFieldList"
+                v-if="dashboardPanelData.layout.showFieldList && !isMobile"
                 class="bg-surface-panel! flex flex-col"
                 :style="fieldListContainerStyle"
               >
@@ -458,6 +480,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :style="{ height: contentHeight, overflow: 'hidden' }"
             >
               <div class="scroll flex h-full min-w-0 flex-1 flex-col">
+                <div
+                  v-if="isMobile"
+                  class="border-border-default flex items-center border-b px-2 py-1.5"
+                  data-drawer-anchor="panel-editor-fields"
+                >
+                  <OButton
+                    variant="outline"
+                    size="sm"
+                    icon-left="add"
+                    data-test="panel-editor-mobile-fields-btn"
+                    @click="mobileFieldsOpen = true"
+                  >
+                    {{ t("panel.fields") }}
+                  </OButton>
+                </div>
                 <!-- Editor/Preview splitter -->
                 <div class="h-125 shrink-0 overflow-hidden">
                   <OSplitter
@@ -589,7 +626,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OSeparator vertical />
 
               <!-- Config Panel Sidebar for custom chart -->
-              <div class="col-auto">
+              <div :class="configPanelClass">
                 <PanelSidebar
                   :title="t('dashboard.configLabel')"
                   v-model="dashboardPanelData.layout.isConfigPanelOpen"
@@ -603,6 +640,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
     </div>
 
+    <!-- Stays open across adds so several fields can be placed on the axes in one visit. -->
+    <ODrawer
+      v-if="isMobile"
+      v-model:open="mobileFieldsOpen"
+      side="left"
+      size="sm"
+      bleed
+      :title="t('panel.fields')"
+      anchor='[data-drawer-anchor="panel-editor-fields"]'
+      data-test="panel-editor-mobile-fields-drawer"
+    >
+      <div class="flex h-full min-h-0 flex-col">
+        <PanelFieldList :editMode="editMode" frameless @collapse="mobileFieldsOpen = false" />
+      </div>
+    </ODrawer>
+
     <!-- Legends Dialog -->
     <ShowLegendsPopup
       v-model:open="showLegendsDialog"
@@ -638,6 +691,7 @@ import type {
 } from "./types/panelEditor";
 import { resolveConfig } from "./types/panelEditor";
 import { usePanelEditor } from "./composables/usePanelEditor";
+import useBreakpoint from "@/composables/useBreakpoint";
 import useDashboardPanelData from "@/composables/dashboard/useDashboardPanel";
 
 // ============================================================================
@@ -656,6 +710,7 @@ import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OSplitter from "@/lib/core/Splitter/OSplitter.vue";
 import ODialog from "@/lib/overlay/Dialog/ODialog.vue";
+import ODrawer from "@/lib/overlay/Drawer/ODrawer.vue";
 import OSeparator from "@/lib/core/Separator/OSeparator.vue";
 import type OverrideConfigComponent from "@/components/dashboards/addPanel/OverrideConfig.vue";
 
@@ -792,7 +847,7 @@ const {
   handleResultMetadataUpdate,
   metaDataValue,
   seriesDataUpdate,
-  collapseFieldList,
+  collapseFieldList: baseCollapseFieldList,
   layoutSplitterUpdated,
   updateVrlFunctionFieldList,
   onDataZoom,
@@ -814,6 +869,47 @@ const {
   validatePanel,
 });
 
+// The desktop 20% field-list splitter is unusable on a phone, so there it opens at ~half width.
+const { isMobile } = useBreakpoint();
+const mobileFieldsOpen = ref(false);
+const MOBILE_FIELD_SPLITTER = 45;
+const collapseFieldList = (): void => {
+  baseCollapseFieldList();
+  if (isMobile.value && dashboardPanelData.layout.showFieldList) {
+    dashboardPanelData.layout.splitter = MOBILE_FIELD_SPLITTER;
+  }
+};
+// Page init reopens the pane after mount, so on phones only the user's toggle (MOBILE_FIELD_SPLITTER) may open it.
+watch(
+  [isMobile, () => dashboardPanelData.layout.showFieldList],
+  ([mobile, show]) => {
+    if (mobile && show && dashboardPanelData.layout.splitter !== MOBILE_FIELD_SPLITTER) {
+      dashboardPanelData.layout.splitter = 0;
+      dashboardPanelData.layout.showFieldList = false;
+    }
+  },
+  { immediate: true },
+);
+
+// The field list and config sidebar can't share a phone-width row, so opening either closes the other.
+watch(
+  () => isMobile.value && dashboardPanelData.layout.isConfigPanelOpen,
+  (configOpenOnMobile) => {
+    if (configOpenOnMobile && dashboardPanelData.layout.showFieldList) {
+      dashboardPanelData.layout.splitter = 0;
+      dashboardPanelData.layout.showFieldList = false;
+    }
+  },
+);
+watch(
+  () => isMobile.value && dashboardPanelData.layout.showFieldList,
+  (fieldsOpenOnMobile) => {
+    if (fieldsOpenOnMobile && dashboardPanelData.layout.isConfigPanelOpen) {
+      dashboardPanelData.layout.isConfigPanelOpen = false;
+    }
+  },
+);
+
 // ============================================================================
 // Custom Chart State
 // ============================================================================
@@ -898,11 +994,18 @@ const chartAreaStyle = computed(() => {
 // Main content area class - logs needs flat background without card styling
 const mainContentAreaClass = computed(() => {
   if (props.pageType === "logs") {
-    return "flex bg-card-glass-bg";
+    return "flex bg-card-glass-bg max-md:relative";
   }
-  return "flex bg-card-glass-bg h-full overflow-y-hidden";
+  return "flex bg-card-glass-bg h-full overflow-y-hidden max-md:relative";
 });
 
+const configPanelClass = computed(() => [
+  "col-auto max-md:min-w-0",
+  isMobile.value && dashboardPanelData.layout.isConfigPanelOpen
+    ? "absolute inset-y-0 right-0 left-0 z-30"
+    : "",
+]);
+
 // Row style - logs/build needs height: 100%, others need overflow-y: auto
 const rowStyle = computed<CSSProperties>(() => {
   if (props.pageType === "logs" || props.pageType === "build") {
@@ -938,6 +1041,9 @@ const mainContentContainerStyle = computed<CSSProperties>(() => {
 
 // Splitter limits - logs/build uses [0, 100], others use [0, 20]
 const splitterLimits = computed<[number, number]>(() => {
+  if (isMobile.value) {
+    return [0, 60];
+  }
   if (props.pageType === "logs" || props.pageType === "build") {
     return [0, 100];
   }
@@ -947,7 +1053,8 @@ const splitterLimits = computed<[number, number]>(() => {
 // Splitter style
 const splitterStyle = computed(() => {
   return {
-    width: dashboardPanelData.layout.showFieldList ? "100%" : "calc(100% - 3.125rem)",
+    width:
+      dashboardPanelData.layout.showFieldList || isMobile.value ? "100%" : "calc(100% - 3.125rem)",
     height: "100%",
   };
 });
@@ -992,6 +1099,12 @@ const layoutPanelContainerStyle = computed(() => {
 });
 
 // Field list wrapper class - logs/build doesn't need padding-bottom
+const fieldListPaneClass = computed(() =>
+  isMobile.value && dashboardPanelData.layout.showFieldList
+    ? "max-md:absolute max-md:inset-y-0 max-md:left-0 max-md:z-30 max-md:w-full!"
+    : "",
+);
+
 const fieldListWrapperClass = computed(() => {
   if (props.pageType === "logs" || props.pageType === "build") {
     return "w-full h-full";
diff --git a/web/src/components/dashboards/addPanel/ChartSelection.vue b/web/src/components/dashboards/addPanel/ChartSelection.vue
index 64e3a18e7c..caf7eed8fa 100644
--- a/web/src/components/dashboards/addPanel/ChartSelection.vue
+++ b/web/src/components/dashboards/addPanel/ChartSelection.vue
@@ -16,10 +16,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div class="h-full">
-    <div class="w-25 p-0">
-      <ul class="m-0 flex list-none flex-wrap p-0">
+    <div class="w-25 p-0 max-md:w-full">
+      <ul class="m-0 flex list-none flex-wrap p-0 max-md:flex-nowrap max-md:overflow-x-auto">
         <li
-          class="w-12.5"
+          class="w-12.5 max-md:shrink-0"
           v-for="(item, index) in ChartsArray"
           :key="index"
           :class="[
diff --git a/web/src/components/dashboards/addPanel/DashboardGeoMapsQueryBuilder.vue b/web/src/components/dashboards/addPanel/DashboardGeoMapsQueryBuilder.vue
index 3c56bf4041..da0753d9c7 100644
--- a/web/src/components/dashboards/addPanel/DashboardGeoMapsQueryBuilder.vue
+++ b/web/src/components/dashboards/addPanel/DashboardGeoMapsQueryBuilder.vue
@@ -85,7 +85,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </OButton>
             </template>
             <div
-              class="field-function-menu-popup dashboard-geo-maps-query-builder-dropdown w-[48.1875rem]! translate-y-2 overflow-hidden rounded-none p-0 shadow-md"
+              class="field-function-menu-popup dashboard-geo-maps-query-builder-dropdown w-[min(48.1875rem,calc(100vw-1.5rem))]! translate-y-2 overflow-hidden rounded-none p-0 shadow-md max-lg:max-h-[var(--reka-popper-available-height,75vh)] max-lg:overflow-y-auto"
               :data-test="`dashboard-latitude-item-${latitudeLabel}-menu`"
             >
               <div
@@ -97,7 +97,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     dashboardPanelData.data.queries[dashboardPanelData.layout.currentQueryIndex]
                       .fields.latitude.isDerived
                       ? 'auto'
-                      : '48.1875rem',
+                      : 'min(48.1875rem, calc(100vw - 1.5rem))',
                 }"
               >
                 <DynamicFunctionPopUp
@@ -206,7 +206,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </OButton>
             </template>
             <div
-              class="field-function-menu-popup dashboard-geo-maps-query-builder-dropdown w-[48.1875rem]! translate-y-2 overflow-hidden rounded-none p-0 shadow-md"
+              class="field-function-menu-popup dashboard-geo-maps-query-builder-dropdown w-[min(48.1875rem,calc(100vw-1.5rem))]! translate-y-2 overflow-hidden rounded-none p-0 shadow-md max-lg:max-h-[var(--reka-popper-available-height,75vh)] max-lg:overflow-y-auto"
               :data-test="`dashboard-longitude-item-${longitudeLabel}-menu`"
             >
               <div
@@ -218,7 +218,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     dashboardPanelData.data.queries[dashboardPanelData.layout.currentQueryIndex]
                       .fields.longitude.isDerived
                       ? 'auto'
-                      : '48.1875rem',
+                      : 'min(48.1875rem, calc(100vw - 1.5rem))',
                 }"
               >
                 <DynamicFunctionPopUp
@@ -327,7 +327,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </OButton>
             </template>
             <div
-              class="field-function-menu-popup dashboard-geo-maps-query-builder-dropdown w-[48.1875rem]! translate-y-2 overflow-hidden rounded-none p-0 shadow-md"
+              class="field-function-menu-popup dashboard-geo-maps-query-builder-dropdown w-[min(48.1875rem,calc(100vw-1.5rem))]! translate-y-2 overflow-hidden rounded-none p-0 shadow-md max-lg:max-h-[var(--reka-popper-available-height,75vh)] max-lg:overflow-y-auto"
               :data-test="`dashboard-weight-item-${weightLabel}-menu`"
             >
               <div
@@ -339,7 +339,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     dashboardPanelData.data.queries[dashboardPanelData.layout.currentQueryIndex]
                       .fields.weight.isDerived
                       ? 'auto'
-                      : '48.1875rem',
+                      : 'min(48.1875rem, calc(100vw - 1.5rem))',
                 }"
               >
                 <DynamicFunctionPopUp
diff --git a/web/src/components/dashboards/addPanel/DashboardMapsQueryBuilder.vue b/web/src/components/dashboards/addPanel/DashboardMapsQueryBuilder.vue
index d9ed6293c7..50c10fccf1 100644
--- a/web/src/components/dashboards/addPanel/DashboardMapsQueryBuilder.vue
+++ b/web/src/components/dashboards/addPanel/DashboardMapsQueryBuilder.vue
@@ -85,7 +85,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </OButton>
             </template>
             <div
-              class="field-function-menu-popup dashboard-maps-query-builder-dropdown w-[48.1875rem]! translate-y-2 overflow-hidden rounded-none p-0 shadow-md"
+              class="field-function-menu-popup dashboard-maps-query-builder-dropdown w-[min(48.1875rem,calc(100vw-1.5rem))]! translate-y-2 overflow-hidden rounded-none p-0 shadow-md max-lg:max-h-[var(--reka-popper-available-height,75vh)] max-lg:overflow-y-auto"
               :data-test="`dashboard-name-item-${nameLabel}-menu`"
             >
               <div
@@ -97,7 +97,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     dashboardPanelData.data.queries[dashboardPanelData.layout.currentQueryIndex]
                       .fields.name.isDerived
                       ? 'auto'
-                      : '48.1875rem',
+                      : 'min(48.1875rem, calc(100vw - 1.5rem))',
                 }"
               >
                 <div>
@@ -210,7 +210,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </OButton>
             </template>
             <div
-              class="field-function-menu-popup dashboard-maps-query-builder-dropdown w-[48.1875rem]! translate-y-2 overflow-hidden rounded-none p-0 shadow-md"
+              class="field-function-menu-popup dashboard-maps-query-builder-dropdown w-[min(48.1875rem,calc(100vw-1.5rem))]! translate-y-2 overflow-hidden rounded-none p-0 shadow-md max-lg:max-h-[var(--reka-popper-available-height,75vh)] max-lg:overflow-y-auto"
               :data-test="`dashboard-value_for_maps-item-${valueLabel}-menu`"
             >
               <div
@@ -222,7 +222,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     dashboardPanelData.data.queries[dashboardPanelData.layout.currentQueryIndex]
                       .fields.value_for_maps.isDerived
                       ? 'auto'
-                      : '48.1875rem',
+                      : 'min(48.1875rem, calc(100vw - 1.5rem))',
                 }"
               >
                 <div>
diff --git a/web/src/components/dashboards/addPanel/DashboardQueryBuilder.vue b/web/src/components/dashboards/addPanel/DashboardQueryBuilder.vue
index 3900a406e7..52efbaba28 100644
--- a/web/src/components/dashboards/addPanel/DashboardQueryBuilder.vue
+++ b/web/src/components/dashboards/addPanel/DashboardQueryBuilder.vue
@@ -25,7 +25,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     "
   >
     <!-- x axis container -->
-    <div class="flex w-full flex-row ps-3" v-if="dashboardPanelData.data.type != 'metric'">
+    <div
+      class="flex w-full flex-row ps-3 max-md:flex-col"
+      v-if="dashboardPanelData.data.type != 'metric'"
+    >
       <div class="flex-1">
         <div class="flex flex-row">
           <div class="layout-name flex items-center whitespace-nowrap" :class="labelWidthClass">
@@ -111,7 +114,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </template>
                   <div
                     :data-test="`dashboard-x-item-${itemX?.alias}-menu`"
-                    class="field-function-menu-popup dashboard-query-builder-dropdown overflow-hidden p-0"
+                    class="field-function-menu-popup dashboard-query-builder-dropdown overflow-hidden p-0 max-lg:max-h-[var(--reka-popper-available-height,75vh)] max-lg:overflow-y-auto"
                     :style="{
                       width:
                         dashboardPanelData.data.queries[dashboardPanelData.layout.currentQueryIndex]
@@ -174,10 +177,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           dashboardPanelData.data.type == 'stacked'
         "
       >
-        <div class="flex h-full flex-row ps-3">
+        <div
+          class="max-md:border-border-default flex h-full flex-row ps-3 max-md:border-t max-md:ps-0"
+        >
           <!-- Separator between X and Breakdown/Pivot -->
-          <OSeparator vertical class="me-4" />
-          <div class="layout-name flex min-w-0 items-center whitespace-nowrap">
+          <OSeparator vertical class="me-4 max-md:hidden" />
+          <!-- shrink-0, not min-w-0: the nowrap label would overflow onto the drop-zone hint if it shrank. -->
+          <div class="layout-name flex min-w-0 items-center whitespace-nowrap max-lg:shrink-0">
             <span
               class="rounded-default bg-badge-orange-ol-text me-1.5 h-2 w-2 shrink-0"
               aria-hidden="true"
@@ -276,7 +282,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </template>
                   <div
                     :data-test="`dashboard-b-item-${itemB?.alias}-menu`"
-                    class="field-function-menu-popup dashboard-query-builder-dropdown overflow-hidden p-0"
+                    class="field-function-menu-popup dashboard-query-builder-dropdown overflow-hidden p-0 max-lg:max-h-[var(--reka-popper-available-height,75vh)] max-lg:overflow-y-auto"
                     :style="{
                       width:
                         dashboardPanelData.data.queries[dashboardPanelData.layout.currentQueryIndex]
@@ -411,7 +417,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </template>
               <div
                 :data-test="`dashboard-y-item-${itemY?.alias}-menu`"
-                class="field-function-menu-popup dashboard-query-builder-dropdown overflow-hidden p-0"
+                class="field-function-menu-popup dashboard-query-builder-dropdown overflow-hidden p-0 max-lg:max-h-[var(--reka-popper-available-height,75vh)] max-lg:overflow-y-auto"
                 :style="{
                   width:
                     dashboardPanelData.data.queries[dashboardPanelData.layout.currentQueryIndex]
@@ -545,7 +551,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </template>
                 <div
                   :data-test="`dashboard-z-item-${itemZ?.alias}-menu`"
-                  class="field-function-menu-popup dashboard-query-builder-dropdown overflow-hidden p-0"
+                  class="field-function-menu-popup dashboard-query-builder-dropdown overflow-hidden p-0 max-lg:max-h-[var(--reka-popper-available-height,75vh)] max-lg:overflow-y-auto"
                   :style="{
                     width:
                       dashboardPanelData.data.queries[dashboardPanelData.layout.currentQueryIndex]
diff --git a/web/src/components/dashboards/addPanel/DashboardQueryEditor.vue b/web/src/components/dashboards/addPanel/DashboardQueryEditor.vue
index 1d98e5bbf2..ae044c2a6d 100644
--- a/web/src/components/dashboards/addPanel/DashboardQueryEditor.vue
+++ b/web/src/components/dashboards/addPanel/DashboardQueryEditor.vue
@@ -17,7 +17,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div class="col-auto" data-test="dashboard-panel-searchbar">
     <div
-      class="sql-bar bg-section-header-bg border-border-default flex h-10 flex-row items-center justify-between gap-x-3 border-t border-b"
+      class="sql-bar bg-section-header-bg border-border-default flex h-10 flex-row items-center justify-between gap-x-3 border-t border-b max-md:h-auto max-md:flex-wrap max-md:gap-y-1 max-md:px-2 max-md:py-1"
       @click.stop
     >
       <div
@@ -161,7 +161,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           {{ multiQueryWarning }}
         </OTag>
       </div>
-      <div class="flex shrink-0 items-center gap-3">
+      <div class="flex shrink-0 items-center gap-3 max-md:max-w-full max-md:flex-wrap">
         <OSwitch
           data-test="logs-search-bar-show-query-toggle-btn"
           v-model="dashboardPanelData.layout.vrlFunctionToggle"
@@ -179,7 +179,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </div>
   </div>
   <div
-    class="flex flex-1 flex-col overflow-hidden"
+    class="flex flex-1 flex-col overflow-hidden max-md:h-80 max-md:flex-none"
     :style="!dashboardPanelData.layout.showQueryBar ? 'height: 0; flex: none;' : ''"
     data-test="dashboard-query"
   >
diff --git a/web/src/components/dashboards/addPanel/DashboardSankeyChartBuilder.vue b/web/src/components/dashboards/addPanel/DashboardSankeyChartBuilder.vue
index a6fea1665c..db99675604 100644
--- a/web/src/components/dashboards/addPanel/DashboardSankeyChartBuilder.vue
+++ b/web/src/components/dashboards/addPanel/DashboardSankeyChartBuilder.vue
@@ -85,7 +85,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </OButton>
             </template>
             <div
-              class="field-function-menu-popup dashboard-sankey-chart-builder-dropdown w-[48.1875rem]! translate-y-2 overflow-hidden rounded-none p-0 shadow-md"
+              class="field-function-menu-popup dashboard-sankey-chart-builder-dropdown w-[min(48.1875rem,calc(100vw-1.5rem))]! translate-y-2 overflow-hidden rounded-none p-0 shadow-md max-lg:max-h-[var(--reka-popper-available-height,75vh)] max-lg:overflow-y-auto"
               :data-test="`dashboard-source-item-${sourceLabel}-menu`"
             >
               <div
@@ -97,7 +97,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     dashboardPanelData.data.queries[dashboardPanelData.layout.currentQueryIndex]
                       .fields.source.isDerived
                       ? 'auto'
-                      : '48.1875rem',
+                      : 'min(48.1875rem, calc(100vw - 1.5rem))',
                 }"
               >
                 <div>
@@ -211,7 +211,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </OButton>
             </template>
             <div
-              class="field-function-menu-popup dashboard-sankey-chart-builder-dropdown w-[48.1875rem]! translate-y-2 overflow-hidden rounded-none p-0 shadow-md"
+              class="field-function-menu-popup dashboard-sankey-chart-builder-dropdown w-[min(48.1875rem,calc(100vw-1.5rem))]! translate-y-2 overflow-hidden rounded-none p-0 shadow-md max-lg:max-h-[var(--reka-popper-available-height,75vh)] max-lg:overflow-y-auto"
               :data-test="`dashboard-target-item-${targetLabel}-menu`"
             >
               <div
@@ -223,7 +223,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     dashboardPanelData.data.queries[dashboardPanelData.layout.currentQueryIndex]
                       .fields.target.isDerived
                       ? 'auto'
-                      : '48.1875rem',
+                      : 'min(48.1875rem, calc(100vw - 1.5rem))',
                 }"
               >
                 <div>
@@ -336,7 +336,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </OButton>
             </template>
             <div
-              class="field-function-menu-popup dashboard-sankey-chart-builder-dropdown w-[48.1875rem]! translate-y-2 overflow-hidden rounded-none p-0 shadow-md"
+              class="field-function-menu-popup dashboard-sankey-chart-builder-dropdown w-[min(48.1875rem,calc(100vw-1.5rem))]! translate-y-2 overflow-hidden rounded-none p-0 shadow-md max-lg:max-h-[var(--reka-popper-available-height,75vh)] max-lg:overflow-y-auto"
               :data-test="`dashboard-value-item-${valueLabel}-menu`"
             >
               <div
@@ -348,7 +348,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     dashboardPanelData.data.queries[dashboardPanelData.layout.currentQueryIndex]
                       .fields.value.isDerived
                       ? 'auto'
-                      : '48.1875rem',
+                      : 'min(48.1875rem, calc(100vw - 1.5rem))',
                 }"
               >
                 <div>
diff --git a/web/src/components/dashboards/addPanel/PanelFieldList.vue b/web/src/components/dashboards/addPanel/PanelFieldList.vue
index 9539e76d49..a9815cb891 100644
--- a/web/src/components/dashboards/addPanel/PanelFieldList.vue
+++ b/web/src/components/dashboards/addPanel/PanelFieldList.vue
@@ -1,8 +1,11 @@
 <!-- Copyright 2026 OpenObserve Inc. -->
 
 <template>
-  <div class="bg-surface-panel border-border-default flex h-full w-full flex-col border-e">
-    <div class="px-page-edge my-3 flex shrink-0 items-center justify-between">
+  <div
+    class="bg-surface-panel flex h-full w-full flex-col"
+    :class="frameless ? '' : 'border-border-default border-e'"
+  >
+    <div v-if="!frameless" class="px-page-edge my-3 flex shrink-0 items-center justify-between">
       <span class="text-base font-bold">{{ t("panel.fields") }}</span>
       <OButton
         variant="outline"
@@ -421,6 +424,8 @@ import type { FieldItem } from "@/lib/lists/FieldList/OFieldList.types";
 const props = defineProps<{
   editMode?: boolean;
   hideAllFieldsSelection?: boolean;
+  /** Drop the pane's own title row + border when a host (drawer) provides them. */
+  frameless?: boolean;
 }>();
 
 const dashboardPanelDataPageKey: string = inject("dashboardPanelDataPageKey", "dashboard");
diff --git a/web/src/components/dashboards/addPanel/PanelSidebar.vue b/web/src/components/dashboards/addPanel/PanelSidebar.vue
index d7e768a087..e1e7a1b094 100644
--- a/web/src/components/dashboards/addPanel/PanelSidebar.vue
+++ b/web/src/components/dashboards/addPanel/PanelSidebar.vue
@@ -17,7 +17,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div
     class="bg-surface-panel relative flex h-full min-h-0 flex-col"
-    :class="isOpen ? 'w-75' : 'w-12.5'"
+    :class="isOpen ? 'w-75 max-md:w-full' : 'w-12.5'"
     data-test="panel-sidebar-root"
   >
     <div
diff --git a/web/src/components/dashboards/addPanel/QueryTypeSelector.vue b/web/src/components/dashboards/addPanel/QueryTypeSelector.vue
index 7034a45f5b..246782ac72 100644
--- a/web/src/components/dashboards/addPanel/QueryTypeSelector.vue
+++ b/web/src/components/dashboards/addPanel/QueryTypeSelector.vue
@@ -16,7 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div>
-    <div class="flex gap-3">
+    <div class="flex gap-3 max-md:flex-wrap max-md:gap-1">
       <!-- Query Type: SQL / PromQL -->
       <OToggleGroup
         v-if="showQueryType"
diff --git a/web/src/components/dashboards/addPanel/ShowLegendsPopup.vue b/web/src/components/dashboards/addPanel/ShowLegendsPopup.vue
index caef0eb6ae..186ba0ca8a 100644
--- a/web/src/components/dashboards/addPanel/ShowLegendsPopup.vue
+++ b/web/src/components/dashboards/addPanel/ShowLegendsPopup.vue
@@ -71,7 +71,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OButton
                 variant="ghost"
                 size="icon"
-                class="ms-1 shrink-0 opacity-0 transition-opacity duration-200 ease-in-out group-hover:opacity-100"
+                class="ms-1 shrink-0 opacity-0 transition-opacity duration-200 ease-in-out group-hover:opacity-100 max-md:opacity-100"
                 data-test="dashboard-legend-copy-btn"
                 :data-copied="isLegendCopied(Number(index)) ? 'true' : undefined"
                 @click.stop="copyLegend(legend.name, Number(index))"
diff --git a/web/src/components/dashboards/addPanel/dynamicFunction/DynamicFunctionPopUp.vue b/web/src/components/dashboards/addPanel/dynamicFunction/DynamicFunctionPopUp.vue
index 34770f3e0b..e981e688d6 100644
--- a/web/src/components/dashboards/addPanel/dynamicFunction/DynamicFunctionPopUp.vue
+++ b/web/src/components/dashboards/addPanel/dynamicFunction/DynamicFunctionPopUp.vue
@@ -3,11 +3,11 @@
 <template>
   <div data-test="dynamic-function-popup-root" class="flex flex-col">
     <!-- Body -->
-    <div :class="fullMode ? 'flex min-h-0' : 'flex flex-col'">
+    <div :class="fullMode ? 'flex min-h-0 max-md:flex-col' : 'flex flex-col'">
       <!-- Property pane -->
       <div
-        class="flex w-52 shrink-0 flex-col gap-3.5 p-3"
-        :class="fullMode ? 'border-border-default border-e' : ''"
+        class="flex w-52 shrink-0 flex-col gap-3.5 p-3 max-md:w-full"
+        :class="fullMode ? 'border-border-default border-e max-md:border-e-0 max-md:border-b' : ''"
       >
         <div class="text-compact font-semibold" data-test="dynamic-function-popup-property-label">
           {{ t("dashboard.dynamicFunctionPopUp.property") }}
diff --git a/web/src/components/dashboards/panels/ChartRenderer.vue b/web/src/components/dashboards/panels/ChartRenderer.vue
index 645c08696b..90ab9283d6 100644
--- a/web/src/components/dashboards/panels/ChartRenderer.vue
+++ b/web/src/components/dashboards/panels/ChartRenderer.vue
@@ -82,6 +82,7 @@ import {
   inject,
 } from "vue";
 import { useStore } from "vuex";
+import useBreakpoint from "@/composables/useBreakpoint";
 import { useTheme } from "@/composables/useTheme";
 import { chartColor } from "@/utils/chartTheme";
 import * as echarts from "echarts/core";
@@ -643,6 +644,35 @@ export default defineComponent({
       zeroSizeReinitObserver.observe(chartRef.value);
     };
 
+    // < lg the window resize listener misses container-only size changes (rails collapsing, stacked panes).
+    let containerResizeObserver: ResizeObserver | null = null;
+    let containerResizeRaf = 0;
+    const { lgUp } = useBreakpoint();
+    let lastObservedSize = { w: 0, h: 0 };
+    const resizeToContainer = () => {
+      containerResizeRaf = 0;
+      if (!chartRef.value) return;
+      const w = chartRef.value.clientWidth;
+      const h = chartRef.value.clientHeight;
+      if (w > 0 && h > 0 && (w !== lastObservedSize.w || h !== lastObservedSize.h)) {
+        lastObservedSize = { w, h };
+        chart?.resize();
+      }
+    };
+    const observeContainerResize = () => {
+      if (!chartRef.value || containerResizeObserver) return;
+      lastObservedSize = {
+        w: chartRef.value.clientWidth,
+        h: chartRef.value.clientHeight,
+      };
+      // Coalesced to one resize per frame: drawer and splitter animations notify every frame.
+      containerResizeObserver = new ResizeObserver(() => {
+        if (lgUp.value) return;
+        if (!containerResizeRaf) containerResizeRaf = requestAnimationFrame(resizeToContainer);
+      });
+      containerResizeObserver.observe(chartRef.value);
+    };
+
     onMounted(async () => {
       try {
         await nextTick();
@@ -661,6 +691,7 @@ export default defineComponent({
           if (chartRef.value.clientWidth === 0 || chartRef.value.clientHeight === 0) {
             reinitWhenSized();
           }
+          observeContainerResize();
         }
         chart?.setOption(withChartFont(props?.data?.options || {}), {
           lazyUpdate: true,
@@ -682,6 +713,11 @@ export default defineComponent({
       zeroSizeReinitObserver?.disconnect();
       zeroSizeReinitObserver = null;
 
+      containerResizeObserver?.disconnect();
+      containerResizeObserver = null;
+      cancelAnimationFrame(containerResizeRaf);
+      containerResizeRaf = 0;
+
       // Cancel throttled functions
       throttledSetHoveredSeriesName.cancel();
       throttledSetHoveredSeriesIndex.cancel();
diff --git a/web/src/components/dashboards/panels/TableRenderer.vue b/web/src/components/dashboards/panels/TableRenderer.vue
index 3c1844b698..8fac915dbb 100644
--- a/web/src/components/dashboards/panels/TableRenderer.vue
+++ b/web/src/components/dashboards/panels/TableRenderer.vue
@@ -711,6 +711,13 @@ export default defineComponent({
   opacity: 0.4;
 }
 
+/* Touch has no th:hover — keep the sort affordance faintly visible. */
+@media (max-width: 47.99rem) {
+  .table-wrapper :deep(.pivot-sort-icon) {
+    opacity: 0.4;
+  }
+}
+
 .table-wrapper :deep(.pivot-sort-active) {
   opacity: 1 !important;
 }
diff --git a/web/src/components/dashboards/settings/AddSettingVariable.vue b/web/src/components/dashboards/settings/AddSettingVariable.vue
index b7d560dbac..a41122b873 100644
--- a/web/src/components/dashboards/settings/AddSettingVariable.vue
+++ b/web/src/components/dashboards/settings/AddSettingVariable.vue
@@ -81,7 +81,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div class="mt-4 text-base font-bold">
               {{ t("dashboard.addGeneralSettings") }}
             </div>
-            <div class="mt-3 flex gap-4">
+            <div class="mt-3 flex gap-4 max-md:flex-col max-md:gap-2">
               <div class="flex flex-1 flex-col">
                 <OFormInput
                   name="name"
@@ -110,7 +110,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                    line at the bottom of that select. Bottom-aligning would shove the
                    error-free sibling down to stay flush; top-aligning keeps both
                    inputs aligned and lets the error hang below. -->
-              <div class="flex items-start gap-x-4">
+              <div class="flex items-start gap-x-4 max-md:flex-col max-md:gap-y-2">
                 <OFormSelect
                   name="query_data.stream_type"
                   :label="t('dashboard.selectStreamType')"
diff --git a/web/src/components/dashboards/settings/TabsSettings.vue b/web/src/components/dashboards/settings/TabsSettings.vue
index 7e6b785fca..bf405d07df 100644
--- a/web/src/components/dashboards/settings/TabsSettings.vue
+++ b/web/src/components/dashboards/settings/TabsSettings.vue
@@ -98,6 +98,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               @click.stop="editItem(row.tabId)"
               data-test="dashboard-tab-settings-tab-edit-btn"
               icon-left="edit"
+              class="max-md:hidden"
             >
             </OButton>
             <OButton
@@ -107,9 +108,42 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :title="t('dashboard.delete')"
               @click.stop="deleteItem(row.tabId)"
               data-test="dashboard-tab-settings-tab-delete-btn"
+              class="max-md:hidden"
             >
               <template #icon-left><OIcon name="delete" size="sm" /></template>
             </OButton>
+            <ODropdown side="bottom" align="end">
+              <template #trigger>
+                <OButton
+                  icon-left="more-vert"
+                  :title="t('dashboard.moreActions')"
+                  variant="ghost"
+                  size="icon-xs-sq"
+                  class="md:hidden"
+                  data-test="dashboard-tab-settings-row-more-actions"
+                  @click.stop
+                />
+              </template>
+              <ODropdownItem
+                icon-left="edit"
+                :disabled="row.tabId === editTabId"
+                class="md:hidden"
+                data-test="dashboard-tab-settings-tab-edit-btn-menu"
+                @select="editItem(row.tabId)"
+              >
+                <span>{{ t("dashboard.edit") }}</span>
+              </ODropdownItem>
+              <ODropdownItem
+                v-if="currentDashboardData.data.tabs.length !== 1"
+                icon-left="delete"
+                variant="destructive"
+                class="md:hidden"
+                data-test="dashboard-tab-settings-tab-delete-btn-menu"
+                @select="deleteItem(row.tabId)"
+              >
+                <span>{{ t("dashboard.delete") }}</span>
+              </ODropdownItem>
+            </ODropdown>
           </div>
         </template>
       </OTable>
@@ -145,6 +179,8 @@ import { deleteTab, editTab, getDashboard, updateDashboard } from "@/utils/commo
 import { useRoute } from "vue-router";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import OTable from "@/lib/core/Table/OTable.vue";
 import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
 import { COL } from "@/lib/core/Table/OTable.types";
@@ -161,6 +197,8 @@ export default defineComponent({
     AddTab,
     TabsDeletePopUp,
     OButton,
+    ODropdown,
+    ODropdownItem,
     OIcon,
     OTable,
   },
diff --git a/web/src/components/dashboards/settings/VariableSettings.vue b/web/src/components/dashboards/settings/VariableSettings.vue
index 253df45a33..6a4df10801 100644
--- a/web/src/components/dashboards/settings/VariableSettings.vue
+++ b/web/src/components/dashboards/settings/VariableSettings.vue
@@ -171,6 +171,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 @click="editVariableFn(row.name)"
                 :data-test="`dashboard-edit-variable-${row.name}`"
                 icon-left="edit"
+                class="max-md:hidden"
               >
               </OButton>
               <OButton
@@ -179,9 +180,40 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :title="t('dashboard.delete')"
                 @click.stop="showDeleteDialogFn({ row: { name: row.name } })"
                 data-test="dashboard-delete-variable"
+                class="max-md:hidden"
               >
                 <template #icon-left><OIcon name="delete" size="sm" /></template>
               </OButton>
+              <ODropdown side="bottom" align="end">
+                <template #trigger>
+                  <OButton
+                    icon-left="more-vert"
+                    :title="t('dashboard.moreActions')"
+                    variant="ghost"
+                    size="icon-xs-sq"
+                    class="md:hidden"
+                    data-test="dashboard-variable-row-more-actions"
+                    @click.stop
+                  />
+                </template>
+                <ODropdownItem
+                  icon-left="edit"
+                  class="md:hidden"
+                  :data-test="`dashboard-edit-variable-${row.name}-menu`"
+                  @select="editVariableFn(row.name)"
+                >
+                  <span>{{ t("dashboard.edit") }}</span>
+                </ODropdownItem>
+                <ODropdownItem
+                  icon-left="delete"
+                  variant="destructive"
+                  class="md:hidden"
+                  data-test="dashboard-delete-variable-menu"
+                  @select="showDeleteDialogFn({ row: { name: row.name } })"
+                >
+                  <span>{{ t("dashboard.delete") }}</span>
+                </ODropdownItem>
+              </ODropdown>
             </div>
           </template>
         </OTable>
@@ -238,6 +270,8 @@ import VariablesDependenciesGraph from "./VariablesDependenciesGraph.vue";
 import useNotifications from "@/composables/useNotifications";
 import Sortable from "sortablejs";
 import OButton from "@/lib/core/Button/OButton.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import ODialog from "@/lib/overlay/Dialog/ODialog.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
 import OTable from "@/lib/core/Table/OTable.vue";
@@ -253,6 +287,8 @@ export default defineComponent({
     DashboardHeader,
     VariablesDependenciesGraph,
     OButton,
+    ODropdown,
+    ODropdownItem,
     OIcon,
     ODialog,
     OTag,
diff --git a/web/src/components/dashboards/tabs/TabList.vue b/web/src/components/dashboards/tabs/TabList.vue
index ac306a7a1b..8cc345b5da 100644
--- a/web/src/components/dashboards/tabs/TabList.vue
+++ b/web/src/components/dashboards/tabs/TabList.vue
@@ -102,7 +102,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             name="edit"
             size="sm"
             :aria-label="t('common.edit')"
-            class="text-text-secondary absolute top-1/2 right-0.5 -translate-y-1/2 cursor-pointer opacity-0 transition-opacity duration-150 group-hover/otab:opacity-60 hover:!opacity-100"
+            class="text-text-secondary absolute top-1/2 right-0.5 -translate-y-1/2 cursor-pointer opacity-0 transition-opacity duration-150 group-hover/otab:opacity-60 hover:!opacity-100 max-md:opacity-60"
             :data-test="`dashboard-tab-${tab.tabId}-rename-btn`"
             @click.stop="startRename(tab)"
             @mousedown.stop
diff --git a/web/src/components/dashboards/viewPanel/ViewPanel.vue b/web/src/components/dashboards/viewPanel/ViewPanel.vue
index 3f7a8ebc2f..0e23e652f6 100644
--- a/web/src/components/dashboards/viewPanel/ViewPanel.vue
+++ b/web/src/components/dashboards/viewPanel/ViewPanel.vue
@@ -16,13 +16,19 @@
 <!-- eslint-disable vue/no-unused-components -->
 <template>
   <div class="flex h-full flex-col overflow-hidden" data-test="view-panel-screen">
-    <div class="flex items-center justify-between p-3">
-      <div class="me-3 flex min-w-0 items-center text-xl tracking-[0.005em]">
-        <span class="truncate" data-test="dashboard-viewpanel-title">
+    <div class="flex items-center justify-between p-3 max-md:flex-wrap max-md:gap-y-2">
+      <div
+        class="me-3 flex min-w-0 items-center text-xl tracking-[0.005em] max-md:me-0 max-md:flex-1 max-md:basis-full"
+      >
+        <span
+          class="truncate"
+          :title="isMobile ? dashboardPanelData.data.title : undefined"
+          data-test="dashboard-viewpanel-title"
+        >
           {{ dashboardPanelData.data.title }}
         </span>
       </div>
-      <div class="flex shrink-0 items-center gap-2">
+      <div class="flex shrink-0 items-center gap-2 max-md:ms-auto">
         <!-- histogram interval for sql queries -->
         <HistogramIntervalDropDown
           v-if="!promqlMode && histogramFields.length"
@@ -178,6 +184,7 @@ import {
 } from "vue";
 
 import { useI18nTyped } from "@/types/i18n";
+import useBreakpoint from "@/composables/useBreakpoint";
 import { getDashboard, getPanel, checkIfVariablesAreLoaded } from "../../../utils/commons";
 import { useRoute } from "vue-router";
 import { useStore } from "vuex";
@@ -258,6 +265,7 @@ export default defineComponent({
     const showLegendsDialog = ref(false);
     const panelSchemaRendererRef: any = ref(null);
     const { t } = useI18nTyped();
+    const { isMobile } = useBreakpoint();
     const route = useRoute();
     const store = useStore();
 
@@ -789,6 +797,7 @@ export default defineComponent({
     });
 
     return {
+      isMobile,
       t,
       setTimeForVariables,
       dateTimeForVariables,
diff --git a/web/src/components/dbm/DbmInsightStrip.vue b/web/src/components/dbm/DbmInsightStrip.vue
index bc0b9215fd..2331bea706 100644
--- a/web/src/components/dbm/DbmInsightStrip.vue
+++ b/web/src/components/dbm/DbmInsightStrip.vue
@@ -73,7 +73,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- The affordance appears on hover rather than standing permanently, so
            a strip of five does not read as five buttons. -->
       <span
-        class="text-text-link text-2xs font-semibold opacity-0 transition-opacity group-hover:opacity-100"
+        class="text-text-link text-2xs font-semibold opacity-0 transition-opacity group-hover:opacity-100 max-md:opacity-100"
         :class="activeId === insight.id ? 'opacity-100' : ''"
       >
         {{ affordanceOf(insight) }}
diff --git a/web/src/components/dbm/DbmRefreshButton.vue b/web/src/components/dbm/DbmRefreshButton.vue
index e623260781..87f7b97a0e 100644
--- a/web/src/components/dbm/DbmRefreshButton.vue
+++ b/web/src/components/dbm/DbmRefreshButton.vue
@@ -55,7 +55,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <span
       v-if="hasRun && mode !== 'button'"
-      class="text-text-secondary text-xs whitespace-nowrap tabular-nums select-none"
+      class="text-text-secondary text-xs whitespace-nowrap tabular-nums select-none max-md:hidden"
       :data-test="`${dataTest}-age`"
     >
       {{ relative }}
diff --git a/web/src/components/dbm/DbmRowActions.vue b/web/src/components/dbm/DbmRowActions.vue
index 6dabc1a54a..0b4e571392 100644
--- a/web/src/components/dbm/DbmRowActions.vue
+++ b/web/src/components/dbm/DbmRowActions.vue
@@ -35,18 +35,45 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       variant="ghost"
       size="icon-xs-sq"
       :icon-left="action.icon"
+      class="max-md:hidden"
       :data-test="`${dataTest}-${action.id}`"
       @click.stop="emit('action', action.id)"
     >
       <!-- Icon-only actions carry no label, so the tooltip names them; `left` opens it into the row, not over the row above. -->
       <OTooltip side="left" :content="action.label" />
     </OButton>
+    <ODropdown side="bottom" align="end">
+      <template #trigger>
+        <OButton
+          icon-left="more-vert"
+          variant="ghost"
+          size="icon-xs-sq"
+          class="md:hidden"
+          :data-test="moreTest"
+          @click.stop
+        />
+      </template>
+      <ODropdownItem
+        v-for="action in actions"
+        :key="action.id"
+        :icon-left="action.icon"
+        class="md:hidden"
+        :data-test="`${dataTest}-${action.id}-menu`"
+        @select="emit('action', action.id)"
+      >
+        <span>{{ action.label }}</span>
+      </ODropdownItem>
+    </ODropdown>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
+
 import OButton from "@/lib/core/Button/OButton.vue";
 import type { IconName } from "@/lib/core/Icon/OIcon.icons";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import type { I18nText } from "@/types/i18n";
 
@@ -57,7 +84,7 @@ export interface DbmRowAction {
   label: I18nText;
 }
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     actions?: DbmRowAction[];
     dataTest?: string;
@@ -65,5 +92,7 @@ withDefaults(
   { actions: () => [], dataTest: "dbm-row-actions" },
 );
 
+const moreTest = computed(() => `${props.dataTest.replace(/-row-actions$/, "")}-row-more-actions`);
+
 const emit = defineEmits<{ (e: "action", id: string): void }>();
 </script>
diff --git a/web/src/components/dbm/DbmScopeFilters.vue b/web/src/components/dbm/DbmScopeFilters.vue
index 20e154c7d5..b60d16c514 100644
--- a/web/src/components/dbm/DbmScopeFilters.vue
+++ b/web/src/components/dbm/DbmScopeFilters.vue
@@ -104,7 +104,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <button
           type="button"
           :aria-label="t('dbm.filters.removeScope')"
-          class="border-border-default bg-surface-base text-text-secondary hover:bg-surface-subtle-hover hover:text-text-heading focus-visible:ring-accent ring-offset-surface-base absolute -top-1 -right-1 z-10 inline-flex size-4 cursor-pointer items-center justify-center rounded-full border opacity-0 shadow-sm transition outline-none group-hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-1"
+          class="border-border-default bg-surface-base text-text-secondary hover:bg-surface-subtle-hover hover:text-text-heading focus-visible:ring-accent ring-offset-surface-base absolute -top-1 -right-1 z-10 inline-flex size-4 cursor-pointer items-center justify-center rounded-full border opacity-0 shadow-sm transition outline-none group-hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-1 max-md:opacity-100"
           :data-test="`dbm-queries-scope-chip-${filter.key}-remove`"
           @click="filter.onChange(null)"
         >
@@ -135,7 +135,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <button
           type="button"
           :aria-label="t('dbm.filters.removeScope')"
-          class="border-border-default bg-surface-base text-text-secondary hover:bg-surface-subtle-hover hover:text-text-heading focus-visible:ring-accent ring-offset-surface-base absolute -top-1 -right-1 z-10 inline-flex size-4 cursor-pointer items-center justify-center rounded-full border opacity-0 shadow-sm transition outline-none group-hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-1"
+          class="border-border-default bg-surface-base text-text-secondary hover:bg-surface-subtle-hover hover:text-text-heading focus-visible:ring-accent ring-offset-surface-base absolute -top-1 -right-1 z-10 inline-flex size-4 cursor-pointer items-center justify-center rounded-full border opacity-0 shadow-sm transition outline-none group-hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-1 max-md:opacity-100"
           data-test="dbm-queries-scope-chip-insight-remove"
           @click="emit('clearInsight')"
         >
diff --git a/web/src/components/dbm/DbmTableToolbar.spec.ts b/web/src/components/dbm/DbmTableToolbar.spec.ts
index 0c6c9f5c88..6403240975 100644
--- a/web/src/components/dbm/DbmTableToolbar.spec.ts
+++ b/web/src/components/dbm/DbmTableToolbar.spec.ts
@@ -39,6 +39,8 @@ describe("DbmTableToolbar", () => {
    * The row's shape is what eight tables shared: a flex row that may shrink to
    * nothing, with a FIXED-width search box that may not. Lose `w-64` and the
    * search box grows with the page, pushing the scope chips off the row.
+   * Below lg the row wraps and the search drops to its own line, because
+   * `overflow-hidden` cut the trailing controls off instead of moving them.
    */
   it("keeps the search box at a fixed width inside a shrinkable row", () => {
     const wrapper = mountToolbar();
@@ -54,7 +56,7 @@ describe("DbmTableToolbar", () => {
       ]),
     );
     expect(wrapper.get('[data-test="dbm-samples-search"]').element.parentElement?.className).toBe(
-      "w-64 shrink-0",
+      "w-64 shrink-0 max-lg:order-last max-lg:w-full max-lg:basis-full",
     );
   });
 
diff --git a/web/src/components/dbm/DbmTableToolbar.vue b/web/src/components/dbm/DbmTableToolbar.vue
index 0bddaa4bce..cc26df7cf3 100644
--- a/web/src/components/dbm/DbmTableToolbar.vue
+++ b/web/src/components/dbm/DbmTableToolbar.vue
@@ -25,8 +25,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   of the row without owning its contents.
 -->
 <template>
-  <div class="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
-    <div class="w-64 shrink-0">
+  <div
+    class="flex min-w-0 flex-1 items-center gap-2 overflow-hidden max-lg:flex-wrap max-lg:overflow-visible"
+  >
+    <div class="w-64 shrink-0 max-lg:order-last max-lg:w-full max-lg:basis-full">
       <OSearchInput
         :model-value="search"
         :placeholder="placeholder"
diff --git a/web/src/components/functions/AddFunction.vue b/web/src/components/functions/AddFunction.vue
index 23910040e6..203378304f 100644
--- a/web/src/components/functions/AddFunction.vue
+++ b/web/src/components/functions/AddFunction.vue
@@ -55,8 +55,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-model="splitterModel"
           :limits="hideTestPanel ? [100, 100] : [30, 100]"
           class="w-full overflow-hidden"
-          :horizontal="false"
-          :separator-class="hideTestPanel ? 'hidden' : 'w-[0.0625rem] bg-card-glass-border'"
+          :horizontal="isMobile"
+          :separator-class="
+            hideTestPanel
+              ? 'hidden'
+              : isMobile
+                ? 'h-[0.0625rem] bg-card-glass-border'
+                : 'w-[0.0625rem] bg-card-glass-border'
+          "
         >
           <template v-slot:before>
             <!-- Workflows (hideTestPanel): drop the horizontal padding so the editor
@@ -220,6 +226,7 @@ import { useReo } from "@/services/reodotdev_analytics";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import { useVrlPlaceholder, useJsPlaceholder } from "@/composables/useVrlPlaceholder";
 import OSplitter from "@/lib/core/Splitter/OSplitter.vue";
+import useBreakpoint from "@/composables/useBreakpoint";
 import OForm from "@/lib/forms/Form/OForm.vue";
 import { useOForm } from "@/lib/forms/Form/useOForm";
 import { makeAddFunctionSchema, type AddFunctionForm } from "./AddFunction.schema";
@@ -300,6 +307,7 @@ export default defineComponent({
   setup(props, { emit, expose }) {
     const store: any = useStore();
     const router = useRouter();
+    const { isMobile } = useBreakpoint();
     const { track } = useReo();
 
     // let beingUpdated: boolean = false;
@@ -665,6 +673,7 @@ export default defineComponent({
       handleFunctionError,
       vrlFunctionError,
       splitterModel,
+      isMobile,
       closeAddFunction,
       confirmDialogMeta,
       transformTypeOptions,
diff --git a/web/src/components/functions/EnrichmentTableList.vue b/web/src/components/functions/EnrichmentTableList.vue
index 2dc01f1789..439862be11 100644
--- a/web/src/components/functions/EnrichmentTableList.vue
+++ b/web/src/components/functions/EnrichmentTableList.vue
@@ -71,8 +71,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           >
             <!-- Toolbar: type filter + search -->
             <template #toolbar>
-              <div class="flex w-full items-center gap-2">
+              <div class="flex w-full items-center gap-2 max-lg:min-w-0 max-md:contents">
                 <OToggleGroup
+                  mobile-dropdown
                   :model-value="selectedFilter"
                   @update:model-value="
                     (v) => {
@@ -98,7 +99,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <OSearchInput
                   data-test="enrichment-tables-search-input"
                   v-model="filterQuery"
-                  class="ms-auto w-64"
+                  class="ms-auto w-64 max-md:ms-0 max-md:w-auto max-md:min-w-40 max-md:flex-1"
                   :placeholder="t('function.searchEnrichmentTable')"
                 />
               </div>
@@ -235,6 +236,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :title="t('logStream.explore')"
                   variant="ghost"
                   size="icon-sm"
+                  class="max-md:hidden"
                   @click="exploreEnrichmentTable(row)"
                   icon-left="search"
                   data-row-action="view"
@@ -249,6 +251,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :title="t('logStream.schemaHeader')"
                   variant="ghost"
                   size="icon-sm"
+                  class="max-md:hidden"
                   @click="listSchema(row)"
                   icon-left="format-list-bulleted"
                   data-row-action="view"
@@ -266,6 +269,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :title="t('function.enrichmentTables')"
                   variant="ghost"
                   size="icon-sm"
+                  class="max-md:hidden"
                   @click="showAddUpdateFn(row)"
                   icon-left="edit"
                   data-row-action="edit"
@@ -277,10 +281,72 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :title="t('function.delete')"
                   variant="ghost-destructive"
                   size="icon-sm"
+                  class="max-md:hidden"
                   @click="showDeleteDialogFn(row)"
                   icon-left="delete"
                   data-row-action="delete"
                 />
+                <ODropdown side="bottom" align="end">
+                  <template #trigger>
+                    <OButton
+                      icon-left="more-vert"
+                      variant="ghost"
+                      size="icon-xs-sq"
+                      class="md:hidden"
+                      data-test="enrichment-table-row-more-actions"
+                      @click.stop
+                    />
+                  </template>
+                  <ODropdownItem
+                    v-if="
+                      !row.urlJobs ||
+                      row.urlJobs.length === 0 ||
+                      row.aggregateStatus === 'completed'
+                    "
+                    icon-left="search"
+                    class="md:hidden"
+                    :data-test="`${row.name}-explore-btn-menu`"
+                    @select="exploreEnrichmentTable(row)"
+                  >
+                    <span>{{ t("logStream.explore") }}</span>
+                  </ODropdownItem>
+                  <ODropdownItem
+                    v-if="
+                      !row.urlJobs ||
+                      row.urlJobs.length === 0 ||
+                      row.aggregateStatus === 'completed'
+                    "
+                    icon-left="format-list-bulleted"
+                    class="md:hidden"
+                    :data-test="`${row.name}-schema-btn-menu`"
+                    @select="listSchema(row)"
+                  >
+                    <span>{{ t("logStream.schemaHeader") }}</span>
+                  </ODropdownItem>
+                  <ODropdownItem
+                    v-if="
+                      !row.urlJobs ||
+                      row.urlJobs.length === 0 ||
+                      row.aggregateStatus === 'completed' ||
+                      row.aggregateStatus === 'failed'
+                    "
+                    icon-left="edit"
+                    class="md:hidden"
+                    :data-test="`${row.name}-edit-btn-menu`"
+                    @select="showAddUpdateFn(row)"
+                  >
+                    <span>{{ t("function.enrichmentTables") }}</span>
+                  </ODropdownItem>
+                  <ODropdownItem
+                    icon-left="delete"
+                    variant="destructive"
+                    class="md:hidden"
+                    :data-test="`${row.name}-delete-btn-menu`"
+                    @select="showDeleteDialogFn(row)"
+                  >
+                    <span>{{ t("function.delete") }}</span>
+                  </ODropdownItem>
+                </ODropdown>
               </div>
             </template>
 
@@ -301,7 +367,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
             <template #bottom>
               <div class="flex w-full items-center justify-between py-2">
-                <div class="me-4 flex items-center text-xs font-normal">
+                <div class="me-4 flex items-center text-xs font-normal max-md:hidden">
                   {{ resultTotal }} {{ t("function.enrichmentTables") }}
                 </div>
                 <OButton
@@ -438,6 +504,8 @@ import { useToast } from "@/lib/feedback/Toast/useToast";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import ODrawer from "@/lib/overlay/Drawer/ODrawer.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
 import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import PipelineSectionTabs from "@/components/pipeline/PipelineSectionTabs.vue";
@@ -463,6 +531,8 @@ export default defineComponent({
     OToggleGroupItem,
     OButton,
     ODrawer,
+    ODropdown,
+    ODropdownItem,
     OSearchInput,
     OTooltip,
     OIcon,
diff --git a/web/src/components/functions/FunctionList.vue b/web/src/components/functions/FunctionList.vue
index bd4aeba633..79d3da683a 100644
--- a/web/src/components/functions/FunctionList.vue
+++ b/web/src/components/functions/FunctionList.vue
@@ -63,7 +63,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             class="h-full w-full"
           >
             <template #toolbar>
-              <div class="flex w-full items-center gap-2">
+              <div class="flex w-full items-center gap-2 max-lg:min-w-0 max-md:contents">
                 <OSearchInput
                   data-test="functions-list-search-input"
                   v-model="filterQuery"
@@ -127,6 +127,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :title="t('function.updateTitle')"
                   data-test="function-list-edit-function-btn"
                   data-row-action="edit"
+                  class="max-md:hidden"
                   @click="showAddUpdateFn({ row })"
                   icon-left="edit"
                 />
@@ -136,6 +137,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :title="t('function.delete')"
                   data-test="function-list-delete-function-btn"
                   data-row-action="delete"
+                  class="max-md:hidden"
                   @click="showDeleteDialogFn({ row })"
                   icon-left="delete"
                 />
@@ -145,14 +147,52 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   icon-left="account-tree"
                   :title="t('function.associatedPipelines')"
                   data-row-action="view"
+                  class="max-md:hidden"
                   @click="getAssociatedPipelines({ row })"
                 />
+                <ODropdown side="bottom" align="end">
+                  <template #trigger>
+                    <OButton
+                      icon-left="more-vert"
+                      variant="ghost"
+                      size="icon-xs-sq"
+                      class="md:hidden"
+                      data-test="function-list-row-more-actions"
+                      @click.stop
+                    />
+                  </template>
+                  <ODropdownItem
+                    icon-left="edit"
+                    class="md:hidden"
+                    data-test="function-list-edit-function-btn-menu"
+                    @select="showAddUpdateFn({ row })"
+                  >
+                    <span>{{ t("function.updateTitle") }}</span>
+                  </ODropdownItem>
+                  <ODropdownItem
+                    icon-left="delete"
+                    variant="destructive"
+                    class="md:hidden"
+                    data-test="function-list-delete-function-btn-menu"
+                    @select="showDeleteDialogFn({ row })"
+                  >
+                    <span>{{ t("function.delete") }}</span>
+                  </ODropdownItem>
+                  <ODropdownItem
+                    icon-left="account-tree"
+                    class="md:hidden"
+                    data-test="function-list-associated-pipelines-menu"
+                    @select="getAssociatedPipelines({ row })"
+                  >
+                    <span>{{ t("function.associatedPipelines") }}</span>
+                  </ODropdownItem>
+                </ODropdown>
               </div>
             </template>
 
             <template #bottom>
               <div class="flex w-full items-center justify-between py-2">
-                <div class="me-4 flex items-center text-xs font-normal">
+                <div class="me-4 flex items-center text-xs font-normal max-md:hidden">
                   {{ resultTotal }} {{ t("function.header") }}
                 </div>
                 <OButton
@@ -245,6 +285,8 @@ import searchState from "@/composables/useLogs/searchState";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OBadge from "@/lib/core/Badge/OBadge.vue";
 import ODialog from "@/lib/overlay/Dialog/ODialog.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
 import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import PipelineSectionTabs from "@/components/pipeline/PipelineSectionTabs.vue";
@@ -265,6 +307,8 @@ export default defineComponent({
     OButton,
     OBadge,
     ODialog,
+    ODropdown,
+    ODropdownItem,
     OSearchInput,
     OTooltip,
   },
diff --git a/web/src/components/functions/FunctionsToolbar.vue b/web/src/components/functions/FunctionsToolbar.vue
index 2c27c8948f..22bdfe08f6 100644
--- a/web/src/components/functions/FunctionsToolbar.vue
+++ b/web/src/components/functions/FunctionsToolbar.vue
@@ -36,13 +36,13 @@
       />
     </template>
     <template #tabs>
-      <div class="o2-input flex h-full items-center gap-4">
+      <div class="o2-input flex h-full items-center gap-4 max-md:h-auto max-md:basis-full">
         <!-- Divider between the function name (header #title) and the language
              toggle — they are separate controls sharing one header row. h-full +
              the separator's own self-stretch span the full h-15 header row; my-2
              insets it to ~2.75rem, so it runs past the subtitle line ("Add
              Function") rather than stopping at the name. -->
-        <OSeparator vertical class="my-2" />
+        <OSeparator vertical class="my-2 max-md:hidden" />
         <!-- Transform-type (language) selector -->
         <div class="flex h-9 items-center gap-4">
           <!-- A segmented toggle rather than a radio group: the two languages are
diff --git a/web/src/components/iam/IngestionTokens.vue b/web/src/components/iam/IngestionTokens.vue
index aa17bc3652..321c1bec1a 100644
--- a/web/src/components/iam/IngestionTokens.vue
+++ b/web/src/components/iam/IngestionTokens.vue
@@ -73,7 +73,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :footer-title="t('iam.ingestionTokens')"
         >
           <template #toolbar>
-            <div class="flex w-full items-center gap-2">
+            <div class="flex w-full items-center gap-2 max-lg:min-w-0 max-md:contents">
               <OSearchInput
                 v-model="filterQuery"
                 :placeholder="t('ingestion.searchToken')"
diff --git a/web/src/components/iam/SyntheticsTokens.vue b/web/src/components/iam/SyntheticsTokens.vue
index e2c49c1ecc..35ea865435 100644
--- a/web/src/components/iam/SyntheticsTokens.vue
+++ b/web/src/components/iam/SyntheticsTokens.vue
@@ -78,7 +78,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :footer-title="t('synthetics.tokens.title')"
         >
           <template #toolbar>
-            <div class="flex w-full items-center gap-2">
+            <div class="flex w-full items-center gap-2 max-lg:min-w-0 max-md:contents">
               <OSearchInput
                 v-model="filterQuery"
                 :placeholder="t('synthetics.tokens.searchPlaceholder')"
diff --git a/web/src/components/iam/groups/AppGroups.vue b/web/src/components/iam/groups/AppGroups.vue
index d63d50e4f7..bb9ea83977 100644
--- a/web/src/components/iam/groups/AppGroups.vue
+++ b/web/src/components/iam/groups/AppGroups.vue
@@ -51,7 +51,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           @update:selected-ids="handleSelectedIdsUpdate"
         >
           <template #toolbar>
-            <div class="flex w-full items-center gap-2">
+            <div class="flex w-full items-center gap-2 max-lg:min-w-0 max-md:contents">
               <OSearchInput
                 v-model="filterQuery"
                 :placeholder="t('iam.searchGroup')"
@@ -83,6 +83,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-row-action="edit"
                 variant="ghost"
                 size="icon-sm"
+                class="max-md:hidden"
                 :title="t('common.edit')"
                 @click="editGroup(row)"
               >
@@ -93,11 +94,41 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-row-action="delete"
                 variant="ghost"
                 size="icon-sm"
+                class="max-md:hidden"
                 :title="t('common.delete')"
                 @click="showConfirmDialog(row)"
               >
                 <OIcon name="delete" size="sm" />
               </OButton>
+              <ODropdown side="bottom" align="end">
+                <template #trigger>
+                  <OButton
+                    icon-left="more-vert"
+                    variant="ghost"
+                    size="icon-xs-sq"
+                    class="md:hidden"
+                    data-test="iam-groups-row-more-actions"
+                    @click.stop
+                  />
+                </template>
+                <ODropdownItem
+                  icon-left="edit"
+                  class="md:hidden"
+                  :data-test="`iam-groups-edit-${row.group_name}-role-icon-menu`"
+                  @select="editGroup(row)"
+                >
+                  <span>{{ t("common.edit") }}</span>
+                </ODropdownItem>
+                <ODropdownItem
+                  icon-left="delete"
+                  variant="destructive"
+                  class="md:hidden"
+                  :data-test="`iam-groups-delete-${row.group_name}-role-icon-menu`"
+                  @select="showConfirmDialog(row)"
+                >
+                  <span>{{ t("common.delete") }}</span>
+                </ODropdownItem>
+              </ODropdown>
             </div>
           </template>
           <template #empty>
@@ -109,7 +140,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             />
           </template>
           <template #bottom>
-            <span class="text-xs font-normal">{{ rows.length }} {{ t("iam.groups") }}</span>
+            <span class="text-xs font-normal max-md:hidden"
+              >{{ rows.length }} {{ t("iam.groups") }}</span
+            >
             <OButton
               v-if="selectedGroups.length > 0"
               data-test="iam-groups-bulk-delete-btn"
@@ -156,6 +189,8 @@ import { ref, onBeforeMount, computed } from "vue";
 import AddGroup from "./AddGroup.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import OTable from "@/lib/core/Table/OTable.vue";
 import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
diff --git a/web/src/components/iam/organizations/ListOrganizations.vue b/web/src/components/iam/organizations/ListOrganizations.vue
index eb3242c9cf..170e5d5545 100644
--- a/web/src/components/iam/organizations/ListOrganizations.vue
+++ b/web/src/components/iam/organizations/ListOrganizations.vue
@@ -55,7 +55,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           table-id="iam-organizations-list"
         >
           <template #toolbar>
-            <div class="flex w-full items-center gap-2">
+            <div class="flex w-full items-center gap-2 max-lg:min-w-0 max-md:contents">
               <OSearchInput
                 v-model="filterQuery"
                 :placeholder="t('organization.search')"
@@ -112,6 +112,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-test="organization-name-edit"
                 variant="ghost"
                 size="icon-sm"
+                class="max-md:hidden"
                 :title="t('iam.listOrganizations.edit')"
                 @click="renameOrganization(row)"
               >
@@ -122,11 +123,43 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-test="organization-delete"
                 variant="ghost"
                 size="icon-sm"
+                class="max-md:hidden"
                 :title="t('iam.listOrganizations.deleteOrganization')"
                 @click="deleteOrganization(row)"
               >
                 <OIcon name="delete" size="sm" />
               </OButton>
+              <ODropdown side="bottom" align="end">
+                <template #trigger>
+                  <OButton
+                    icon-left="more-vert"
+                    :title="t('dashboard.moreActions')"
+                    variant="ghost"
+                    size="icon-xs-sq"
+                    class="md:hidden"
+                    data-test="organization-row-more-actions"
+                    @click.stop
+                  />
+                </template>
+                <ODropdownItem
+                  icon-left="edit"
+                  class="md:hidden"
+                  data-test="organization-name-edit-menu"
+                  @select="renameOrganization(row)"
+                >
+                  <span>{{ t("iam.listOrganizations.edit") }}</span>
+                </ODropdownItem>
+                <ODropdownItem
+                  v-if="canDeleteOrg(row)"
+                  icon-left="delete"
+                  variant="destructive"
+                  class="md:hidden"
+                  data-test="organization-delete-menu"
+                  @select="deleteOrganization(row)"
+                >
+                  <span>{{ t("iam.listOrganizations.deleteOrganization") }}</span>
+                </ODropdownItem>
+              </ODropdown>
             </div>
           </template>
         </OTable>
@@ -154,6 +187,8 @@ import { useConfirmDialog } from "@/composables/useConfirmDialog";
 import AddUpdateOrganization from "@/components/iam/organizations/AddUpdateOrganization.vue";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
 import OCodeCell from "@/lib/core/Table/cells/OCodeCell.vue";
@@ -177,6 +212,8 @@ export default defineComponent({
     AddUpdateOrganization,
     OEmptyState,
     OButton,
+    ODropdown,
+    ODropdownItem,
     OTooltip,
     OTag,
     OPageLayout,
diff --git a/web/src/components/iam/quota/Quota.vue b/web/src/components/iam/quota/Quota.vue
index 2e9c751dc0..87e47a808d 100644
--- a/web/src/components/iam/quota/Quota.vue
+++ b/web/src/components/iam/quota/Quota.vue
@@ -28,8 +28,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div :style="{ marginTop: 0 }" class="app-table-container flex min-h-0 flex-1 flex-col">
       <div class="bg-card-glass-bg mt-2.5 mb-2.5">
         <div class="px-3 py-2">
-          <div class="mb-2 flex w-full items-center justify-between">
-            <div class="flex items-center">
+          <div
+            class="mb-2 flex w-full items-center justify-between max-md:flex-wrap max-md:gap-y-1.5"
+          >
+            <div class="flex items-center max-md:min-w-0 max-md:flex-wrap max-md:gap-y-1.5">
               <OSelect
                 :loading="isOrgLoading"
                 :model-value="selectedOrganization?.value"
@@ -67,8 +69,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </OButton>
             </div>
           </div>
-          <div class="mb-2 flex w-full items-center justify-between">
-            <div v-if="selectedOrganization && activeType == 'table'" class="flex items-center">
+          <div
+            class="mb-2 flex w-full items-center justify-between max-md:flex-wrap max-md:gap-y-1.5"
+          >
+            <div
+              v-if="selectedOrganization && activeType == 'table'"
+              class="flex items-center max-md:min-w-0 max-md:flex-wrap max-md:gap-y-1.5"
+            >
               <OSearchInput
                 data-test="pipeline-list-search-input"
                 v-model="searchQuery"
@@ -94,7 +101,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 @update:model-value="handleApiCategorySelect"
               />
             </div>
-            <div v-if="selectedOrganization" class="float-right ms-auto flex items-center">
+            <div
+              v-if="selectedOrganization"
+              class="float-right ms-auto flex items-center max-md:flex-wrap max-md:justify-end max-md:gap-y-1.5"
+            >
               <div class="app-tabs-container me-3 h-9 w-fit">
                 <AppTabs
                   data-test="time-unit-tabs"
diff --git a/web/src/components/iam/roles/RoleTable.vue b/web/src/components/iam/roles/RoleTable.vue
index 7056a46419..4eed865015 100644
--- a/web/src/components/iam/roles/RoleTable.vue
+++ b/web/src/components/iam/roles/RoleTable.vue
@@ -8,6 +8,8 @@ import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import { useI18nTyped } from "@/types/i18n";
 
 const { t } = useI18nTyped();
@@ -112,7 +114,7 @@ const isUnusedRole = (row: any): boolean => row?.user_count === 0;
     @update:global-filter="emit('update:globalFilter', $event)"
   >
     <template #toolbar>
-      <div class="flex w-full items-center gap-2">
+      <div class="flex w-full items-center gap-2 max-lg:min-w-0 max-md:contents">
         <OSearchInput
           :model-value="globalFilter"
           :placeholder="t('iam.searchRole')"
@@ -143,6 +145,7 @@ const isUnusedRole = (row: any): boolean => row?.user_count === 0;
           data-row-action="edit"
           variant="ghost"
           size="icon-sm"
+          class="max-md:hidden"
           :title="t('common.edit')"
           @click="emit('edit', row)"
         >
@@ -153,11 +156,41 @@ const isUnusedRole = (row: any): boolean => row?.user_count === 0;
           data-row-action="delete"
           variant="ghost"
           size="icon-sm"
+          class="max-md:hidden"
           :title="t('common.delete')"
           @click="emit('delete', row)"
         >
           <OIcon name="delete" size="sm" />
         </OButton>
+        <ODropdown side="bottom" align="end">
+          <template #trigger>
+            <OButton
+              icon-left="more-vert"
+              variant="ghost"
+              size="icon-xs-sq"
+              class="md:hidden"
+              data-test="iam-roles-row-more-actions"
+              @click.stop
+            />
+          </template>
+          <ODropdownItem
+            icon-left="edit"
+            class="md:hidden"
+            :data-test="`iam-roles-edit-${row.role_name}-role-icon-menu`"
+            @select="emit('edit', row)"
+          >
+            <span>{{ t("common.edit") }}</span>
+          </ODropdownItem>
+          <ODropdownItem
+            icon-left="delete"
+            variant="destructive"
+            class="md:hidden"
+            :data-test="`iam-roles-delete-${row.role_name}-role-icon-menu`"
+            @select="emit('delete', row)"
+          >
+            <span>{{ t("common.delete") }}</span>
+          </ODropdownItem>
+        </ODropdown>
       </div>
     </template>
 
@@ -171,7 +204,7 @@ const isUnusedRole = (row: any): boolean => row?.user_count === 0;
     </template>
 
     <template #bottom>
-      <span class="text-xs font-normal">{{ data.length }} {{ t("iam.roles") }}</span>
+      <span class="text-xs font-normal max-md:hidden">{{ data.length }} {{ t("iam.roles") }}</span>
       <OButton
         v-if="(selectedIds?.length ?? 0) > 0"
         data-test="iam-roles-bulk-delete-btn"
diff --git a/web/src/components/iam/serviceAccounts/ServiceAccountsList.vue b/web/src/components/iam/serviceAccounts/ServiceAccountsList.vue
index feedf6db32..62b7594770 100644
--- a/web/src/components/iam/serviceAccounts/ServiceAccountsList.vue
+++ b/web/src/components/iam/serviceAccounts/ServiceAccountsList.vue
@@ -62,7 +62,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           @update:selected-ids="handleSelectedIdsUpdate"
         >
           <template #toolbar>
-            <div class="flex w-full items-center gap-2">
+            <div class="flex w-full items-center gap-2 max-lg:min-w-0 max-md:contents">
               <OSearchInput
                 v-model="filterQuery"
                 :placeholder="t('serviceAccounts.search')"
@@ -175,6 +175,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 variant="ghost"
                 size="icon-sm"
                 icon-left="refresh"
+                class="max-md:hidden"
                 @click="confirmRefreshAction(row)"
               />
               <OButton
@@ -184,6 +185,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 variant="ghost"
                 size="icon-sm"
                 icon-left="edit"
+                class="max-md:hidden"
                 @click="addRoutePush(row)"
               />
               <OButton
@@ -193,13 +195,52 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 variant="ghost"
                 size="icon-sm"
                 icon-left="delete"
+                class="max-md:hidden"
                 @click="confirmDeleteAction(row)"
               />
+              <ODropdown side="bottom" align="end">
+                <template #trigger>
+                  <OButton
+                    icon-left="more-vert"
+                    :title="t('dashboard.moreActions')"
+                    variant="ghost"
+                    size="icon-xs-sq"
+                    class="md:hidden"
+                    data-test="service-accounts-row-more-actions"
+                    @click.stop
+                  />
+                </template>
+                <ODropdownItem
+                  icon-left="refresh"
+                  class="md:hidden"
+                  data-test="service-accounts-refresh-menu"
+                  @select="confirmRefreshAction(row)"
+                >
+                  <span>{{ t("serviceAccounts.rotate") }}</span>
+                </ODropdownItem>
+                <ODropdownItem
+                  icon-left="edit"
+                  class="md:hidden"
+                  data-test="service-accounts-edit-menu"
+                  @select="addRoutePush(row)"
+                >
+                  <span>{{ t("serviceAccounts.update") }}</span>
+                </ODropdownItem>
+                <ODropdownItem
+                  icon-left="delete"
+                  variant="destructive"
+                  class="md:hidden"
+                  data-test="service-accounts-delete-menu"
+                  @select="confirmDeleteAction(row)"
+                >
+                  <span>{{ t("serviceAccounts.deleteServiceAccount") }}</span>
+                </ODropdownItem>
+              </ODropdown>
             </template>
           </template>
 
           <template #bottom>
-            <span class="text-xs font-normal"
+            <span class="text-xs font-normal max-md:hidden"
               >{{ serviceAccountsState.service_accounts_users.length }}
               {{ t("serviceAccounts.header") }}</span
             >
@@ -441,6 +482,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script lang="ts">
 import { defineComponent, ref, onBeforeMount } from "vue";
 import OButton from "@/lib/core/Button/OButton.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import ODialog from "@/lib/overlay/Dialog/ODialog.vue";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
 import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
@@ -489,6 +532,8 @@ export default defineComponent({
     AddServiceAccount,
     ConfirmDialog,
     OButton,
+    ODropdown,
+    ODropdownItem,
     ODialog,
     OIcon,
     OPageLayout,
diff --git a/web/src/components/iam/users/InvitationList.vue b/web/src/components/iam/users/InvitationList.vue
index ac3e83c2f3..e3ef95dabe 100644
--- a/web/src/components/iam/users/InvitationList.vue
+++ b/web/src/components/iam/users/InvitationList.vue
@@ -42,7 +42,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           table-id="iam-invitations-list"
         >
           <template #toolbar>
-            <div class="flex w-full items-center gap-2">
+            <div class="flex w-full items-center gap-2 max-lg:min-w-0 max-md:contents">
               <OSearchInput
                 v-model="filterQuery"
                 :placeholder="t('invitation.search')"
@@ -96,6 +96,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OButton
                 variant="primary"
                 size="sm"
+                class="max-md:hidden"
                 @click="acceptInvitation(row)"
                 :data-test="`accept-invitation-${row.token}`"
               >
@@ -104,15 +105,42 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OButton
                 variant="secondary"
                 size="sm"
+                class="max-md:hidden"
                 @click="rejectInvitation(row)"
                 :data-test="`reject-invitation-${row.token}`"
               >
                 {{ t("invitation.reject") }}
               </OButton>
+              <ODropdown side="bottom" align="end">
+                <template #trigger>
+                  <OButton
+                    icon-left="more-vert"
+                    variant="ghost"
+                    size="icon-xs-sq"
+                    class="md:hidden"
+                    data-test="invitation-list-row-more-actions"
+                    @click.stop
+                  />
+                </template>
+                <ODropdownItem
+                  class="md:hidden"
+                  :data-test="`accept-invitation-${row.token}-menu`"
+                  @select="acceptInvitation(row)"
+                >
+                  <span>{{ t("invitation.accept") }}</span>
+                </ODropdownItem>
+                <ODropdownItem
+                  class="md:hidden"
+                  :data-test="`reject-invitation-${row.token}-menu`"
+                  @select="rejectInvitation(row)"
+                >
+                  <span>{{ t("invitation.reject") }}</span>
+                </ODropdownItem>
+              </ODropdown>
             </div>
           </template>
           <template #bottom>
-            <span class="text-xs font-normal">
+            <span class="text-xs font-normal max-md:hidden">
               {{ resultTotal }} {{ t("invitation.pendingInvitations") }}
             </span>
           </template>
@@ -151,6 +179,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
 import OButton from "@/lib/core/Button/OButton.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
 import OTimeCell from "@/lib/core/Table/cells/OTimeCell.vue";
@@ -189,6 +219,8 @@ export default defineComponent({
     OPageLayout,
     OEmptyState,
     OButton,
+    ODropdown,
+    ODropdownItem,
     OTooltip,
     OTag,
     OTimeCell,
diff --git a/web/src/components/iam/users/User.vue b/web/src/components/iam/users/User.vue
index 7e6c9ab1eb..32957a605d 100644
--- a/web/src/components/iam/users/User.vue
+++ b/web/src/components/iam/users/User.vue
@@ -85,7 +85,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </template>
 
           <template #toolbar>
-            <div class="flex w-full items-center gap-2">
+            <div class="flex w-full items-center gap-2 max-lg:min-w-0 max-md:contents">
               <OSearchInput
                 v-model="filterQuery"
                 :placeholder="t('user.search')"
@@ -167,6 +167,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :title="t('user.delete')"
               variant="ghost"
               size="icon-sm"
+              class="max-md:hidden"
               :data-test="`delete-basic-user-${row.email}`"
               data-row-action="delete"
               @click="confirmDeleteAction(row)"
@@ -178,6 +179,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :title="t('user.revoke_invite')"
               variant="ghost"
               size="icon-sm"
+              class="max-md:hidden"
               :data-test="`revoke-invite-${row.email}`"
               data-row-action="delete"
               @click="confirmRevokeAction(row)"
@@ -189,15 +191,65 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :title="t('user.update')"
               variant="ghost"
               size="icon-sm"
+              class="max-md:hidden"
               :data-test="`edit-basic-user-${row.email}`"
               data-row-action="edit"
               @click="addRoutePush(row)"
             >
               <OIcon name="edit" size="sm" />
             </OButton>
+            <ODropdown
+              v-if="
+                (row.enableDelete && row.status != 'pending') ||
+                (row.status == 'pending' && row.token) ||
+                (row.enableEdit && row.status != 'pending')
+              "
+              side="bottom"
+              align="end"
+            >
+              <template #trigger>
+                <OButton
+                  icon-left="more-vert"
+                  variant="ghost"
+                  size="icon-xs-sq"
+                  class="md:hidden"
+                  data-test="user-list-row-more-actions"
+                  @click.stop
+                />
+              </template>
+              <ODropdownItem
+                v-if="row.enableDelete && row.status != 'pending'"
+                icon-left="delete"
+                variant="destructive"
+                class="md:hidden"
+                :data-test="`delete-basic-user-${row.email}-menu`"
+                @select="confirmDeleteAction(row)"
+              >
+                <span>{{ t("user.delete") }}</span>
+              </ODropdownItem>
+              <ODropdownItem
+                v-if="row.status == 'pending' && row.token"
+                icon-left="cancel"
+                variant="destructive"
+                class="md:hidden"
+                :data-test="`revoke-invite-${row.email}-menu`"
+                @select="confirmRevokeAction(row)"
+              >
+                <span>{{ t("user.revoke_invite") }}</span>
+              </ODropdownItem>
+              <ODropdownItem
+                v-if="row.enableEdit && row.status != 'pending'"
+                icon-left="edit"
+                class="md:hidden"
+                :data-test="`edit-basic-user-${row.email}-menu`"
+                @select="addRoutePush(row)"
+              >
+                <span>{{ t("user.update") }}</span>
+              </ODropdownItem>
+            </ODropdown>
           </template>
           <template #bottom>
-            <span class="text-xs font-normal"
+            <span class="text-xs font-normal max-md:hidden"
               >{{ rows.length }}
               {{
                 isEnterpriseOrCloud
@@ -283,6 +335,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script lang="ts">
 import { defineComponent, ref, onActivated, onBeforeMount, watch } from "vue";
 import OButton from "@/lib/core/Button/OButton.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
 import OStatStrip from "@/lib/data/StatStrip/OStatStrip.vue";
@@ -325,6 +379,8 @@ export default defineComponent({
     AddUser,
     MemberInvitation,
     OButton,
+    ODropdown,
+    ODropdownItem,
     OTooltip,
     OTag,
     OStatStrip,
diff --git a/web/src/components/ingestion/AIIntegrations.vue b/web/src/components/ingestion/AIIntegrations.vue
index 6e521ff598..94db35bb92 100644
--- a/web/src/components/ingestion/AIIntegrations.vue
+++ b/web/src/components/ingestion/AIIntegrations.vue
@@ -15,7 +15,99 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <OSplitter v-model="categorySplitterModel" unit="px" class="h-full">
+  <div v-if="compact" class="flex h-full min-h-0 flex-col">
+    <div class="border-border-default shrink-0 border-b px-2">
+      <OTabs v-model="selectedCategory" dense>
+        <OTab
+          v-for="cat in aiCategories"
+          :key="cat.slug"
+          :name="cat.slug"
+          :label="raw(cat.name)"
+          :data-test="`ai-integrations-category-${cat.slug}`"
+        />
+      </OTabs>
+    </div>
+    <div
+      class="border-border-default flex shrink-0 items-center border-b px-2 py-1"
+      data-drawer-anchor="ai-integrations-list"
+    >
+      <OButton
+        variant="ghost"
+        size="sm"
+        data-test="ai-integrations-list-mobile-btn"
+        @click="listDrawerOpen = true"
+      >
+        <template #icon-left><OIcon name="menu" size="sm" /></template>
+        {{ selectedIntegrationName || t("common.sidePanel") }}
+      </OButton>
+    </div>
+    <div
+      class="bg-card-glass-bg min-h-0 flex-1 overflow-auto pt-0.5"
+      data-test="ai-integrations-detail-pane"
+    >
+      <router-view />
+    </div>
+    <ODrawer
+      v-model:open="listDrawerOpen"
+      side="left"
+      size="sm"
+      bleed
+      seamless
+      anchor='[data-drawer-anchor="ai-integrations-list"]'
+      data-test="ai-integrations-list-mobile-drawer"
+    >
+      <div class="flex h-full flex-col">
+        <div class="ps-2 pe-4 pt-2">
+          <OSearchInput
+            data-test="ai-integrations-search-input"
+            v-model="integrationFilter"
+            clearable
+            class="indexlist-search-input w-full"
+            :placeholder="t('common.search')"
+          />
+        </div>
+        <div class="min-h-0 flex-1 overflow-y-auto">
+          <OTabs
+            v-model="selectedIntegration"
+            orientation="vertical"
+            dense
+            class="px-1"
+            @update:model-value="onIntegrationPicked"
+          >
+            <OTab
+              v-for="integration in filteredIntegrations"
+              :key="integration.slug"
+              :name="integration.routeName"
+              :label="raw(integration.name)"
+              :data-test="`ai-integrations-item-${integration.slug}`"
+            >
+              <template #icon>
+                <img
+                  v-if="
+                    (integration.logo || integration.logoDark) && !failedLogos.has(integration.slug)
+                  "
+                  :src="(isDark && integration.logoDark) || integration.logo"
+                  :alt="t('common.itemLogo', { name: integration.name })"
+                  class="rounded-default h-4.5 w-4.5 flex-none object-contain"
+                  loading="lazy"
+                  referrerpolicy="no-referrer"
+                  @error="onLogoError(integration.slug)"
+                />
+                <span
+                  v-else
+                  class="rounded-default bg-theme-accent text-text-inverse text-3xs grid h-4.5 w-4.5 flex-none place-items-center leading-none font-bold"
+                  aria-hidden="true"
+                  >{{ integration.name.charAt(0) }}</span
+                >
+              </template>
+            </OTab>
+          </OTabs>
+        </div>
+      </div>
+    </ODrawer>
+  </div>
+
+  <OSplitter v-else v-model="categorySplitterModel" unit="px" class="h-full">
     <template v-slot:before>
       <div class="h-full w-full">
         <div class="bg-surface-panel border-border-default h-full border-e">
@@ -117,11 +209,18 @@ import OTabs from "@/lib/navigation/Tabs/OTabs.vue";
 import OTab from "@/lib/navigation/Tabs/OTab.vue";
 import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
 import OSplitter from "@/lib/core/Splitter/OSplitter.vue";
+import ODrawer from "@/lib/overlay/Drawer/ODrawer.vue";
+import OButton from "@/lib/core/Button/OButton.vue";
+import OIcon from "@/lib/core/Icon/OIcon.vue";
+import useBreakpoint from "@/composables/useBreakpoint";
 
 export default defineComponent({
   name: "AIIntegrationsPage",
-  components: { OTabs, OTab, OSearchInput, OSplitter },
+  components: { OTabs, OTab, OSearchInput, OSplitter, ODrawer, OButton, OIcon },
   setup() {
+    const { lgUp } = useBreakpoint();
+    const compact = computed(() => !lgUp.value);
+    const listDrawerOpen = ref(false);
     const { t } = useI18nTyped();
     const store = useStore();
     const { isDark } = useTheme();
@@ -214,7 +313,19 @@ export default defineComponent({
       },
     );
 
+    const selectedIntegrationName = computed(
+      () => filteredIntegrations.value.find((i) => i.routeName === selectedIntegration.value)?.name,
+    );
+    const onIntegrationPicked = (value: string | number) => {
+      navigateToIntegration(value);
+      listDrawerOpen.value = false;
+    };
+
     return {
+      compact,
+      listDrawerOpen,
+      selectedIntegrationName,
+      onIntegrationPicked,
       raw,
       t,
       store,
diff --git a/web/src/components/ingestion/Custom.vue b/web/src/components/ingestion/Custom.vue
index d351bde467..646ec8bfbb 100644
--- a/web/src/components/ingestion/Custom.vue
+++ b/web/src/components/ingestion/Custom.vue
@@ -16,7 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <!-- eslint-disable vue/x-invalid-end-tag -->
 <template>
-  <DataSourceSidebarLayout v-model="tabs" :splitter-width="250">
+  <DataSourceSidebarLayout v-model="tabs" :splitter-width="250" compact-mode="strip">
     <template #tabs>
       <ORouteTab
         name="ingestLogs"
diff --git a/web/src/components/ingestion/DataSourceSidebarLayout.vue b/web/src/components/ingestion/DataSourceSidebarLayout.vue
index 06805d4d18..29c06cdd99 100644
--- a/web/src/components/ingestion/DataSourceSidebarLayout.vue
+++ b/web/src/components/ingestion/DataSourceSidebarLayout.vue
@@ -31,7 +31,109 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   #tabs slot — it receives { tabs, filter } so you can render/filter yourself.
 -->
 <template>
-  <OSplitter v-model="splitterWidthModel" unit="px" :horizontal="false" class="h-full">
+  <div v-if="compact" class="flex h-full min-h-0 flex-col">
+    <div
+      v-if="compactMode === 'strip'"
+      class="border-border-default shrink-0 border-b px-2"
+      :data-test="panelDataTest || undefined"
+    >
+      <OTabs
+        :model-value="modelValue"
+        dense
+        :class="tabsClass"
+        @update:model-value="(v) => emit('update:modelValue', v)"
+      >
+        <slot name="tabs" :tabs="filteredTabs" :filter="filter">
+          <ORouteTab
+            v-for="(tab, index) in filteredTabs"
+            :key="tab.name"
+            :title="tab.title || tab.name"
+            :default="index === 0"
+            :name="tab.name"
+            :to="tab.to"
+            :icon="tab.icon"
+            :label="tab.label"
+            :data-test="
+              tab.dataTest || (tabDataTestPrefix ? tabDataTestPrefix + tab.name : undefined)
+            "
+          />
+        </slot>
+      </OTabs>
+    </div>
+    <div
+      v-else
+      class="border-border-default flex shrink-0 items-center border-b px-2 py-1"
+      data-drawer-anchor="data-source-sidebar"
+    >
+      <OButton
+        variant="ghost"
+        size="sm"
+        data-test="data-source-sidebar-mobile-btn"
+        @click="mobileSidebarOpen = true"
+      >
+        <template #icon-left><OIcon name="menu" size="sm" /></template>
+        {{ triggerLabel }}
+      </OButton>
+    </div>
+    <div class="min-h-0 flex-1 overflow-hidden">
+      <slot />
+    </div>
+    <ODrawer
+      v-if="compactMode !== 'strip'"
+      v-model:open="mobileSidebarOpen"
+      side="left"
+      size="sm"
+      bleed
+      seamless
+      anchor='[data-drawer-anchor="data-source-sidebar"]'
+      data-test="data-source-sidebar-mobile-drawer"
+    >
+      <div
+        :class="['h-full overflow-hidden', { 'pt-1.5': !searchable }]"
+        :data-test="panelDataTest || undefined"
+      >
+        <div v-if="searchable" class="p-2">
+          <OSearchInput
+            v-model="filter"
+            :data-test="searchDataTest || undefined"
+            clearable
+            class="indexlist-search-input w-full"
+            :placeholder="searchPlaceholder || t('common.search')"
+          />
+        </div>
+        <OTabs
+          :model-value="modelValue"
+          orientation="vertical"
+          dense
+          :class="['px-1', tabsClass]"
+          @update:model-value="
+            (v) => {
+              emit('update:modelValue', v);
+              mobileSidebarOpen = false;
+            }
+          "
+        >
+          <slot name="tabs" :tabs="filteredTabs" :filter="filter">
+            <ORouteTab
+              v-for="(tab, index) in filteredTabs"
+              :key="tab.name"
+              :title="tab.title || tab.name"
+              :default="index === 0"
+              :name="tab.name"
+              :to="tab.to"
+              :icon="tab.icon"
+              :label="tab.label"
+              :data-test="
+                tab.dataTest || (tabDataTestPrefix ? tabDataTestPrefix + tab.name : undefined)
+              "
+            />
+          </slot>
+        </OTabs>
+      </div>
+    </ODrawer>
+  </div>
+
+  <OSplitter v-else v-model="splitterWidthModel" unit="px" :horizontal="false" class="h-full">
     <template #before>
       <div class="h-full w-full">
         <div class="bg-surface-panel border-border-default h-full border-e">
@@ -89,6 +191,10 @@ import ORouteTab from "@/lib/navigation/Tabs/ORouteTab.vue";
 import OTabs from "@/lib/navigation/Tabs/OTabs.vue";
 import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
 import OSplitter from "@/lib/core/Splitter/OSplitter.vue";
+import OButton from "@/lib/core/Button/OButton.vue";
+import OIcon from "@/lib/core/Icon/OIcon.vue";
+import ODrawer from "@/lib/overlay/Drawer/ODrawer.vue";
+import useBreakpoint from "@/composables/useBreakpoint";
 
 interface DataSourceTab {
   name: string;
@@ -119,6 +225,8 @@ const props = withDefaults(
     panelDataTest?: string;
     /** Prefix to derive each tab's data-test as `${prefix}${tab.name}` (when tab.dataTest is unset). */
     tabDataTestPrefix?: string;
+    /** < lg: "drawer" hides the rail behind a trigger; "strip" renders it as a horizontal tab row. */
+    compactMode?: "drawer" | "strip";
   }>(),
   {
     modelValue: "",
@@ -130,6 +238,7 @@ const props = withDefaults(
     tabsClass: "",
     panelDataTest: "",
     tabDataTestPrefix: "",
+    compactMode: "drawer",
   },
 );
 
@@ -149,6 +258,15 @@ watch(
 );
 
 const filter = ref("");
+
+const { lgUp } = useBreakpoint();
+const compact = computed(() => !lgUp.value);
+const mobileSidebarOpen = ref(false);
+// Nested layouts (signal rail + tool rail) each show a trigger; the active tab's label tells them apart.
+const triggerLabel = computed(() => {
+  const active = props.tabs.find((tab) => tab.name === props.modelValue);
+  return active ? active.label : t("common.sidePanel");
+});
 const filteredTabs = computed(() => {
   if (!props.searchable || !filter.value) {
     return props.tabs;
diff --git a/web/src/components/ingestion/recommended/AWSQuickSetup.vue b/web/src/components/ingestion/recommended/AWSQuickSetup.vue
index 3de27ce522..7418fee236 100644
--- a/web/src/components/ingestion/recommended/AWSQuickSetup.vue
+++ b/web/src/components/ingestion/recommended/AWSQuickSetup.vue
@@ -56,11 +56,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- Step: Services -->
       <div class="mb-6">
         <div
-          class="rounded-default flex cursor-pointer items-center justify-between px-3 py-2"
+          class="rounded-default flex cursor-pointer items-center justify-between px-3 py-2 max-md:flex-wrap max-md:gap-2"
           :class="collapsibleHeaderClass"
           @click="showServices = !showServices"
         >
-          <div class="flex items-center gap-2">
+          <div class="flex items-center gap-2 max-md:min-w-0">
             <OIcon :name="showServices ? 'expand-less' : 'expand-more'" size="sm" color="primary" />
             <div class="text-sm font-semibold" :class="stepLabelClass">
               {{ t("ingestion.selectServicesToMonitor") }}
@@ -70,7 +70,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               {{ t("ingestion.selected") }}
             </OTag>
           </div>
-          <div class="flex gap-2" @click.stop>
+          <div class="flex gap-2 max-md:ms-auto max-md:shrink-0" @click.stop>
             <OButton variant="ghost-primary" size="xs" @click="selectAll">{{
               t("ingestion.selectAll")
             }}</OButton>
@@ -136,11 +136,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <div class="mb-6">
           <div
-            class="rounded-default flex cursor-pointer items-center justify-between px-3 py-2"
+            class="rounded-default flex cursor-pointer items-center justify-between px-3 py-2 max-md:flex-wrap max-md:gap-2"
             :class="collapsibleHeaderClass"
             @click="showTargetRegions = !showTargetRegions"
           >
-            <div class="flex items-center gap-2">
+            <div class="flex items-center gap-2 max-md:min-w-0">
               <OIcon
                 :name="showTargetRegions ? 'expand-less' : 'expand-more'"
                 size="sm"
@@ -156,7 +156,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 >{{ targetRegions.length }} {{ t("ingestion.selected") }}</OTag
               >
             </div>
-            <div class="flex gap-2" @click.stop>
+            <div class="flex gap-2 max-md:ms-auto max-md:shrink-0" @click.stop>
               <OButton variant="ghost-primary" size="xs" @click="selectAllRegions">{{
                 t("ingestion.selectAll")
               }}</OButton>
diff --git a/web/src/components/ingestion/setupCard/SetupCardRenderer.vue b/web/src/components/ingestion/setupCard/SetupCardRenderer.vue
index 9d17b42847..98e3668119 100644
--- a/web/src/components/ingestion/setupCard/SetupCardRenderer.vue
+++ b/web/src/components/ingestion/setupCard/SetupCardRenderer.vue
@@ -1116,6 +1116,16 @@ function fireConfetti() {
 .step-inputs :deep(label) {
   margin-bottom: 0.125rem;
 }
+@media (max-width: 47.9375rem) {
+  .step-inputs > *,
+  .step-inputs :deep(.w-field-width-md) {
+    max-width: 100%;
+  }
+  .variant-tabs {
+    max-width: 100%;
+    overflow-x: auto;
+  }
+}
 
 /* ---- steps (lib OStepper in expanded mode) — only the per-step body content
    is styled here; the rail (indicator/connector/title) comes from OStepper. ---- */
diff --git a/web/src/components/login/Login.vue b/web/src/components/login/Login.vue
index 0c1450fd5e..0b23919905 100644
--- a/web/src/components/login/Login.vue
+++ b/web/src/components/login/Login.vue
@@ -15,7 +15,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="bg-card-glass-bg h-[100vh] w-[100vw]">
+  <!-- dvh, not vh: mobile browser chrome overlaps a 100vh box. -->
+  <div
+    class="bg-card-glass-bg h-[100vh] w-[100vw] max-md:h-dvh max-md:w-full max-md:overflow-y-auto"
+  >
     <div style="max-width: 25rem; padding-top: 6.25rem" class="mx-auto p-3">
       <div
         class="flex justify-center text-center"
diff --git a/web/src/components/logstream/schema.vue b/web/src/components/logstream/schema.vue
index ec03cc23ca..0a82cf2131 100644
--- a/web/src/components/logstream/schema.vue
+++ b/web/src/components/logstream/schema.vue
@@ -30,7 +30,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <template #header-right>
       <div
         v-if="indexData.name"
-        class="rounded-default bg-surface-panel border-border-default flex items-center gap-1.5 border px-2 py-1"
+        class="rounded-default bg-surface-panel border-border-default flex items-center gap-1.5 border px-2 py-1 max-md:hidden"
       >
         <img
           :src="getTimelineIcon"
@@ -70,7 +70,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             style="height: calc(100vh - 3.75rem)"
           >
             <!-- this the grid section the tiles section -->
-            <div class="stats-grid mb-2 grid grid-cols-4 gap-2">
+            <div class="stats-grid mb-2 grid grid-cols-4 gap-2 max-md:grid-cols-2">
               <!-- Docs Count Tile -->
               <div
                 v-if="store.state.zoConfig.show_stream_stats_doc_num"
@@ -170,7 +170,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 class="rounded-default bg-surface-base border-border-default flex h-full min-h-0 w-full flex-col overflow-hidden border p-2"
               >
                 <div>
-                  <div class="flex justify-start">
+                  <!-- min-w-0/max-w-full let OTabs' own arrow-scroller engage instead of clipping silently. -->
+                  <div class="flex justify-start max-md:max-w-full max-md:min-w-0">
                     <OTabs v-model="activeMainTab" dense>
                       <!-- Schema Settings Tab with conditional class -->
                       <OTab
@@ -224,7 +225,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     >
                       <div v-if="indexData.defaultFts" class="mt-3 font-normal">
                         <label
-                          class="bg-banner-warning-bg rounded-default border-banner-warning-border text-banner-warning-text border px-4 py-1 font-semibold"
+                          class="bg-banner-warning-bg rounded-default border-banner-warning-border text-banner-warning-text border px-4 py-1 font-semibold max-md:inline-block max-md:max-w-full"
                         >
                           {{ t("logStream.mapping") }}
                           {{ t("logStream.defaultFtsKeysUsed") }}</label
@@ -338,10 +339,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
                     <!-- OTable fills the remaining height inside the schemaSettings flex column -->
                     <div class="flex min-h-0 flex-1 flex-col overflow-hidden">
+                      <!-- horizontal-scroll: otherwise the elastic name column collapses to 0 beside the fixed ones. -->
                       <OTable
                         data-test="schema-log-stream-field-mapping-table"
                         :data="filteredSchemaData"
                         :columns="columns"
+                        horizontal-scroll
                         row-key="name"
                         selection="multiple"
                         :selected-ids="selectedSchemaIds"
@@ -601,6 +604,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           data-test="schema-log-stream-field-mapping-table"
                           :data="redBtnRows"
                           :columns="redBtnColumns"
+                          horizontal-scroll
                           row-key="index"
                           selection="multiple"
                           v-model:selected-ids="selectedDateIds"
@@ -646,8 +650,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <div
                   class="bg-card-glass-solid sticky bottom-0 z-1 mt-auto w-full flex-shrink-0 px-2 py-1"
                 >
-                  <div v-if="indexData.schema.length > 0" class="flex items-center justify-between">
-                    <div class="flex items-center gap-2">
+                  <div
+                    v-if="indexData.schema.length > 0"
+                    class="flex items-center justify-between max-md:flex-wrap max-md:gap-y-1"
+                  >
+                    <div class="flex items-center gap-2 max-md:flex-wrap">
                       <span v-if="activeMainTab == 'schemaSettings'" class="px-2 py-2"
                         ><strong> {{ selectedFields.length }}</strong>
                         {{ t("logStream.fieldsSelected") }}</span
diff --git a/web/src/components/pipeline/ImportPipeline.vue b/web/src/components/pipeline/ImportPipeline.vue
index 0e42cdda7b..cb2e6fffa2 100644
--- a/web/src/components/pipeline/ImportPipeline.vue
+++ b/web/src/components/pipeline/ImportPipeline.vue
@@ -29,7 +29,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- Output Section with Pipeline-specific Error Display -->
     <template #output-content>
       <div
-        class="border-border-default flex h-full w-full flex-col border-s"
+        class="border-border-default flex h-full w-full flex-col border-s max-md:min-w-0!"
         style="min-width: 25rem"
       >
         <div
diff --git a/web/src/components/pipeline/PipelineSectionTabs.vue b/web/src/components/pipeline/PipelineSectionTabs.vue
index f56d07110c..4b072bf648 100644
--- a/web/src/components/pipeline/PipelineSectionTabs.vue
+++ b/web/src/components/pipeline/PipelineSectionTabs.vue
@@ -38,7 +38,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       :data-test="`pipeline-section-tab-${s.key}`"
     >
       <OIcon :name="s.icon" size="sm" class="shrink-0" />
-      <span>{{ s.label }}</span>
+      <span :class="s.key === activeSectionKey ? '' : 'max-md:hidden'">{{ s.label }}</span>
       <span
         v-if="s.count != null"
         class="text-2xs rounded-full px-1.5 py-1 leading-none font-bold"
diff --git a/web/src/components/pipeline/PipelinesList.vue b/web/src/components/pipeline/PipelinesList.vue
index 4507766c2a..86f3b48df8 100644
--- a/web/src/components/pipeline/PipelinesList.vue
+++ b/web/src/components/pipeline/PipelinesList.vue
@@ -73,8 +73,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </template>
 
           <template #toolbar>
-            <div class="flex w-full items-center gap-2">
+            <div class="flex w-full items-center gap-2 max-lg:min-w-0 max-md:contents">
               <OToggleGroup
+                mobile-dropdown
                 :model-value="activeTab"
                 @update:model-value="onTabChange"
                 data-test="pipeline-list-tabs"
@@ -92,7 +93,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   {{ t("pipeline_list.tab_realtime") }}
                 </OToggleGroupItem>
               </OToggleGroup>
-              <div class="min-w-0 flex-1">
+              <div class="min-w-0 flex-1 max-md:min-w-40">
                 <OInput
                   data-test="pipeline-list-search-input"
                   v-model="filterQuery"
@@ -161,6 +162,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :variant="row.enabled ? 'ghost-destructive' : 'ghost'"
                 size="icon-sm"
                 :icon-left="row.enabled ? 'pause' : 'play-arrow'"
+                class="max-md:hidden"
                 @click.stop="togglePipeline(row)"
               >
                 <OTooltip
@@ -169,11 +171,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :shortcut-id="row.enabled ? 'pipelinesRowPause' : undefined"
                 />
               </OButton>
+              <!-- Hover-only preview with no click action, so it has no menu counterpart below md. -->
               <OButton
                 :data-test="`pipeline-list-${row.name}-view-pipeline`"
                 variant="ghost"
                 size="icon-sm"
                 :title="t('pipeline.view')"
+                class="max-md:hidden"
                 icon-left="visibility"
               >
                 <OTooltip max-width="none" side="left">
@@ -185,6 +189,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-row-action="edit"
                 variant="ghost"
                 size="icon-sm"
+                class="max-md:hidden"
                 @click.stop="editPipeline(row)"
                 icon-left="edit"
               >
@@ -222,6 +227,27 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     icon-left="more-vert"
                   />
                 </template>
+                <ODropdownItem
+                  :data-test="`pipeline-list-${row.name}-pause-start-action-menu`"
+                  class="md:hidden"
+                  @select="togglePipeline(row)"
+                >
+                  <template #icon-left>
+                    <OIcon size="sm" :name="row.enabled ? 'pause' : 'play-arrow'" />
+                  </template>
+                  {{ row.enabled ? t("alerts.pause") : t("alerts.start") }}
+                </ODropdownItem>
+                <ODropdownItem
+                  :data-test="`pipeline-list-${row.name}-update-pipeline-menu`"
+                  class="md:hidden"
+                  @select="editPipeline(row)"
+                >
+                  <template #icon-left>
+                    <OIcon size="sm" name="edit" />
+                  </template>
+                  {{ t("alerts.edit") }}
+                </ODropdownItem>
+                <ODropdownSeparator class="md:hidden" />
                 <ODropdownItem
                   :data-test="`pipeline-list-${row.name}-export-action`"
                   shortcut-id="pipelinesRowExport"
@@ -315,7 +341,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
           <template #bottom="bottomProps">
             <div class="flex w-full items-center justify-between py-1">
-              <div class="me-4 flex items-center text-xs font-normal">
+              <div class="me-4 flex items-center text-xs font-normal max-md:hidden">
                 {{ bottomProps.totalRows }} {{ t("pipeline.header") }}
               </div>
               <div v-if="selectedPipelineIds.length > 0" class="flex items-center gap-2">
diff --git a/web/src/components/pipelines/BackfillJobsList.vue b/web/src/components/pipelines/BackfillJobsList.vue
index aff56a377f..44917bceae 100644
--- a/web/src/components/pipelines/BackfillJobsList.vue
+++ b/web/src/components/pipelines/BackfillJobsList.vue
@@ -105,7 +105,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
           <!-- Bottom footer -->
           <template #bottom="{ totalRows }">
-            <div class="me-4 flex items-center py-2 text-xs font-normal">
+            <div class="me-4 flex items-center py-2 text-xs font-normal max-md:hidden">
               {{ t("pipeline.backfillJobLabel", { count: totalRows }, totalRows) }}
             </div>
           </template>
@@ -174,6 +174,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 v-if="canPauseJob(row)"
                 variant="ghost-destructive"
                 size="icon-sm"
+                class="max-md:hidden"
                 @click="confirmPauseJob(row)"
                 data-test="pause-job-btn"
                 icon-left="pause"
@@ -184,6 +185,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 v-if="canResumeJob(row)"
                 variant="ghost-success"
                 size="icon-sm"
+                class="max-md:hidden"
                 @click="confirmResumeJob(row)"
                 data-test="resume-job-btn"
                 icon-left="play-arrow"
@@ -194,6 +196,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 v-if="canEditJob(row.status)"
                 variant="ghost"
                 size="icon-sm"
+                class="max-md:hidden"
                 @click="editJob(row)"
                 data-test="edit-job-btn"
                 icon-left="edit"
@@ -203,6 +206,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OButton
                 variant="ghost"
                 size="icon-sm"
+                class="max-md:hidden"
                 @click="viewJob(row)"
                 data-test="view-job-btn"
                 icon-left="visibility"
@@ -213,6 +217,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 v-if="canDeleteJob(row.status)"
                 variant="ghost-destructive"
                 size="icon-sm"
+                class="max-md:hidden"
                 @click="confirmDeleteJob(row)"
                 data-test="delete-job-btn"
                 icon-left="delete"
@@ -223,12 +228,79 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 v-if="row.error"
                 variant="ghost-destructive"
                 size="icon-sm"
+                class="max-md:hidden"
                 @click="showErrorDialog(row)"
                 data-test="error-indicator-btn"
                 icon-left="error"
               >
                 <OTooltip :content="t('common.errorPrefix', { message: row.error })" />
               </OButton>
+              <ODropdown side="bottom" align="end">
+                <template #trigger>
+                  <OButton
+                    icon-left="more-vert"
+                    variant="ghost"
+                    size="icon-xs-sq"
+                    class="md:hidden"
+                    data-test="backfill-jobs-row-more-actions"
+                    @click.stop
+                  />
+                </template>
+                <ODropdownItem
+                  v-if="canPauseJob(row)"
+                  icon-left="pause"
+                  class="md:hidden"
+                  data-test="pause-job-btn-menu"
+                  @select="confirmPauseJob(row)"
+                >
+                  <span>{{ t("pipeline.jobTooltipLabel") }}</span>
+                </ODropdownItem>
+                <ODropdownItem
+                  v-if="canResumeJob(row)"
+                  icon-left="play-arrow"
+                  class="md:hidden"
+                  data-test="resume-job-btn-menu"
+                  @select="confirmResumeJob(row)"
+                >
+                  <span>{{ t("pipeline.resumeJob") }}</span>
+                </ODropdownItem>
+                <ODropdownItem
+                  v-if="canEditJob(row.status)"
+                  icon-left="edit"
+                  class="md:hidden"
+                  data-test="edit-job-btn-menu"
+                  @select="editJob(row)"
+                >
+                  <span>{{ t("pipeline.editJob") }}</span>
+                </ODropdownItem>
+                <ODropdownItem
+                  icon-left="visibility"
+                  class="md:hidden"
+                  data-test="view-job-btn-menu"
+                  @select="viewJob(row)"
+                >
+                  <span>{{ t("pipeline.viewDetails") }}</span>
+                </ODropdownItem>
+                <ODropdownItem
+                  v-if="canDeleteJob(row.status)"
+                  icon-left="delete"
+                  variant="destructive"
+                  class="md:hidden"
+                  data-test="delete-job-btn-menu"
+                  @select="confirmDeleteJob(row)"
+                >
+                  <span>{{ t("pipeline.deleteJobTooltip") }}</span>
+                </ODropdownItem>
+                <ODropdownItem
+                  v-if="row.error"
+                  icon-left="error"
+                  class="md:hidden"
+                  data-test="error-indicator-btn-menu"
+                  @select="showErrorDialog(row)"
+                >
+                  <span>{{ t("common.errorPrefix", { message: row.error }) }}</span>
+                </ODropdownItem>
+              </ODropdown>
             </div>
           </template>
         </OTable>
@@ -313,6 +385,8 @@ import OSelect from "@/lib/forms/Select/OSelect.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import ODialog from "@/lib/overlay/Dialog/ODialog.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import OTable from "@/lib/core/Table/OTable.vue";
 import OTableColumnToggle from "@/lib/core/Table/sub-components/OTableColumnToggle.vue";
 import useExternalColumnToggle from "@/composables/useExternalColumnToggle";
diff --git a/web/src/components/pipelines/PipelineHistory.vue b/web/src/components/pipelines/PipelineHistory.vue
index 5bbbf59068..9413ca23b5 100644
--- a/web/src/components/pipelines/PipelineHistory.vue
+++ b/web/src/components/pipelines/PipelineHistory.vue
@@ -44,7 +44,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         @update:model-value="onPipelineSelected"
         :placeholder="t('pipeline.searchHistory')"
         data-test="pipeline-history-search-select"
-        class="min-w-62.5"
+        class="min-w-62.5 max-md:min-w-0"
         clearable
       >
         <template #empty>
@@ -219,7 +219,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </template>
 
           <template #bottom="{ totalRows }">
-            <div class="me-4 flex items-center py-2 text-xs font-normal">
+            <div class="me-4 flex items-center py-2 text-xs font-normal max-md:hidden">
               {{ totalRows }} {{ t("pipeline.header") }}
             </div>
           </template>
diff --git a/web/src/components/promql/components/MetricSelector.vue b/web/src/components/promql/components/MetricSelector.vue
index e7b494252e..a74d5b375d 100644
--- a/web/src/components/promql/components/MetricSelector.vue
+++ b/web/src/components/promql/components/MetricSelector.vue
@@ -17,7 +17,7 @@
           v-model="selectedMetric"
           :options="metrics"
           :label="t('metrics.metricSelector.metricName')"
-          class="showLabelOnTop max-w-125 min-w-75"
+          class="showLabelOnTop max-w-125 min-w-75 max-md:max-w-full max-md:min-w-0"
           @update:model-value="onMetricSelect"
           clearable
           data-test="metric-selector"
diff --git a/web/src/components/promql/components/PromQLBuilderOptions.vue b/web/src/components/promql/components/PromQLBuilderOptions.vue
index 7952ebae20..138ccaae48 100644
--- a/web/src/components/promql/components/PromQLBuilderOptions.vue
+++ b/web/src/components/promql/components/PromQLBuilderOptions.vue
@@ -23,7 +23,7 @@
           <!-- Legend -->
           <div
             data-test="promql-builder-options-field-wrapper"
-            class="ms-2.5 flex flex-row items-center gap-2"
+            class="ms-2.5 flex flex-row items-center gap-2 max-md:ms-0 max-md:w-full"
           >
             <span
               data-test="promql-builder-options-field-label"
@@ -32,7 +32,7 @@
             >
             <div
               data-test="promql-builder-options-field-input-wrapper"
-              class="relative inline-block"
+              class="relative inline-block max-md:min-w-0 max-md:flex-1"
             >
               <OCombobox
                 v-model="
@@ -44,6 +44,7 @@
                 search-regex="(?:{([^}]*)(?:{.*})*$|([a-zA-Z-_]+)$)"
                 data-test="dashboard-promql-builder-legend"
                 :value-replace-fn="selectPromQlNameOption"
+                class="max-md:w-full!"
                 style="width: 16.25rem"
               />
               <OIcon
@@ -68,7 +69,7 @@
           <!-- Step Value -->
           <div
             data-test="promql-builder-options-field-wrapper"
-            class="ms-2.5 flex flex-row items-center gap-2"
+            class="ms-2.5 flex flex-row items-center gap-2 max-md:ms-0"
           >
             <span
               data-test="promql-builder-options-field-label"
@@ -111,7 +112,7 @@
           <!-- Query Type Select (Range/Instant) -->
           <div
             data-test="promql-builder-options-field-wrapper"
-            class="ms-2.5 flex flex-row items-center gap-2"
+            class="ms-2.5 flex flex-row items-center gap-2 max-md:ms-0"
           >
             <span
               data-test="promql-builder-options-field-label"
diff --git a/web/src/components/queries/RunningQueries.vue b/web/src/components/queries/RunningQueries.vue
index 88c8736d87..5229d21790 100644
--- a/web/src/components/queries/RunningQueries.vue
+++ b/web/src/components/queries/RunningQueries.vue
@@ -26,9 +26,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <template #subnav>
       <div
         data-test="running-queries-filter-container"
-        class="px-page-edge flex items-center justify-start gap-3 py-2"
+        class="px-page-edge flex items-center justify-start gap-3 py-2 max-md:flex-wrap max-md:gap-2"
       >
         <OToggleGroup
+          mobile-dropdown
           :model-value="selectedQueryTypeTab"
           @update:model-value="onChangeQueryTab($event as 'summary' | 'all')"
           data-test="running-queries-query-type-tabs"
@@ -48,7 +49,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :options="searchFieldOptions"
             labelKey="label"
             valueKey="value"
-            class="w-35 p-0"
+            class="w-35 p-0 max-md:w-28"
             data-test="running-queries-search-fields-select"
             @update:model-value="filterQuery = ''"
           />
@@ -56,7 +57,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <OSearchInput
           v-if="selectedSearchField == 'all'"
           v-model="filterQuery"
-          class="no-border o2-search-input"
+          class="no-border o2-search-input max-md:min-w-24 max-md:flex-1"
           :placeholder="t('queries.search')"
           data-test="running-queries-search-input"
         />
diff --git a/web/src/components/queries/RunningQueriesList.vue b/web/src/components/queries/RunningQueriesList.vue
index 5e17648d73..d0d83d260d 100644
--- a/web/src/components/queries/RunningQueriesList.vue
+++ b/web/src/components/queries/RunningQueriesList.vue
@@ -90,6 +90,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           icon-left="format-list-bulleted"
           variant="ghost"
           size="icon-sm"
+          class="max-md:hidden"
           :title="t('queries.queryList')"
           data-test="queryList-btn"
           @click="listSchema(row)"
@@ -98,10 +99,40 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           icon-left="close"
           variant="ghost-destructive"
           size="icon-sm"
+          class="max-md:hidden"
           :title="t('queries.cancelQuery')"
           data-test="cancelQuery-btn"
           @click="confirmDeleteAction(row)"
         />
+        <ODropdown side="bottom" align="end">
+          <template #trigger>
+            <OButton
+              icon-left="more-vert"
+              variant="ghost"
+              size="icon-xs-sq"
+              class="md:hidden"
+              data-test="running-queries-row-more-actions"
+              @click.stop
+            />
+          </template>
+          <ODropdownItem
+            icon-left="format-list-bulleted"
+            class="md:hidden"
+            data-test="queryList-btn-menu"
+            @select="listSchema(row)"
+          >
+            <span>{{ t("queries.queryList") }}</span>
+          </ODropdownItem>
+          <ODropdownItem
+            icon-left="close"
+            variant="destructive"
+            class="md:hidden"
+            data-test="cancelQuery-btn-menu"
+            @select="confirmDeleteAction(row)"
+          >
+            <span>{{ t("queries.cancelQuery") }}</span>
+          </ODropdownItem>
+        </ODropdown>
       </template>
       <template #cell-user_id="{ row }">
         <OUserCell :value="row.user_id" />
@@ -142,6 +173,8 @@ import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import { useStore } from "vuex";
 import QueryList from "@/components/queries/QueryList.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OToggleGroup from "@/lib/core/ToggleGroup/OToggleGroup.vue";
 import OToggleGroupItem from "@/lib/core/ToggleGroup/OToggleGroupItem.vue";
@@ -159,6 +192,8 @@ export default defineComponent({
     QueryList,
     OEmptyState,
     OButton,
+    ODropdown,
+    ODropdownItem,
     OTooltip,
     OToggleGroup,
     OToggleGroupItem,
diff --git a/web/src/components/reports/CreateReport.vue b/web/src/components/reports/CreateReport.vue
index 4941b9e77a..cc84065c7c 100644
--- a/web/src/components/reports/CreateReport.vue
+++ b/web/src/components/reports/CreateReport.vue
@@ -30,9 +30,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       class="create-report-page flex min-h-0 w-full flex-1 flex-col"
     >
       <div class="bg-card-glass-bg flex min-h-0 flex-1 overflow-auto">
-        <div ref="addAlertFormRef" class="my-3 px-4" style="width: 64rem">
+        <!-- The [style*=width] variant caps the fields' inline widths: max-width beats an inline width. -->
+        <div
+          ref="addAlertFormRef"
+          class="my-3 w-256 px-4 max-md:max-w-full max-md:[&_[style*=width]]:max-w-full"
+        >
           <OForm :id="formId" :form="form" class="create-report-form">
-            <div class="flex items-start gap-4 px-2 pt-3">
+            <div class="flex items-start gap-4 px-2 pt-3 max-md:flex-wrap">
               <div data-test="add-report-name-input" class="o2-input">
                 <OFormInput
                   data-test="add-report-name-input"
@@ -107,10 +111,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <!-- items-start (not items-center): keeps all selects
                          top-aligned when a validation error appears under one and
                          grows its cell taller. -->
-                    <div class="flex items-start justify-start">
+                    <div class="flex items-start justify-start max-md:flex-col max-md:gap-2">
                       <div
                         data-test="add-report-folder-select"
-                        class="o2-input me-2 pt-0"
+                        class="o2-input me-2 pt-0 max-md:w-full!"
                         style="width: 30%"
                       >
                         <OFormSelect
@@ -121,12 +125,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           required
                           :loading="isFetchingFolders"
                           @update:model-value="(v: any) => onFolderSelection(v, index)"
-                          style="min-width: 15.625rem !important; width: 100% !important"
+                          class="min-w-62.5! max-md:min-w-0!"
+                          style="width: 100% !important"
                         />
                       </div>
                       <div
                         data-test="add-report-dashboard-select"
-                        class="o2-input me-2 pt-0"
+                        class="o2-input me-2 pt-0 max-md:w-full!"
                         style="width: 30%"
                       >
                         <OFormSelect
@@ -137,12 +142,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           required
                           :loading="isFetchingDashboard || isFetchingFolders"
                           @update:model-value="(v: any) => onDashboardSelection(v, index)"
-                          style="min-width: 15.625rem !important; width: 100% !important"
+                          class="min-w-62.5! max-md:min-w-0!"
+                          style="width: 100% !important"
                         />
                       </div>
                       <div
                         data-test="add-report-tab-select"
-                        class="o2-input pt-0"
+                        class="o2-input pt-0 max-md:w-full!"
                         style="width: 30%"
                       >
                         <OFormSelect
@@ -152,7 +158,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           :label="t('reports.dashboardTab')"
                           required
                           :loading="isFetchingDashboard || isFetchingFolders"
-                          style="min-width: 15.625rem !important; width: 100% !important"
+                          class="min-w-62.5! max-md:min-w-0!"
+                          style="width: 100% !important"
                         />
                       </div>
                     </div>
@@ -181,7 +188,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       >
                         {{ t("reports.reportFormat") }}
                       </div>
-                      <div class="flex gap-3">
+                      <div class="flex gap-3 max-md:flex-col">
                         <!-- Report Type -->
                         <div class="o2-input col-auto" data-test="add-report-type-select">
                           <OFormSelect
diff --git a/web/src/components/reports/ReportList.vue b/web/src/components/reports/ReportList.vue
index f60981c48f..52c7526e4f 100644
--- a/web/src/components/reports/ReportList.vue
+++ b/web/src/components/reports/ReportList.vue
@@ -35,16 +35,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </template>
 
       <!-- Folder rail (fixed width) + table — matches the Alerts layout. -->
-      <div data-test="report-list-splitter" class="report-list-table flex min-h-0 flex-1">
+      <div
+        data-test="report-list-splitter"
+        class="report-list-table flex min-h-0 flex-1 max-md:flex-col"
+      >
         <!-- Left: folder list -->
-        <div class="w-rail h-full shrink-0">
+        <div
+          class="w-rail max-md:border-border-default h-full shrink-0 max-md:h-auto max-md:w-full max-md:border-b"
+        >
           <div class="h-full">
             <FolderList type="reports" @update:activeFolderId="updateActiveFolderId" />
           </div>
         </div>
 
         <!-- Right: report table -->
-        <div class="h-full min-w-0 flex-1">
+        <div class="h-full min-w-0 flex-1 max-md:h-auto max-md:min-h-0">
           <div class="bg-card-glass-bg h-full">
             <OTable
               data-test="report-list-table"
@@ -67,7 +72,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             >
               <!-- Toolbar: Scheduled/Cached tabs + search (inline folder scope) + refresh -->
               <template #toolbar>
-                <div class="flex w-full items-center gap-2">
+                <div
+                  class="flex w-full items-center gap-2 max-lg:min-w-0 max-lg:flex-wrap max-lg:gap-y-1.5 max-md:contents"
+                >
                   <div class="app-tabs-container">
                     <AppTabs
                       class="tabs-selection-container"
@@ -81,7 +88,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       "
                     />
                   </div>
-                  <div class="min-w-0 flex-1">
+                  <!-- flex-1 is basis-0, so the min-w floor is what wraps the input before its scope chips spill. -->
+                  <div
+                    class="min-w-0 flex-1 max-md:order-last max-md:basis-full md:max-lg:min-w-80"
+                  >
                     <OInput
                       v-model="dynamicQueryModel"
                       :placeholder="
@@ -108,7 +118,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                             icon-left="folder-outline"
                             data-test="report-list-search-scope-current"
                             :title="t('reports.searchThisFolderTitle')"
-                            >{{ t("reports.searchThisFolder") }}</OToggleGroupItem
+                            ><span class="max-md:hidden">{{
+                              t("reports.searchThisFolder")
+                            }}</span></OToggleGroupItem
                           >
                           <OToggleGroupItem
                             value="all"
@@ -116,7 +128,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                             icon-left="search"
                             data-test="report-list-search-across-folders-toggle"
                             :title="t('reports.searchAllFoldersTitle')"
-                            >{{ t("reports.searchAllFolders") }}</OToggleGroupItem
+                            ><span class="max-md:hidden">{{
+                              t("reports.searchAllFolders")
+                            }}</span></OToggleGroupItem
                           >
                         </OToggleGroup>
                       </template>
@@ -211,6 +225,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   size="icon-sm"
                   :icon-left="row.enabled ? 'pause' : 'play-arrow'"
                   :title="row.enabled ? t('alerts.pause') : t('alerts.start')"
+                  class="max-md:hidden"
                   @click="toggleReportState(row)"
                 />
 
@@ -222,6 +237,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   variant="ghost"
                   size="icon-sm"
                   :title="t('alerts.edit')"
+                  class="max-md:hidden"
                   @click="editReport(row)"
                 />
 
@@ -232,6 +248,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   variant="ghost"
                   size="icon-sm"
                   :title="t('reports.moveToFolder')"
+                  class="max-md:hidden"
                   @click="openMoveDialog(row)"
                 />
 
@@ -243,8 +260,57 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   variant="ghost-destructive"
                   size="icon-sm"
                   :title="t('alerts.delete')"
+                  class="max-md:hidden"
                   @click="confirmDeleteReport(row)"
                 />
+
+                <ODropdown side="bottom" align="end">
+                  <template #trigger>
+                    <OButton
+                      icon-left="more-vert"
+                      :title="t('dashboard.moreActions')"
+                      variant="ghost"
+                      size="icon-xs-sq"
+                      class="md:hidden"
+                      data-test="report-list-row-more-actions"
+                      @click.stop
+                    />
+                  </template>
+                  <ODropdownItem
+                    v-if="!reportsStateLoadingMap[row.report_id]"
+                    :icon-left="row.enabled ? 'pause' : 'play-arrow'"
+                    class="md:hidden"
+                    :data-test="`report-list-${row.name}-pause-start-report-menu`"
+                    @select="toggleReportState(row)"
+                  >
+                    <span>{{ row.enabled ? t("alerts.pause") : t("alerts.start") }}</span>
+                  </ODropdownItem>
+                  <ODropdownItem
+                    icon-left="edit"
+                    class="md:hidden"
+                    :data-test="`report-list-${row.name}-edit-report-menu`"
+                    @select="editReport(row)"
+                  >
+                    <span>{{ t("alerts.edit") }}</span>
+                  </ODropdownItem>
+                  <ODropdownItem
+                    icon-left="drive-file-move"
+                    class="md:hidden"
+                    :data-test="`report-list-${row.name}-move-report-menu`"
+                    @select="openMoveDialog(row)"
+                  >
+                    <span>{{ t("reports.moveToFolder") }}</span>
+                  </ODropdownItem>
+                  <ODropdownItem
+                    icon-left="delete"
+                    variant="destructive"
+                    class="md:hidden"
+                    :data-test="`report-list-${row.name}-delete-report-menu`"
+                    @select="confirmDeleteReport(row)"
+                  >
+                    <span>{{ t("alerts.delete") }}</span>
+                  </ODropdownItem>
+                </ODropdown>
               </template>
 
               <!-- Table footer: pagination + bulk actions -->
@@ -252,7 +318,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <div class="flex h-12 w-full items-center justify-between">
                   <!-- Left: count + action buttons grouped together -->
                   <div class="flex items-center gap-2">
-                    <div class="flex items-center text-xs font-normal whitespace-nowrap">
+                    <div
+                      class="flex items-center text-xs font-normal whitespace-nowrap max-md:hidden"
+                    >
                       {{ resultTotal }} {{ t("reports.header") }}
                     </div>
                     <OButton
@@ -343,6 +411,8 @@ import OSpinner from "@/lib/feedback/Spinner/OSpinner.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
 import OToggleGroup from "@/lib/core/ToggleGroup/OToggleGroup.vue";
 import OToggleGroupItem from "@/lib/core/ToggleGroup/OToggleGroupItem.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import { COL } from "@/lib/core/Table/OTable.types";
 import { useShortcuts } from "@/lib/vue-shortcut-manager";
diff --git a/web/src/components/rum/errorTracking/list/ErrorsKpiCards.vue b/web/src/components/rum/errorTracking/list/ErrorsKpiCards.vue
index f46fcf6ba3..9d0b4e9f79 100644
--- a/web/src/components/rum/errorTracking/list/ErrorsKpiCards.vue
+++ b/web/src/components/rum/errorTracking/list/ErrorsKpiCards.vue
@@ -16,18 +16,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <section
-    class="grid h-full grid-cols-2 gap-2"
+    class="grid h-full grid-cols-2 gap-2 max-md:grid-cols-4 max-md:gap-1.5"
     data-test="rum-errors-kpi-cards"
     :aria-label="t('rum.errorKpisAria')"
   >
     <article
       v-for="card in cards"
       :key="card.key"
-      class="bg-card-glass-bg rounded-default border-border-default flex min-w-0 flex-col items-start border px-2.5 py-1.5"
+      class="bg-card-glass-bg rounded-default border-border-default flex min-w-0 flex-col items-start border px-2.5 py-1.5 max-md:px-1.5"
+      :title="isMobile ? card.caption : undefined"
       :data-test="`rum-errors-kpi-${card.key}-card`"
     >
       <span
-        class="text-text-label flex items-center gap-1.5 text-xs font-medium tracking-wide uppercase"
+        class="text-text-label max-md:text-3xs flex items-center gap-1.5 text-xs font-medium tracking-wide uppercase max-md:block max-md:w-full max-md:truncate max-md:tracking-normal max-md:normal-case"
       >
         {{ card.label }}
         <OTag
@@ -35,6 +36,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :label="card.badge.label"
           :variant="card.badge.variant"
           size="xs"
+          class="max-md:hidden"
           data-test="rum-errors-kpi-crash-free-badge"
         />
       </span>
@@ -42,15 +44,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <OSkeleton v-if="loading" variant="title" class="w-16" />
       <span
         v-else
-        class="text-xl font-semibold tabular-nums"
+        class="text-xl font-semibold tabular-nums max-md:text-base"
         :class="card.valueClass"
         :data-test="`rum-errors-kpi-${card.key}-value`"
         >{{ card.value }}</span
       >
 
-      <small v-if="!loading" :data-test="`rum-errors-kpi-${card.key}-caption`">{{
-        card.caption
-      }}</small>
+      <small
+        v-if="!loading"
+        class="max-md:hidden"
+        :data-test="`rum-errors-kpi-${card.key}-caption`"
+        >{{ card.caption }}</small
+      >
     </article>
   </section>
 </template>
@@ -61,6 +66,9 @@ import { useI18nTyped } from "@/types/i18n";
 import OTag from "@/lib/core/Badge/OTag.vue";
 import OSkeleton from "@/lib/feedback/Skeleton/OSkeleton.vue";
 import { addCommasToNumber, formatLargeNumber } from "@/utils/formatters";
+import useBreakpoint from "@/composables/useBreakpoint";
+
+const { isMobile } = useBreakpoint();
 
 export interface ErrorKpis {
   totalErrors: number;
diff --git a/web/src/components/rum/sessionReplay/SessionsMetricsStrip.vue b/web/src/components/rum/sessionReplay/SessionsMetricsStrip.vue
index 97c323f53d..19ca8bfa50 100644
--- a/web/src/components/rum/sessionReplay/SessionsMetricsStrip.vue
+++ b/web/src/components/rum/sessionReplay/SessionsMetricsStrip.vue
@@ -16,7 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <section
-    class="grid grid-cols-2 gap-2 p-2 lg:grid-cols-5"
+    class="grid grid-cols-5 gap-2 p-2 max-lg:gap-1.5 max-lg:p-1.5"
     data-test="rum-sessions-metrics-strip"
     :aria-label="t('rum.sessionMetricsAria')"
   >
@@ -24,28 +24,32 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       v-for="card in cards"
       :key="card.key"
       type="button"
-      class="metric-card rounded-default bg-card-glass-bg enabled:hover:border-accent flex flex-col items-start gap-0.5 border p-3 text-left transition-colors enabled:cursor-pointer disabled:cursor-default"
+      class="metric-card rounded-default bg-card-glass-bg enabled:hover:border-accent flex flex-col items-start gap-0.5 border p-3 text-left transition-colors enabled:cursor-pointer disabled:cursor-default max-lg:min-w-0 max-lg:p-1.5"
+      :title="lgUp ? undefined : card.caption"
       :class="card.key === activeCard ? 'border-accent' : 'border-border-default'"
       :aria-pressed="card.key === activeCard"
       :disabled="!card.selectable"
       :data-test="`rum-sessions-metric-${card.key}-card`"
       @click="card.selectable && emit('select', card.key)"
     >
-      <span class="text-text-label text-xs font-medium tracking-wide uppercase">{{
-        card.label
-      }}</span>
+      <span
+        class="text-text-label max-lg:text-3xs text-xs font-medium tracking-wide uppercase max-lg:w-full max-lg:truncate max-lg:tracking-normal max-lg:normal-case"
+        >{{ card.label }}</span
+      >
       <span class="flex items-baseline gap-1.5">
         <span
-          class="text-2xl font-semibold tabular-nums"
+          class="text-2xl font-semibold tabular-nums max-lg:text-base"
           :class="card.valueClass"
           :data-test="`rum-sessions-metric-${card.key}-value`"
           >{{ card.value }}</span
         >
-        <span v-if="card.rate" class="text-text-secondary text-sm tabular-nums"
+        <span v-if="card.rate" class="text-text-secondary text-sm tabular-nums max-lg:hidden"
           >· {{ card.rate }}</span
         >
       </span>
-      <small :class="card.captionClass || 'text-text-secondary'">{{ card.caption }}</small>
+      <small class="max-lg:hidden" :class="card.captionClass || 'text-text-secondary'">{{
+        card.caption
+      }}</small>
     </button>
   </section>
 </template>
@@ -54,6 +58,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { computed } from "vue";
 import { useI18nTyped } from "@/types/i18n";
 import { durationFormatter } from "@/utils/zincutils";
+import useBreakpoint from "@/composables/useBreakpoint";
+
+const { lgUp } = useBreakpoint();
 
 export type SessionsMetricCardKey = "sessions" | "errors" | "frustrated" | "duration" | "bounced";
 
diff --git a/web/src/components/settings/AiToolsets.vue b/web/src/components/settings/AiToolsets.vue
index 4fc0517d7f..a42343e17e 100644
--- a/web/src/components/settings/AiToolsets.vue
+++ b/web/src/components/settings/AiToolsets.vue
@@ -57,7 +57,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template #toolbar>
             <OSearchInput
               v-model="filterQuery"
-              class="no-border o2-search-input w-64"
+              class="no-border o2-search-input w-64 max-md:w-full"
               :placeholder="t('aiToolset.search')"
             />
           </template>
@@ -96,6 +96,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               data-row-action="edit"
               variant="ghost"
               size="icon-sm"
+              class="max-md:hidden"
               :title="t('common.edit')"
               @click="editToolset(row)"
               icon-left="edit"
@@ -105,10 +106,40 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               data-row-action="delete"
               variant="ghost-destructive"
               size="icon-sm"
+              class="max-md:hidden"
               :title="t('common.delete')"
               @click="confirmDeleteToolset(row)"
               icon-left="delete"
             />
+            <ODropdown side="bottom" align="end">
+              <template #trigger>
+                <OButton
+                  icon-left="more-vert"
+                  variant="ghost"
+                  size="icon-xs-sq"
+                  class="md:hidden"
+                  data-test="ai-toolsets-row-more-actions"
+                  @click.stop
+                />
+              </template>
+              <ODropdownItem
+                icon-left="edit"
+                class="md:hidden"
+                :data-test="`ai-toolset-${row.name}-edit-menu`"
+                @select="editToolset(row)"
+              >
+                <span>{{ t("common.edit") }}</span>
+              </ODropdownItem>
+              <ODropdownItem
+                icon-left="delete"
+                variant="destructive"
+                class="md:hidden"
+                :data-test="`ai-toolset-${row.name}-delete-menu`"
+                @select="confirmDeleteToolset(row)"
+              >
+                <span>{{ t("common.delete") }}</span>
+              </ODropdownItem>
+            </ODropdown>
           </template>
         </OTable>
       </div>
@@ -136,6 +167,8 @@ import { useStore } from "vuex";
 import { useRouter } from "vue-router";
 import { raw, useI18nTyped } from "@/types/i18n";
 import OButton from "@/lib/core/Button/OButton.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
 import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
@@ -158,6 +191,8 @@ export default defineComponent({
     ConfirmDialog,
     AddAiToolset,
     OButton,
+    ODropdown,
+    ODropdownItem,
     OTooltip,
     OTag,
     OSearchInput,
diff --git a/web/src/components/settings/CipherKeys.vue b/web/src/components/settings/CipherKeys.vue
index 6415e21142..976d01448c 100644
--- a/web/src/components/settings/CipherKeys.vue
+++ b/web/src/components/settings/CipherKeys.vue
@@ -90,7 +90,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               data-row-action="edit"
               variant="ghost"
               size="icon-sm"
-              class="ms-1"
+              class="ms-1 max-md:hidden"
               :title="t('common.edit')"
               @click="editCipherKey(row)"
               icon-left="edit"
@@ -100,11 +100,40 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               data-row-action="delete"
               variant="ghost-destructive"
               size="icon-sm"
-              class="ms-1"
+              class="ms-1 max-md:hidden"
               :title="t('common.delete')"
               @click="confirmDeleteCipherKey(row)"
               icon-left="delete"
             />
+            <ODropdown side="bottom" align="end">
+              <template #trigger>
+                <OButton
+                  icon-left="more-vert"
+                  variant="ghost"
+                  size="icon-xs-sq"
+                  class="md:hidden"
+                  data-test="cipher-keys-row-more-actions"
+                  @click.stop
+                />
+              </template>
+              <ODropdownItem
+                icon-left="edit"
+                class="md:hidden"
+                :data-test="`cipherkey-list-${row.name}-update-menu`"
+                @select="editCipherKey(row)"
+              >
+                <span>{{ t("common.edit") }}</span>
+              </ODropdownItem>
+              <ODropdownItem
+                icon-left="delete"
+                variant="destructive"
+                class="md:hidden"
+                :data-test="`cipherkey-list-${row.name}-delete-menu`"
+                @select="confirmDeleteCipherKey(row)"
+              >
+                <span>{{ t("common.delete") }}</span>
+              </ODropdownItem>
+            </ODropdown>
           </template>
           <template v-if="selectedKeys.length > 0" #bottom>
             <span class="text-text-body text-xs font-medium">
@@ -156,6 +185,8 @@ import AddCipherKey from "@/components/cipherkeys/AddCipherKey.vue";
 import CipherKeysService from "@/services/cipher_keys";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
 import OTable from "@/lib/core/Table/OTable.vue";
@@ -174,6 +205,8 @@ export default defineComponent({
     AddCipherKey,
     ConfirmDialog,
     OButton,
+    ODropdown,
+    ODropdownItem,
     OTooltip,
     OSearchInput,
     OTable,
diff --git a/web/src/components/settings/DiscoveredServices.vue b/web/src/components/settings/DiscoveredServices.vue
index ada26a0bb5..b7197768b3 100644
--- a/web/src/components/settings/DiscoveredServices.vue
+++ b/web/src/components/settings/DiscoveredServices.vue
@@ -311,7 +311,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <!-- Bottom -->
             <template #bottom>
               <div class="flex h-9 w-full items-center justify-between">
-                <div class="w-[15.625rem] text-xs font-normal">
+                <div class="w-[15.625rem] text-xs font-normal max-md:hidden">
                   {{
                     t("settings.correlation.serviceCountSingular", {
                       count: filteredGroupCount,
diff --git a/web/src/components/settings/DomainManagement.vue b/web/src/components/settings/DomainManagement.vue
index 63d5ab5042..a052120ca9 100644
--- a/web/src/components/settings/DomainManagement.vue
+++ b/web/src/components/settings/DomainManagement.vue
@@ -39,7 +39,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
 
         <div class="flex items-end gap-3">
-          <div class="claim-parser-select col-auto min-w-100">
+          <div class="claim-parser-select col-auto min-w-100 max-md:w-full max-md:min-w-0">
             <OSelect
               v-model="claimParserFunction"
               :options="functionOptions"
@@ -187,7 +187,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-slot="{ isSubmitting }"
           class="flex items-start gap-x-2"
         >
-          <div class="w-[18.75rem] shrink-0">
+          <div class="w-[18.75rem] shrink-0 max-md:w-auto max-md:min-w-0 max-md:flex-1">
             <OFormInput
               data-test="domain-management-new-domain-input"
               name="newDomain"
diff --git a/web/src/components/settings/GenAiAgentMappingSettings.vue b/web/src/components/settings/GenAiAgentMappingSettings.vue
index d654aa9934..4d1e292d7a 100644
--- a/web/src/components/settings/GenAiAgentMappingSettings.vue
+++ b/web/src/components/settings/GenAiAgentMappingSettings.vue
@@ -1,5 +1,6 @@
 <template>
   <OPageLayout
+    overflow-first
     data-test="gen-ai-agent-mapping-settings"
     :subtitle="t('settings.genAiAgentMapping.description')"
     icon="smart-toy"
@@ -12,7 +13,7 @@
     </template>
     <!-- Content helpers (populate / clear the fields) live in the header,
            separate from the primary Save action at the bottom. -->
-    <template #actions>
+    <template #actions-overflow>
       <OButton
         data-test="gen-ai-agent-mapping-apply-defaults-btn"
         variant="outline"
@@ -30,6 +31,8 @@
       >
         {{ t("settings.genAiAgentMapping.resetToEmpty") }}
       </OButton>
+    </template>
+    <template #actions>
       <OButton
         data-test="gen-ai-agent-registry-clear-btn"
         variant="outline-destructive"
diff --git a/web/src/components/settings/General.vue b/web/src/components/settings/General.vue
index 7c229a92e3..116f0f2dd3 100644
--- a/web/src/components/settings/General.vue
+++ b/web/src/components/settings/General.vue
@@ -32,7 +32,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >
           <!-- scape interval section -->
           <div
-            class="settings-grid-item border-card-glass-border grid grid-cols-3 items-center gap-4 border-b py-4"
+            class="settings-grid-item border-card-glass-border grid grid-cols-3 items-center gap-4 border-b py-4 max-lg:grid-cols-1 max-lg:gap-2"
           >
             <span class="individual-setting-title text-sm leading-5 font-medium">
               {{ t("settings.scrapintervalLabel") }}
@@ -51,7 +51,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
           <!-- Max Series Per Query section -->
           <div
-            class="settings-grid-item border-card-glass-border grid grid-cols-3 items-center gap-4 border-b py-4"
+            class="settings-grid-item border-card-glass-border grid grid-cols-3 items-center gap-4 border-b py-4 max-lg:grid-cols-1 max-lg:gap-2"
           >
             <span class="individual-setting-title text-sm leading-5 font-medium">
               {{ t("settings.maxSeriesPerQueryLabel") }}
@@ -78,12 +78,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
           <!-- Manage Theme section -->
           <div
-            class="settings-grid-item border-card-glass-border grid grid-cols-3 items-center gap-4 border-b py-4"
+            class="settings-grid-item border-card-glass-border grid grid-cols-3 items-center gap-4 border-b py-4 max-lg:grid-cols-1 max-lg:gap-2"
           >
             <span class="individual-setting-title text-sm leading-5 font-medium">
               {{ t("settings.manageTheme") }}
             </span>
-            <div class="-ms-15 flex items-center gap-2">
+            <div class="-ms-15 flex items-center gap-2 max-lg:ms-0 max-lg:flex-wrap">
               <!-- Light Mode Theme -->
               <div
                 class="group/chip bg-surface-subtle border-border-default hover:bg-surface-subtle-hover hover:border-accent inline-flex cursor-pointer items-center gap-2 rounded-full border py-1.5 ps-1.5 pe-3 transition-all duration-200 hover:-translate-y-px hover:shadow-md"
@@ -98,7 +98,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <OIcon
                     name="palette"
                     size="xs"
-                    class="opacity-0 filter-[drop-shadow(0_1px_1px_color-mix(in_srgb,var(--color-black)_30%,transparent))] transition-opacity duration-200 group-hover/chip:opacity-90"
+                    class="opacity-0 filter-[drop-shadow(0_1px_1px_color-mix(in_srgb,var(--color-black)_30%,transparent))] transition-opacity duration-200 group-hover/chip:opacity-90 max-md:opacity-90"
                   />
                   <!-- eslint-enable local/no-hardcoded-px -->
                 </div>
@@ -124,7 +124,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <OIcon
                     name="palette"
                     size="xs"
-                    class="opacity-0 filter-[drop-shadow(0_1px_1px_color-mix(in_srgb,var(--color-black)_30%,transparent))] transition-opacity duration-200 group-hover/chip:opacity-90"
+                    class="opacity-0 filter-[drop-shadow(0_1px_1px_color-mix(in_srgb,var(--color-black)_30%,transparent))] transition-opacity duration-200 group-hover/chip:opacity-90 max-md:opacity-90"
                   />
                   <!-- eslint-enable local/no-hardcoded-px -->
                 </div>
@@ -184,7 +184,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
       <div>
         <div
-          class="settings-grid-item no-border-bottom border-card-glass-border grid grid-cols-3 items-center gap-4 border-b py-4"
+          class="settings-grid-item no-border-bottom border-card-glass-border grid grid-cols-3 items-center gap-4 border-b py-4 max-lg:grid-cols-1 max-lg:gap-2"
         >
           <span class="individual-setting-title text-sm leading-5 font-medium">
             {{ t("settings.customLogoText") }}
@@ -241,7 +241,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
         <!-- Light Mode Logo -->
         <div
-          class="settings-grid-item border-card-glass-border grid grid-cols-3 items-center gap-4 border-b py-4"
+          class="settings-grid-item border-card-glass-border grid grid-cols-3 items-center gap-4 border-b py-4 max-lg:grid-cols-1 max-lg:gap-2"
         >
           <div class="individual-setting-title mb-5 w-full pt-2 text-sm leading-5 font-medium">
             {{ t("settings.customLogoTitle") }} ({{ t("settings.lightMode") }})
@@ -310,7 +310,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <!-- Dark Mode Logo -->
         <div
-          class="settings-grid-item border-card-glass-border grid grid-cols-3 items-center gap-4 border-b py-4"
+          class="settings-grid-item border-card-glass-border grid grid-cols-3 items-center gap-4 border-b py-4 max-lg:grid-cols-1 max-lg:gap-2"
         >
           <div class="individual-setting-title mb-5 w-full pt-2 text-sm leading-5 font-medium">
             {{ t("settings.customLogoTitle") }} ({{ t("settings.darkMode") }})
@@ -380,7 +380,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Authoring banners needs far more room than a settings row, so the
              row is just the entry point into a drawer. -->
         <div
-          class="settings-grid-item border-card-glass-border grid grid-cols-3 items-center gap-4 border-b py-4"
+          class="settings-grid-item border-card-glass-border grid grid-cols-3 items-center gap-4 border-b py-4 max-lg:grid-cols-1 max-lg:gap-2"
         >
           <span class="individual-setting-title text-sm leading-5 font-medium">
             {{ t("announcements.settings.label") }}
diff --git a/web/src/components/settings/ImportModelPricing.vue b/web/src/components/settings/ImportModelPricing.vue
index 1f3286689e..8c57d62955 100644
--- a/web/src/components/settings/ImportModelPricing.vue
+++ b/web/src/components/settings/ImportModelPricing.vue
@@ -29,7 +29,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   >
     <template #output-content>
       <div
-        class="border-border-default flex h-full w-full flex-col border-s"
+        class="border-border-default flex h-full w-full flex-col border-s max-md:min-w-0!"
         style="min-width: 25rem"
       >
         <div
diff --git a/web/src/components/settings/ImportRegexPattern.vue b/web/src/components/settings/ImportRegexPattern.vue
index 68b410da9f..5b02908ade 100644
--- a/web/src/components/settings/ImportRegexPattern.vue
+++ b/web/src/components/settings/ImportRegexPattern.vue
@@ -60,7 +60,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     >
       <template #output-content>
         <div
-          class="border-border-default flex h-full w-full flex-col border-s"
+          class="border-border-default flex h-full w-full flex-col border-s max-md:min-w-0!"
           style="min-width: 25rem"
         >
           <div
diff --git a/web/src/components/settings/LlmProvidersSettings.vue b/web/src/components/settings/LlmProvidersSettings.vue
index c9d6a0079e..846256e6cb 100644
--- a/web/src/components/settings/LlmProvidersSettings.vue
+++ b/web/src/components/settings/LlmProvidersSettings.vue
@@ -122,6 +122,7 @@
                 data-row-action="edit"
                 variant="ghost"
                 size="icon-sm"
+                class="max-md:hidden"
                 :title="t('onlineEvals.actions.edit')"
                 icon-left="edit"
                 @click.stop="openEdit(row)"
@@ -131,10 +132,40 @@
                 data-row-action="delete"
                 variant="ghost-destructive"
                 size="icon-sm"
+                class="max-md:hidden"
                 :title="t('onlineEvals.actions.delete')"
                 icon-left="delete"
                 @click.stop="confirmDelete(row)"
               />
+              <ODropdown side="bottom" align="end">
+                <template #trigger>
+                  <OButton
+                    icon-left="more-vert"
+                    variant="ghost"
+                    size="icon-xs-sq"
+                    class="md:hidden"
+                    data-test="llm-providers-row-more-actions"
+                    @click.stop
+                  />
+                </template>
+                <ODropdownItem
+                  icon-left="edit"
+                  class="md:hidden"
+                  :data-test="`llm-providers-${row.name}-edit-btn-menu`"
+                  @select="openEdit(row)"
+                >
+                  <span>{{ t("onlineEvals.actions.edit") }}</span>
+                </ODropdownItem>
+                <ODropdownItem
+                  icon-left="delete"
+                  variant="destructive"
+                  class="md:hidden"
+                  :data-test="`llm-providers-${row.name}-delete-btn-menu`"
+                  @select="confirmDelete(row)"
+                >
+                  <span>{{ t("onlineEvals.actions.delete") }}</span>
+                </ODropdownItem>
+              </ODropdown>
             </div>
           </template>
         </OTable>
@@ -157,6 +188,8 @@ import { useI18nTyped } from "@/types/i18n";
 import { useRoute, useRouter } from "vue-router";
 import { useStore } from "vuex";
 import OButton from "@/lib/core/Button/OButton.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OTable from "@/lib/core/Table/OTable.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
diff --git a/web/src/components/settings/ModelPricingEditor.vue b/web/src/components/settings/ModelPricingEditor.vue
index 1d58325d83..f1df79073f 100644
--- a/web/src/components/settings/ModelPricingEditor.vue
+++ b/web/src/components/settings/ModelPricingEditor.vue
@@ -46,7 +46,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </OText>
               </div>
             </div>
-            <div class="flex flex-row gap-4 px-4 pt-2.5 pb-2">
+            <div class="flex flex-row gap-4 px-4 pt-2.5 pb-2 max-md:flex-col max-md:gap-2">
               <div class="flex-1">
                 <OFormInput
                   name="name"
@@ -395,11 +395,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       <OText variant="meta"> {{ t("modelPricing.tokenPricesUnit") }}</OText>
                     </div>
 
-                    <div class="price-table overflow-hidden">
+                    <div class="price-table overflow-hidden max-lg:overflow-x-auto">
                       <!-- Column headers (only when rows exist) -->
                       <div
                         v-if="tier.prices.length"
-                        class="price-table-head text-2xs grid grid-cols-[1fr_10rem_auto] gap-2 px-3 py-1.5 font-semibold tracking-[0.01em] opacity-45"
+                        class="price-table-head text-2xs grid grid-cols-[1fr_10rem_auto] gap-2 px-3 py-1.5 font-semibold tracking-[0.01em] opacity-45 max-lg:grid-cols-[1fr_6rem_auto]"
                       >
                         <span>{{ t("modelPricing.usageKeyCol") }}</span>
                         <span>{{ t("modelPricing.pricePerMillionHeader") }}</span>
@@ -417,7 +417,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       <div
                         v-for="(_entry, entryIdx) in tier.prices"
                         :key="entryIdx"
-                        class="price-row grid grid-cols-[1fr_10rem_auto] items-start gap-2 px-3 py-0.5"
+                        class="price-row grid grid-cols-[1fr_10rem_auto] items-start gap-2 px-3 py-0.5 max-lg:grid-cols-[1fr_6rem_auto]"
                       >
                         <OFormInput
                           :name="`tiers[${idx}].prices[${entryIdx}].key`"
@@ -468,7 +468,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
                       <!-- Add row (staging draft, form-owned) -->
                       <div
-                        class="price-add-row grid grid-cols-[1fr_10rem_auto] items-center gap-2 px-3 py-1"
+                        class="price-add-row grid grid-cols-[1fr_10rem_auto] items-center gap-2 px-3 py-1 max-lg:grid-cols-[1fr_6rem_auto]"
                         :class="{
                           'price-add-row--no-top': !tier.prices.length,
                         }"
diff --git a/web/src/components/settings/ModelPricingList.vue b/web/src/components/settings/ModelPricingList.vue
index 83db6d755a..1e88cde1c7 100644
--- a/web/src/components/settings/ModelPricingList.vue
+++ b/web/src/components/settings/ModelPricingList.vue
@@ -29,6 +29,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- Main List View -->
     <OPageLayout
+      overflow-first
       v-if="!showImportModelPricingPage"
       icon="paid"
       :subtitle="t('settings.modelPricingList.subtitle')"
@@ -41,7 +42,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OTooltip :content="t('modelPricing.matchingPriorityTooltip')" />
         </OButton>
       </template>
-      <template #actions>
+      <template #actions-overflow>
         <OButton
           variant="outline"
           size="sm"
@@ -67,6 +68,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >
           {{ t("modelPricing.importBtn") }}
         </OButton>
+      </template>
+      <template #actions>
         <OButton
           variant="primary"
           size="sm"
@@ -109,10 +112,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >
           <!-- Toolbar: Built-in/Custom tabs + search -->
           <template #toolbar>
-            <div class="flex w-full items-center gap-2">
+            <div class="flex w-full items-center gap-2 max-lg:min-w-0 max-md:contents">
               <div class="app-tabs-container h-9">
                 <AppTabs
                   class="tabs-selection-container"
+                  mobile-dropdown
                   :tabs="tabOptions"
                   v-model:active-tab="selectedTab"
                   @update:active-tab="onTabChange"
@@ -120,7 +124,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
               <OSearchInput
                 v-model="filterQuery"
-                class="ms-auto w-64"
+                class="ms-auto w-64 max-md:ms-0 max-md:w-auto max-md:min-w-40 max-md:flex-1"
                 :placeholder="t('modelPricing.searchPlaceholder')"
               />
             </div>
@@ -328,6 +332,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <OButton
                   :variant="row.enabled ? 'ghost-destructive' : 'ghost-success'"
                   size="icon-sm"
+                  class="max-md:hidden"
                   :title="
                     row.enabled ? t('modelPricing.actionDisable') : t('modelPricing.actionEnable')
                   "
@@ -339,6 +344,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <OButton
                   variant="ghost"
                   size="icon-sm"
+                  class="max-md:hidden"
                   :title="t('modelPricing.actionEdit')"
                   @click.stop="openEditor(row)"
                   data-test="model-pricing-edit-btn"
@@ -348,6 +354,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <OButton
                   variant="ghost-destructive"
                   size="icon-sm"
+                  class="max-md:hidden"
                   :title="t('modelPricing.actionDelete')"
                   @click.stop="confirmDelete(row)"
                   data-test="model-pricing-delete-btn"
@@ -357,12 +364,61 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <OButton
                   variant="ghost"
                   size="icon-sm"
+                  class="max-md:hidden"
                   :title="t('modelPricing.actionDuplicate')"
                   @click.stop="duplicateModel(row)"
                   data-test="model-pricing-duplicate-btn"
                   data-row-action="duplicate"
                   icon-left="content-copy"
                 />
+                <ODropdown side="bottom" align="end">
+                  <template #trigger>
+                    <OButton
+                      icon-left="more-vert"
+                      variant="ghost"
+                      size="icon-xs-sq"
+                      class="md:hidden"
+                      data-test="model-pricing-row-more-actions"
+                      @click.stop
+                    />
+                  </template>
+                  <ODropdownItem
+                    :icon-left="row.enabled ? 'pause' : 'play-arrow'"
+                    :variant="row.enabled ? 'destructive' : 'default'"
+                    class="md:hidden"
+                    data-test="model-pricing-toggle-btn-menu"
+                    @select="toggleEnabled(row, !row.enabled)"
+                  >
+                    <span>{{
+                      row.enabled ? t("modelPricing.actionDisable") : t("modelPricing.actionEnable")
+                    }}</span>
+                  </ODropdownItem>
+                  <ODropdownItem
+                    icon-left="edit"
+                    class="md:hidden"
+                    data-test="model-pricing-edit-btn-menu"
+                    @select="openEditor(row)"
+                  >
+                    <span>{{ t("modelPricing.actionEdit") }}</span>
+                  </ODropdownItem>
+                  <ODropdownItem
+                    icon-left="delete"
+                    variant="destructive"
+                    class="md:hidden"
+                    data-test="model-pricing-delete-btn-menu"
+                    @select="confirmDelete(row)"
+                  >
+                    <span>{{ t("modelPricing.actionDelete") }}</span>
+                  </ODropdownItem>
+                  <ODropdownItem
+                    icon-left="content-copy"
+                    class="md:hidden"
+                    data-test="model-pricing-duplicate-btn-menu"
+                    @select="duplicateModel(row)"
+                  >
+                    <span>{{ t("modelPricing.actionDuplicate") }}</span>
+                  </ODropdownItem>
+                </ODropdown>
               </template>
               <template v-else>
                 <OButton
@@ -390,7 +446,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
           <template #bottom>
             <div class="flex h-12 w-full items-center gap-x-2">
-              <div class="flex w-25 items-center text-xs font-normal">
+              <div class="flex w-25 items-center text-xs font-normal max-md:hidden">
                 {{ t("modelPricing.modelsCount", { count: resultTotal }) }}
               </div>
               <OButton
@@ -589,6 +645,8 @@ import AppTabs from "@/components/common/AppTabs.vue";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
 import TestModelMatchDialog from "@/components/settings/TestModelMatchDialog.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import ODrawer from "@/lib/overlay/Drawer/ODrawer.vue";
 import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
diff --git a/web/src/components/settings/Nodes.vue b/web/src/components/settings/Nodes.vue
index bfeadd0b8e..eb8acfa646 100644
--- a/web/src/components/settings/Nodes.vue
+++ b/web/src/components/settings/Nodes.vue
@@ -27,10 +27,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       @update:model-value="(v: number) => (splitterModel = v)"
       :limits="[0, 250]"
       unit="px"
+      :horizontal="isMobile"
       class="min-h-0 flex-1 overflow-hidden"
     >
       <template #before>
-        <div class="border-r4 border-border-default flex h-full flex-col border-e">
+        <div
+          class="border-r4 border-border-default flex h-full flex-col border-e max-md:overflow-y-auto max-md:border-e-0 max-md:border-b"
+        >
           <div class="sticky top-0 shrink-0 px-2">
             <div class="flex items-center justify-between p-2 text-lg">
               <span class="flex items-center gap-1">
@@ -551,7 +554,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref, computed } from "vue";
+import { defineComponent, reactive, ref, computed, watch } from "vue";
+import useBreakpoint from "@/composables/useBreakpoint";
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";
 import { raw, useI18nTyped } from "@/types/i18n";
@@ -620,6 +624,14 @@ export default defineComponent({
     const originalData: any = ref([]);
     const loading = ref(false);
     const splitterModel = ref(250);
+    const { isMobile } = useBreakpoint();
+    watch(
+      isMobile,
+      (mobile) => {
+        splitterModel.value = mobile ? 180 : 250;
+      },
+      { immediate: true },
+    );
     const filterQuery = ref("");
 
     const filterOTableColumns: OTableColumnDef[] = [
@@ -1227,6 +1239,7 @@ export default defineComponent({
       onStatSelect,
       summaryStats,
       splitterModel,
+      isMobile,
       getData,
       resultTotal,
       cpuUsage,
diff --git a/web/src/components/settings/OrganizationManagement.vue b/web/src/components/settings/OrganizationManagement.vue
index 62d3875afb..04ebf16c50 100644
--- a/web/src/components/settings/OrganizationManagement.vue
+++ b/web/src/components/settings/OrganizationManagement.vue
@@ -47,7 +47,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OSearchInput
               data-test="org-management-search-input"
               v-model="filterQuery"
-              class="no-border o2-search-input w-64"
+              class="no-border o2-search-input w-64 max-md:w-full"
               :placeholder="t('settings.searchOrgs')"
             />
           </template>
@@ -112,6 +112,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 variant="ghost"
                 size="icon-xs-circle"
                 icon-left="paid"
+                class="max-md:hidden"
                 :aria-label="t('settings.organizationManagementPage.setUsageLimits')"
                 data-test="org-management-set-usage-limits-btn"
                 @click.stop="toggleUsageLimitsDialog(row)"
@@ -122,6 +123,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 variant="ghost"
                 size="icon-xs-circle"
                 icon-left="event"
+                class="max-md:hidden"
                 data-test="otg-management-extend-trial-btn"
                 @click.stop="toggleExtendTrialDialog(row)"
               >
@@ -132,6 +134,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 variant="ghost"
                 size="icon-xs-circle"
                 icon-left="note-add"
+                class="max-md:hidden"
                 data-test="org-management-add-contract-btn"
                 @click.stop="toggleContractDialog(row, 'create')"
               >
@@ -142,6 +145,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 variant="ghost"
                 size="icon-xs-circle"
                 icon-left="event"
+                class="max-md:hidden"
                 data-test="org-management-extend-contract-btn"
                 @click.stop="toggleContractDialog(row, 'extend')"
               >
@@ -152,6 +156,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 variant="ghost-destructive"
                 size="icon-xs-circle"
                 icon-left="block"
+                class="max-md:hidden"
                 data-test="org-management-revoke-contract-btn"
                 @click.stop="confirmRevokeContract(row)"
               >
@@ -162,6 +167,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 variant="ghost"
                 size="icon-xs-circle"
                 icon-left="cloud-upload"
+                class="max-md:hidden"
                 data-test="org-management-storage-enable-btn"
                 @click.stop="toggleOrgStorage(row)"
               >
@@ -183,6 +189,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 variant="ghost"
                 size="icon-xs-circle"
                 icon-left="history"
+                class="max-md:hidden"
                 data-test="org-management-cleanup-tasks-btn"
                 @click.stop="viewCleanupTasks(row)"
               >
@@ -193,11 +200,95 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 variant="ghost"
                 size="icon-xs-circle"
                 icon-left="undo"
+                class="max-md:hidden"
                 data-test="org-management-resurrect-btn"
                 @click.stop="resurrectOrganization(row)"
               >
                 <OTooltip :content="t('organization.resurrect')" />
               </OButton>
+              <ODropdown side="bottom" align="end">
+                <template #trigger>
+                  <OButton
+                    icon-left="more-vert"
+                    variant="ghost"
+                    size="icon-xs-sq"
+                    class="md:hidden"
+                    data-test="org-management-row-more-actions"
+                    @click.stop
+                  />
+                </template>
+                <ODropdownItem
+                  icon-left="paid"
+                  class="md:hidden"
+                  data-test="org-management-set-usage-limits-btn-menu"
+                  @select="toggleUsageLimitsDialog(row)"
+                >
+                  <span>{{ t("settings.organizationManagementPage.setUsageLimits") }}</span>
+                </ODropdownItem>
+                <ODropdownItem
+                  icon-left="event"
+                  class="md:hidden"
+                  data-test="otg-management-extend-trial-btn-menu"
+                  @select="toggleExtendTrialDialog(row)"
+                >
+                  <span>{{ t("settings.extendTrial") }}</span>
+                </ODropdownItem>
+                <ODropdownItem
+                  v-if="row.billing_provider === '-'"
+                  icon-left="note-add"
+                  class="md:hidden"
+                  data-test="org-management-add-contract-btn-menu"
+                  @select="toggleContractDialog(row, 'create')"
+                >
+                  <span>{{ t("settings.organizationManagementPage.addContract") }}</span>
+                </ODropdownItem>
+                <ODropdownItem
+                  v-if="row.billing_provider === 'no_op'"
+                  icon-left="event"
+                  class="md:hidden"
+                  data-test="org-management-extend-contract-btn-menu"
+                  @select="toggleContractDialog(row, 'extend')"
+                >
+                  <span>{{ t("settings.organizationManagementPage.extendContract") }}</span>
+                </ODropdownItem>
+                <ODropdownItem
+                  v-if="row.billing_provider === 'no_op'"
+                  icon-left="block"
+                  variant="destructive"
+                  class="md:hidden"
+                  data-test="org-management-revoke-contract-btn-menu"
+                  @select="confirmRevokeContract(row)"
+                >
+                  <span>{{ t("settings.organizationManagementPage.revoke") }}</span>
+                </ODropdownItem>
+                <ODropdownItem
+                  v-if="!row.org_storage_enabled"
+                  icon-left="cloud-upload"
+                  class="md:hidden"
+                  data-test="org-management-storage-enable-btn-menu"
+                  @select="toggleOrgStorage(row)"
+                >
+                  <span>{{ t("settings.organizationManagementPage.enableStorage") }}</span>
+                </ODropdownItem>
+                <ODropdownItem
+                  v-if="row.status === 'deleting'"
+                  icon-left="history"
+                  class="md:hidden"
+                  data-test="org-management-cleanup-tasks-btn-menu"
+                  @select="viewCleanupTasks(row)"
+                >
+                  <span>{{ t("iam.listOrganizations.viewDeletionProgress") }}</span>
+                </ODropdownItem>
+                <ODropdownItem
+                  v-if="row.status === 'pending_deletion'"
+                  icon-left="undo"
+                  class="md:hidden"
+                  data-test="org-management-resurrect-btn-menu"
+                  @select="resurrectOrganization(row)"
+                >
+                  <span>{{ t("organization.resurrect") }}</span>
+                </ODropdownItem>
+              </ODropdown>
             </div>
           </template>
         </OTable>
@@ -414,6 +505,8 @@ import OForm from "@/lib/forms/Form/OForm.vue";
 import OFormInput from "@/lib/forms/Input/OFormInput.vue";
 import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
 import ODialog from "@/lib/overlay/Dialog/ODialog.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OTable from "@/lib/core/Table/OTable.vue";
 import OTab from "@/lib/navigation/Tabs/OTab.vue";
@@ -452,6 +545,8 @@ export default defineComponent({
     OrgCleanupTasksDialog,
     OButton,
     ODialog,
+    ODropdown,
+    ODropdownItem,
     OTooltip,
     OForm,
     OFormInput,
diff --git a/web/src/components/settings/OrganizationSettings.vue b/web/src/components/settings/OrganizationSettings.vue
index 5fb80e91fa..f341b707e6 100644
--- a/web/src/components/settings/OrganizationSettings.vue
+++ b/web/src/components/settings/OrganizationSettings.vue
@@ -16,7 +16,10 @@
       @submit="saveOrgSettings"
       v-slot="{ isSubmitting }"
     >
-      <div data-test="add-role-rolename-input-btn" class="trace-id-field-name o2-input mb-2 w-100">
+      <div
+        data-test="add-role-rolename-input-btn"
+        class="trace-id-field-name o2-input mb-2 w-100 max-md:w-full"
+      >
         <OFormInput
           data-test="settings-org-trace-id-input"
           name="traceIdFieldName"
@@ -27,7 +30,10 @@
         />
       </div>
 
-      <div data-test="add-role-rolename-input-btn" class="span-id-field-name o2-input w-100">
+      <div
+        data-test="add-role-rolename-input-btn"
+        class="span-id-field-name o2-input w-100 max-md:w-full"
+      >
         <OFormInput
           data-test="settings-org-span-id-input"
           name="spanIdFieldName"
@@ -41,7 +47,7 @@
       <div
         v-if="config.isCloud !== 'true'"
         data-test="add-toggle-ingestion"
-        class="span-id-field-name o2-input w-100"
+        class="span-id-field-name o2-input w-100 max-md:w-full"
       >
         <OFormSwitch
           data-test="add-toggle-ingestion-btn"
diff --git a/web/src/components/settings/RegexPatternList.vue b/web/src/components/settings/RegexPatternList.vue
index 21245044e6..e9b7247adf 100644
--- a/web/src/components/settings/RegexPatternList.vue
+++ b/web/src/components/settings/RegexPatternList.vue
@@ -119,6 +119,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   data-row-action="export"
                   variant="ghost"
                   size="icon-sm"
+                  class="max-md:hidden"
                   :title="t('settings.regexPatternList.exportTitle')"
                   @click.stop="exportRegexPattern(row)"
                   icon-left="download"
@@ -128,6 +129,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   data-row-action="edit"
                   variant="ghost"
                   size="icon-sm"
+                  class="max-md:hidden"
                   :title="t('regex_patterns.edit')"
                   @click.stop="editRegexPattern(row)"
                   icon-left="edit"
@@ -137,15 +139,53 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   data-row-action="delete"
                   variant="ghost-destructive"
                   size="icon-sm"
+                  class="max-md:hidden"
                   :title="t('regex_patterns.delete')"
                   @click.stop="confirmDeleteRegexPattern(row)"
                   icon-left="delete"
                 />
+                <ODropdown side="bottom" align="end">
+                  <template #trigger>
+                    <OButton
+                      icon-left="more-vert"
+                      variant="ghost"
+                      size="icon-xs-sq"
+                      class="md:hidden"
+                      data-test="regex-pattern-list-row-more-actions"
+                      @click.stop
+                    />
+                  </template>
+                  <ODropdownItem
+                    icon-left="download"
+                    class="md:hidden"
+                    :data-test="`regex-pattern-list-${row.id}-export-regex-pattern-menu`"
+                    @select="exportRegexPattern(row)"
+                  >
+                    <span>{{ t("settings.regexPatternList.exportTitle") }}</span>
+                  </ODropdownItem>
+                  <ODropdownItem
+                    icon-left="edit"
+                    class="md:hidden"
+                    :data-test="`regex-pattern-list-${row.id}-update-regex-pattern-menu`"
+                    @select="editRegexPattern(row)"
+                  >
+                    <span>{{ t("regex_patterns.edit") }}</span>
+                  </ODropdownItem>
+                  <ODropdownItem
+                    icon-left="delete"
+                    variant="destructive"
+                    class="md:hidden"
+                    :data-test="`regex-pattern-list-${row.id}-delete-regex-pattern-menu`"
+                    @select="confirmDeleteRegexPattern(row)"
+                  >
+                    <span>{{ t("regex_patterns.delete") }}</span>
+                  </ODropdownItem>
+                </ODropdown>
               </div>
             </template>
             <template #bottom>
               <div class="flex items-center gap-2">
-                <span class="text-xs font-normal">
+                <span class="text-xs font-normal max-md:hidden">
                   {{ t("regex_patterns.bottom_header", { count: resultTotal }) }}
                 </span>
                 <OButton
@@ -211,6 +251,8 @@ import ImportRegexPattern from "./ImportRegexPattern.vue";
 import config from "@/aws-exports";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
 import OTable from "@/lib/core/Table/OTable.vue";
@@ -232,6 +274,8 @@ export default defineComponent({
     ImportRegexPattern,
     OEmptyState,
     OButton,
+    ODropdown,
+    ODropdownItem,
     OTooltip,
     OSearchInput,
     OTable,
diff --git a/web/src/components/settings/SyntheticsLocationsList.vue b/web/src/components/settings/SyntheticsLocationsList.vue
index d4aa1dfd9b..49eee5a1a5 100644
--- a/web/src/components/settings/SyntheticsLocationsList.vue
+++ b/web/src/components/settings/SyntheticsLocationsList.vue
@@ -120,6 +120,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   v-else
                   :variant="row.enabled ? 'ghost-destructive' : 'ghost'"
                   size="icon-sm"
+                  class="max-md:hidden"
                   :icon-left="row.enabled ? 'pause' : 'play-arrow'"
                   :data-test="`synthetics-locations-${row.id}-${row.enabled ? 'disable' : 'enable'}-btn`"
                   @click.stop="toggleLocationEnabled(row)"
@@ -140,6 +141,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   data-row-action="edit"
                   variant="ghost"
                   size="icon-sm"
+                  class="max-md:hidden"
                   :title="t('common.edit')"
                   @click.stop="openEditDialog(row)"
                   icon-left="edit"
@@ -153,12 +155,56 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   data-row-action="delete"
                   variant="ghost-destructive"
                   size="icon-sm"
+                  class="max-md:hidden"
                   :title="t('common.delete')"
                   @click.stop="confirmDelete(row)"
                   icon-left="delete"
                 >
                   <OTooltip side="bottom" :content="t('common.delete')" />
                 </OButton>
+                <ODropdown side="bottom" align="end">
+                  <template #trigger>
+                    <OButton
+                      icon-left="more-vert"
+                      variant="ghost"
+                      size="icon-xs-sq"
+                      class="md:hidden"
+                      data-test="synthetics-locations-row-more-actions"
+                      @click.stop
+                    />
+                  </template>
+                  <ODropdownItem
+                    v-if="!toggleLoadingMap[row.id]"
+                    :icon-left="row.enabled ? 'pause' : 'play-arrow'"
+                    :variant="row.enabled ? 'destructive' : 'default'"
+                    class="md:hidden"
+                    :data-test="`synthetics-locations-${row.id}-${row.enabled ? 'disable' : 'enable'}-btn-menu`"
+                    @select="toggleLocationEnabled(row)"
+                  >
+                    <span>{{
+                      row.enabled
+                        ? t("synthetics.locations.disable")
+                        : t("synthetics.locations.enable")
+                    }}</span>
+                  </ODropdownItem>
+                  <ODropdownItem
+                    icon-left="edit"
+                    class="md:hidden"
+                    :data-test="`synthetics-locations-${row.id}-edit-btn-menu`"
+                    @select="openEditDialog(row)"
+                  >
+                    <span>{{ t("common.edit") }}</span>
+                  </ODropdownItem>
+                  <ODropdownItem
+                    icon-left="delete"
+                    variant="destructive"
+                    class="md:hidden"
+                    :data-test="`synthetics-locations-${row.id}-delete-btn-menu`"
+                    @select="confirmDelete(row)"
+                  >
+                    <span>{{ t("common.delete") }}</span>
+                  </ODropdownItem>
+                </ODropdown>
               </div>
             </template>
             <template #bottom>
@@ -172,9 +218,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       })
                     }}
                   </template>
-                  <template v-else>
+                  <span v-else class="max-md:hidden">
                     {{ resultTotal }} {{ t("synthetics.locations.bottomHeader") }}
-                  </template>
+                  </span>
                 </span>
                 <template v-if="selectedLocations.length > 0">
                   <OButton
@@ -236,6 +282,8 @@ import { raw, useI18nTyped } from "@/types/i18n";
 import { useStore } from "vuex";
 import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
 import OTable from "@/lib/core/Table/OTable.vue";
@@ -255,6 +303,8 @@ export default defineComponent({
   components: {
     OPageLayout,
     OButton,
+    ODropdown,
+    ODropdownItem,
     OTooltip,
     OSearchInput,
     OTable,
diff --git a/web/src/components/shared/HomeViewSkeleton.vue b/web/src/components/shared/HomeViewSkeleton.vue
index d5f5755391..a1e981e786 100644
--- a/web/src/components/shared/HomeViewSkeleton.vue
+++ b/web/src/components/shared/HomeViewSkeleton.vue
@@ -18,18 +18,20 @@
     </div>
 
     <!-- KPI tile strip (mirrors KpiCardRow / KpiCard) -->
-    <div class="mb-4 grid grid-cols-[repeat(auto-fit,minmax(12rem,1fr))] gap-2.5">
+    <div
+      class="mb-4 grid grid-cols-[repeat(auto-fit,minmax(12rem,1fr))] gap-2.5 max-lg:flex max-lg:flex-wrap"
+    >
       <div
         v-for="n in 5"
         :key="`kpi-${n}`"
         data-test="home-view-skeleton-tile"
-        class="bg-card-glass-bg rounded-default border-border-default flex flex-col gap-1 border px-3.5 py-2.5"
+        class="bg-card-glass-bg rounded-default border-border-default flex flex-col gap-1 border px-3.5 py-2.5 max-lg:w-20 max-lg:shrink-0 max-lg:px-2 max-lg:py-1.5"
       >
-        <div class="mb-1 flex items-center justify-between gap-2">
-          <OSkeleton type="text" class="h-4 w-20" />
-          <OSkeleton class="h-10 w-10" />
+        <div class="mb-1 flex items-center justify-between gap-2 max-lg:mb-0">
+          <OSkeleton type="text" class="h-4 w-20 max-lg:hidden" />
+          <OSkeleton class="h-10 w-10 max-lg:h-6 max-lg:w-6" />
         </div>
-        <OSkeleton type="text" class="h-7 w-24" />
+        <OSkeleton type="text" class="h-7 w-24 max-lg:h-5 max-lg:w-12" />
       </div>
     </div>
 
diff --git a/web/src/components/synthetic-monitoring/MonitorTable.vue b/web/src/components/synthetic-monitoring/MonitorTable.vue
index aaa94a6b00..85dfb79057 100644
--- a/web/src/components/synthetic-monitoring/MonitorTable.vue
+++ b/web/src/components/synthetic-monitoring/MonitorTable.vue
@@ -235,7 +235,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Enable/Pause toggle with per-row spinner -->
         <div
           v-if="props.toggleLoadingMap[(row as any).id]"
-          class="flex h-8 w-7 items-center justify-center"
+          class="flex h-8 w-7 items-center justify-center max-md:hidden"
           :data-test="`${dataTest}-toggle-spinner`"
         >
           <OSpinner size="xs" />
@@ -251,6 +251,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :variant="(row as any).enabled ? 'ghost-destructive' : 'ghost'"
           size="icon-sm"
           :icon-left="(row as any).enabled ? 'pause' : 'play-arrow'"
+          class="max-md:hidden"
           :data-test="`${dataTest}-${(row as any).enabled ? 'pause' : 'enable'}-btn`"
           @click.stop="emit('toggle-enabled', row)"
         >
@@ -267,6 +268,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           variant="ghost"
           size="icon-sm"
           icon-left="edit"
+          class="max-md:hidden"
           :data-test="`${dataTest}-edit-btn`"
           @click.stop="emit('edit', row)"
         >
@@ -278,6 +280,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           variant="ghost"
           size="icon-sm"
           icon-left="content-copy"
+          class="max-md:hidden"
           :data-test="`${dataTest}-duplicate-btn`"
           @click.stop="emit('duplicate', row)"
         >
@@ -308,6 +311,42 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </OButton>
           </template>
 
+          <ODropdownItem
+            class="md:hidden"
+            :disabled="!!props.toggleLoadingMap[(row as any).id]"
+            :data-test="`${dataTest}-${(row as any).enabled ? 'pause' : 'enable'}-btn-menu`"
+            @select="emit('toggle-enabled', row)"
+          >
+            <template #icon-left>
+              <OIcon :name="(row as any).enabled ? 'pause' : 'play-arrow'" size="sm" />
+            </template>
+            {{ (row as any).enabled ? t("synthetics.table.pause") : t("synthetics.table.enable") }}
+          </ODropdownItem>
+
+          <ODropdownItem
+            class="md:hidden"
+            :data-test="`${dataTest}-edit-btn-menu`"
+            @select="emit('edit', row)"
+          >
+            <template #icon-left>
+              <OIcon name="edit" size="sm" />
+            </template>
+            {{ t("synthetics.table.edit") }}
+          </ODropdownItem>
+
+          <ODropdownItem
+            class="md:hidden"
+            :data-test="`${dataTest}-duplicate-btn-menu`"
+            @select="emit('duplicate', row)"
+          >
+            <template #icon-left>
+              <OIcon name="content-copy" size="sm" />
+            </template>
+            {{ t("synthetics.table.duplicate") }}
+          </ODropdownItem>
+
+          <ODropdownSeparator class="md:hidden" />
+
           <ODropdownItem :data-test="`${dataTest}-move-item`" @select="emit('move', row)">
             <template #icon-left>
               <OIcon name="drive-file-move" size="sm" />
@@ -373,7 +412,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               total: data.length,
             })
           }}</template>
-          <template v-else>{{ data.length }} {{ resolvedFooterTitle }}</template>
+          <span v-else class="max-md:hidden">{{ data.length }} {{ resolvedFooterTitle }}</span>
         </span>
         <template v-if="localSelectedIds.length > 0">
           <OButton
diff --git a/web/src/components/synthetics/journey/BrowserJourneyStep.vue b/web/src/components/synthetics/journey/BrowserJourneyStep.vue
index 27e512e24f..f4f66f1ba3 100644
--- a/web/src/components/synthetics/journey/BrowserJourneyStep.vue
+++ b/web/src/components/synthetics/journey/BrowserJourneyStep.vue
@@ -171,7 +171,7 @@ function toggleExpanded() {
     >
       <!-- Drag handle — visibility:hidden during replay to preserve layout -->
       <span
-        class="text-text-muted absolute left-[-0.1rem] shrink-0 cursor-grab opacity-0 transition-opacity group-hover:opacity-100"
+        class="text-text-muted absolute left-[-0.1rem] shrink-0 cursor-grab opacity-0 transition-opacity group-hover:opacity-100 max-md:opacity-100"
         :class="{ invisible: replayDotState }"
         data-test="synthetics-journey-step-drag-handle"
         aria-hidden="true"
diff --git a/web/src/components/synthetics/journey/JourneySteps.vue b/web/src/components/synthetics/journey/JourneySteps.vue
index 76c4d3a44b..ea12557a0d 100644
--- a/web/src/components/synthetics/journey/JourneySteps.vue
+++ b/web/src/components/synthetics/journey/JourneySteps.vue
@@ -43,6 +43,8 @@ import OButton from "@/lib/core/Button/OButton.vue";
 import OProgressBar from "@/lib/data/ProgressBar/OProgressBar.vue";
 import OSpinner from "@/lib/feedback/Spinner/OSpinner.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
 import type { StepAction } from "@/types/synthetics";
 import { ACTION_ICONS, stepActionLabelKey } from "@/constants/synthetics";
@@ -564,7 +566,7 @@ function handleUpdateExpanded(ids: string[]) {
                preview rides the same span for the same reason, and focus is bound
                alongside hover so the destination is not mouse-only. -->
           <span
-            class="inline-flex"
+            class="inline-flex max-md:hidden"
             @mouseenter="onRecordBeforeEnter(row)"
             @mouseleave="onRecordBeforeLeave"
             @focusin="onRecordBeforeFocus(row)"
@@ -589,6 +591,7 @@ function handleUpdateExpanded(ids: string[]) {
           v-if="!readonly"
           variant="ghost"
           size="xs"
+          class="max-md:hidden"
           :aria-label="t('synthetics.journey.insertStepBelow')"
           data-test="synthetics-journey-step-insert-btn"
           :disabled="isLocked"
@@ -601,6 +604,7 @@ function handleUpdateExpanded(ids: string[]) {
           v-if="!readonly"
           variant="ghost"
           size="xs"
+          class="max-md:hidden"
           :aria-label="t('synthetics.journey.duplicateStep')"
           data-test="synthetics-journey-step-duplicate-btn"
           data-row-action="duplicate"
@@ -618,11 +622,61 @@ function handleUpdateExpanded(ids: string[]) {
           data-test="synthetics-journey-step-delete-btn"
           data-row-action="delete"
           :disabled="isLocked"
-          class="hover:text-status-error-text"
+          class="hover:text-status-error-text max-md:hidden"
           @click="emit('delete', row)"
         >
           <OIcon name="delete" size="sm" aria-hidden="true" />
         </OButton>
+
+        <ODropdown v-if="!readonly" side="bottom" align="end">
+          <template #trigger>
+            <OButton
+              icon-left="more-vert"
+              variant="ghost"
+              size="icon-xs-sq"
+              class="md:hidden"
+              data-test="synthetics-journey-step-row-more-actions"
+              @click.stop
+            />
+          </template>
+          <ODropdownItem
+            icon-left="smart-display"
+            class="md:hidden"
+            :disabled="recordBeforeDisabled(row)"
+            data-test="synthetics-journey-step-record-before-btn-menu"
+            @select="emit('record-before', row)"
+          >
+            <span>{{ t("synthetics.journey.recordBeforeStep") }}</span>
+          </ODropdownItem>
+          <ODropdownItem
+            icon-left="add"
+            class="md:hidden"
+            :disabled="isLocked"
+            data-test="synthetics-journey-step-insert-btn-menu"
+            @select="emit('insert-below', row)"
+          >
+            <span>{{ t("synthetics.journey.insertStepBelow") }}</span>
+          </ODropdownItem>
+          <ODropdownItem
+            icon-left="content-copy"
+            class="md:hidden"
+            :disabled="isLocked"
+            data-test="synthetics-journey-step-duplicate-btn-menu"
+            @select="emit('duplicate', row)"
+          >
+            <span>{{ t("synthetics.journey.duplicateStep") }}</span>
+          </ODropdownItem>
+          <ODropdownItem
+            icon-left="delete"
+            variant="destructive"
+            class="md:hidden"
+            :disabled="isLocked"
+            data-test="synthetics-journey-step-delete-btn-menu"
+            @select="emit('delete', row)"
+          >
+            <span>{{ t("synthetics.journey.deleteStepAria") }}</span>
+          </ODropdownItem>
+        </ODropdown>
       </div>
     </template>
 
diff --git a/web/src/components/synthetics/results/ProtocolRunSummary.spec.ts b/web/src/components/synthetics/results/ProtocolRunSummary.spec.ts
index f2aa1ef016..32099c22bb 100644
--- a/web/src/components/synthetics/results/ProtocolRunSummary.spec.ts
+++ b/web/src/components/synthetics/results/ProtocolRunSummary.spec.ts
@@ -53,6 +53,7 @@ vi.mock("vue-i18n", () => ({
 
 vi.mock("vue-router", () => ({
   useRoute: vi.fn(() => ({ query: {} })),
+  useRouter: vi.fn(() => ({ currentRoute: { value: { fullPath: "/" } } })),
 }));
 
 // ── Stubs for O2 and layout components ──────────────────────────────────────
diff --git a/web/src/components/workflows/WorkflowEditor.spec.ts b/web/src/components/workflows/WorkflowEditor.spec.ts
index e031629d44..01368e78af 100644
--- a/web/src/components/workflows/WorkflowEditor.spec.ts
+++ b/web/src/components/workflows/WorkflowEditor.spec.ts
@@ -136,7 +136,7 @@ const globalStubs = {
       '<button class="header-back" @click="back && back.onClick()" />' +
       '<div class="header-title"><slot name="title" /></div>' +
       '<div class="header-subtitle"><slot name="subtitle" /></div>' +
-      '<slot name="title-trail" /><slot name="actions" /></div>',
+      '<slot name="title-trail" /><slot name="actions-overflow" /><slot name="actions" /></div>',
   },
   OButton: {
     name: "OButton",
diff --git a/web/src/components/workflows/WorkflowEditor.vue b/web/src/components/workflows/WorkflowEditor.vue
index 7912bfbaef..4f41a0dbc8 100644
--- a/web/src/components/workflows/WorkflowEditor.vue
+++ b/web/src/components/workflows/WorkflowEditor.vue
@@ -34,6 +34,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       title-overflow="visible"
       :back="{ label: t('workflow.header'), onClick: goBack, dataTest: 'workflow-editor-back' }"
       class="border-border-default border-b px-4"
+      overflow-first
     >
       <!-- Beta tag inside the title line (see WorkflowsList: #title-trail sits
            after the title+subtitle column, stranding it far from the title). -->
@@ -61,9 +62,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </template>
 
       <template #title>
+        <!-- The name's sizer grid can't shrink below its text, so < md it needs an explicit max-w cap. -->
         <span class="inline-flex min-w-0 items-center gap-2">
           <OInlineEdit
             v-model="workflowObj.currentSelectedWorkflow.name"
+            class="max-md:max-w-40"
             data-test="workflow-editor-name"
             :placeholder="t('workflow.namePlaceholder')"
             :aria-label="t('workflow.name')"
@@ -73,11 +76,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :error-message="workflowObj.nameError ? t('workflow.nameRequired') : undefined"
             @update:model-value="onNameChange"
           />
-          <BetaBadge />
+          <BetaBadge class="max-md:hidden" />
           <OTag
             v-if="workflowObj.currentSelectedWorkflow.isDraft"
             variant="warning-soft"
             size="sm"
+            class="max-md:hidden"
             :label="t('workflow.draft')"
             data-test="workflow-editor-draft-tag"
           />
@@ -88,7 +92,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
            gated to the create route). Enable/disable status isn't shown here —
            it's managed from the list, same as pipelines. -->
 
-      <template #actions>
+      <template #actions-overflow>
         <!-- Past-run chip — shown when a run is loaded onto the canvas (arrived via
              "Fix This Step" or picked from History). Compact provenance in place of
              the old full-width banner: the tooltip carries "edit freely — never
@@ -155,6 +159,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >
           {{ t("common.cancel") }}
         </OButton>
+        <OButton
+          v-if="!isExistingPublished"
+          variant="outline"
+          size="sm-action"
+          data-test="workflow-editor-save-draft"
+          :loading="saving"
+          :disabled="saving"
+          @click="onSaveDraft"
+        >
+          {{ t("workflow.saveDraft") }}
+        </OButton>
+      </template>
+
+      <template #actions>
         <!-- An already-published workflow saves as a single validated update.
              A new or draft workflow gets two actions: Save as Draft (lenient —
              persists an incomplete graph) and Publish (validates + promotes). -->
@@ -170,28 +188,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >
           {{ t("common.save") }}
         </OButton>
-        <template v-else>
-          <OButton
-            variant="outline"
-            size="sm-action"
-            data-test="workflow-editor-save-draft"
-            :loading="saving"
-            :disabled="saving"
-            @click="onSaveDraft"
-          >
-            {{ t("workflow.saveDraft") }}
-          </OButton>
-          <OButton
-            variant="primary"
-            size="sm-action"
-            data-test="workflow-editor-publish"
-            :loading="saving"
-            :disabled="saving"
-            @click="onPublish"
-          >
-            {{ t("workflow.publish") }}
-          </OButton>
-        </template>
+        <OButton
+          v-else
+          variant="primary"
+          size="sm-action"
+          data-test="workflow-editor-publish"
+          :loading="saving"
+          :disabled="saving"
+          @click="onPublish"
+        >
+          {{ t("workflow.publish") }}
+        </OButton>
       </template>
     </OPageHeader>
 
diff --git a/web/src/components/workflows/WorkflowRuns.vue b/web/src/components/workflows/WorkflowRuns.vue
index 7d53742bd6..ed76cac00e 100644
--- a/web/src/components/workflows/WorkflowRuns.vue
+++ b/web/src/components/workflows/WorkflowRuns.vue
@@ -85,12 +85,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </template>
     </OPageHeader>
 
-    <div class="relative flex min-h-0 flex-1 gap-2 px-2 pt-3">
+    <div
+      class="relative flex min-h-0 flex-1 gap-2 px-2 pt-3 max-lg:flex-col max-lg:overflow-y-auto"
+    >
       <!-- Read-only canvas (per-node run status overlay). Clicking a node's ✓/✗ badge
            opens its NDV (read-only here) with the step's Input · Config · Output — the
            SAME panel the editor uses, so results read identically in both places. -->
       <div
-        class="rounded-surface bg-surface-subtle relative mb-3 min-w-0 flex-1 overflow-hidden dark:bg-transparent"
+        class="rounded-surface bg-surface-subtle relative mb-3 min-w-0 flex-1 overflow-hidden max-lg:h-64 max-lg:flex-none dark:bg-transparent"
       >
         <WorkflowCanvas />
       </div>
@@ -119,7 +121,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div
         v-if="!panelCollapsed"
         data-test="workflow-runs-panel"
-        class="rounded-surface border-border-default bg-surface-base mb-3 flex min-h-0 w-[27.5rem] max-w-[46%] shrink-0 flex-col overflow-hidden border"
+        class="rounded-surface border-border-default bg-surface-base mb-3 flex min-h-0 w-[27.5rem] max-w-[46%] shrink-0 flex-col overflow-hidden border max-lg:h-96 max-lg:w-full max-lg:max-w-full"
       >
         <WorkflowRunsPanel
           ref="runsPanelRef"
diff --git a/web/src/components/workflows/WorkflowsList.vue b/web/src/components/workflows/WorkflowsList.vue
index 48df1cede5..1ad436b52e 100644
--- a/web/src/components/workflows/WorkflowsList.vue
+++ b/web/src/components/workflows/WorkflowsList.vue
@@ -88,8 +88,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             @row-click="openRuns"
           >
             <template #toolbar>
-              <div class="flex w-full items-center gap-2">
-                <div class="min-w-0 flex-1">
+              <div class="flex w-full items-center gap-2 max-lg:min-w-0 max-md:contents">
+                <div class="min-w-0 flex-1 max-md:min-w-40">
                   <OInput
                     data-test="workflow-list-search-input"
                     v-model="filterQuery"
@@ -153,6 +153,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :variant="row.enabled ? 'ghost-destructive' : 'ghost-success'"
                   size="icon-sm"
                   :icon-left="row.enabled ? 'pause' : 'play-arrow'"
+                  class="max-md:hidden"
                   @click.stop="toggleWorkflow(row)"
                 >
                   <OTooltip
@@ -176,6 +177,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   variant="ghost"
                   size="icon-sm"
                   icon-left="edit"
+                  class="max-md:hidden"
                   @click.stop="editWorkflow(row)"
                 >
                   <OTooltip side="bottom" :content="t('workflow.edit')" />
@@ -190,6 +192,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       @click.stop
                     />
                   </template>
+                  <ODropdownItem
+                    v-if="!row.is_draft"
+                    :icon-left="row.enabled ? 'pause' : 'play-arrow'"
+                    class="md:hidden"
+                    :data-test="`workflow-list-${row.name}-pause-start-action-menu`"
+                    @select="toggleWorkflow(row)"
+                  >
+                    <span>{{ row.enabled ? t("alerts.pause") : t("alerts.start") }}</span>
+                  </ODropdownItem>
+                  <ODropdownItem
+                    icon-left="edit"
+                    class="md:hidden"
+                    :data-test="`workflow-list-${row.name}-edit-menu`"
+                    @select="editWorkflow(row)"
+                  >
+                    <span>{{ t("workflow.edit") }}</span>
+                  </ODropdownItem>
                   <ODropdownItem
                     :data-test="`workflow-list-${row.name}-delete`"
                     variant="destructive"
@@ -217,7 +236,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                    dropped — a legacy CSS-framework class this repo does not
                    generate, so it never applied. -->
               <div class="flex h-12 w-full items-center justify-between">
-                <div class="o2-table-footer-title flex w-50 items-center">
+                <div class="o2-table-footer-title flex w-50 items-center max-md:hidden">
                   {{ resultTotal }} {{ t("workflow.header") }}
                 </div>
               </div>
diff --git a/web/src/composables/useBreakpoint.spec.ts b/web/src/composables/useBreakpoint.spec.ts
new file mode 100644
index 0000000000..2509507aa2
--- /dev/null
+++ b/web/src/composables/useBreakpoint.spec.ts
@@ -0,0 +1,84 @@
+// Copyright 2026 OpenObserve Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import { describe, expect, it, beforeEach, vi } from "vitest";
+
+// The composable memoises its matchMedia listeners at module scope, so each
+// case re-imports it fresh (resetModules) with matchMedia stubbed to a chosen
+// width. The stub reads the min-width from the query and compares to `width`.
+const mockMatchMedia = (width: number) => {
+  vi.stubGlobal("matchMedia", (query: string) => {
+    const m = query.match(/min-width:\s*([\d.]+)rem/);
+    const minPx = m ? parseFloat(m[1]) * 16 : 0;
+    return {
+      matches: width >= minPx,
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    };
+  });
+};
+
+const load = async () => (await import("./useBreakpoint")).default;
+
+describe("useBreakpoint", () => {
+  beforeEach(() => {
+    vi.resetModules();
+    vi.unstubAllGlobals();
+  });
+
+  it("should report mobile below the md breakpoint (< 768px)", async () => {
+    mockMatchMedia(375);
+    const bp = (await load())();
+    expect(bp.isMobile.value).toBe(true);
+    expect(bp.isTablet.value).toBe(false);
+    expect(bp.isDesktop.value).toBe(false);
+  });
+
+  it("should report tablet between md and lg (768–1023px)", async () => {
+    mockMatchMedia(768);
+    const bp = (await load())();
+    expect(bp.isMobile.value).toBe(false);
+    expect(bp.isTablet.value).toBe(true);
+    expect(bp.isDesktop.value).toBe(false);
+  });
+
+  it("should report desktop at or above the lg breakpoint (>= 1024px)", async () => {
+    mockMatchMedia(1280);
+    const bp = (await load())();
+    expect(bp.isMobile.value).toBe(false);
+    expect(bp.isTablet.value).toBe(false);
+    expect(bp.isDesktop.value).toBe(true);
+  });
+
+  it("should expose mdUp and lgUp booleans matching the tier", async () => {
+    mockMatchMedia(768);
+    const bp = (await load())();
+    expect(bp.mdUp.value).toBe(true);
+    expect(bp.lgUp.value).toBe(false);
+  });
+
+  it("should not throw when matchMedia() returns a falsy value", async () => {
+    // Reproduces vi.resetAllMocks() in a consuming spec's beforeEach: it strips
+    // the global matchMedia stub's implementation, so calling it returns
+    // undefined instead of a MediaQueryList (DomainManagement.spec.ts hit this
+    // via ODrawer calling useBreakpoint() during setup).
+    vi.stubGlobal("matchMedia", () => undefined);
+    const bp = (await load())();
+    expect(() => bp.isMobile.value).not.toThrow();
+    // Falls back to the desktop-like default rather than crashing.
+    expect(bp.isDesktop.value).toBe(true);
+  });
+});
diff --git a/web/src/composables/useBreakpoint.ts b/web/src/composables/useBreakpoint.ts
new file mode 100644
index 0000000000..6dd634a7ab
--- /dev/null
+++ b/web/src/composables/useBreakpoint.ts
@@ -0,0 +1,63 @@
+// Copyright 2026 OpenObserve Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import { computed, ref } from "vue";
+
+// Must mirror Tailwind's default `md`/`lg` screens so JS-driven layout switches with the CSS variants.
+const MD_QUERY = "(min-width: 48rem)";
+const LG_QUERY = "(min-width: 64rem)";
+
+// Module-level singletons: one pair of app-lifetime matchMedia listeners shared by every consumer.
+const mdUp = ref(true);
+const lgUp = ref(true);
+let initialized = false;
+
+const track = (query: string, target: typeof mdUp) => {
+  const mql = window.matchMedia(query);
+  // A reset test mock or non-standard embed can return a falsy matchMedia(); keep the desktop default.
+  if (!mql) return;
+  target.value = mql.matches;
+  // Older WebKit exposes only addListener; jsdom mocks may expose neither.
+  const onChange = (e: MediaQueryListEvent) => {
+    target.value = e.matches;
+  };
+  if (typeof mql.addEventListener === "function") {
+    mql.addEventListener("change", onChange);
+  } else if (typeof (mql as any).addListener === "function") {
+    (mql as any).addListener(onChange);
+  }
+};
+
+const ensureInit = () => {
+  if (initialized || typeof window === "undefined" || typeof window.matchMedia !== "function")
+    return;
+  initialized = true;
+  track(MD_QUERY, mdUp);
+  track(LG_QUERY, lgUp);
+};
+
+/** Reactive viewport breakpoints for JS-driven layout only; pure styling belongs in Tailwind variants. */
+const useBreakpoint = () => {
+  ensureInit();
+  return {
+    isMobile: computed(() => !mdUp.value),
+    isTablet: computed(() => mdUp.value && !lgUp.value),
+    isDesktop: computed(() => lgUp.value),
+    mdUp: computed(() => mdUp.value),
+    lgUp: computed(() => lgUp.value),
+  };
+};
+
+export default useBreakpoint;
diff --git a/web/src/enterprise/components/AIObservability/AgentScopeCascade.vue b/web/src/enterprise/components/AIObservability/AgentScopeCascade.vue
index 5f6215b80a..87a6bc3fef 100644
--- a/web/src/enterprise/components/AIObservability/AgentScopeCascade.vue
+++ b/web/src/enterprise/components/AIObservability/AgentScopeCascade.vue
@@ -37,8 +37,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   data-test on each: `${prefix}-cascade-{env|agent|version}`.
 -->
 <template>
-  <div class="flex items-center gap-2">
-    <div class="w-44 flex-shrink-0">
+  <div class="flex items-center gap-2 max-lg:flex-wrap max-md:basis-full max-md:flex-nowrap">
+    <div class="w-44 flex-shrink-0 max-md:w-auto max-md:min-w-0 max-md:flex-1 max-md:shrink">
       <OSelect
         :model-value="selectedEnv"
         :label="t('aiObservability.scope.env')"
@@ -51,7 +51,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         @update:model-value="onEnvChange"
       />
     </div>
-    <div class="w-48 flex-shrink-0">
+    <div class="w-48 flex-shrink-0 max-md:w-auto max-md:min-w-0 max-md:flex-1 max-md:shrink">
       <OSelect
         :model-value="selectedAgentName"
         :label="t('aiObservability.scope.agent')"
@@ -64,7 +64,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         @update:model-value="onAgentNameChange"
       />
     </div>
-    <div v-if="showVersion" class="w-44 flex-shrink-0">
+    <div
+      v-if="showVersion"
+      class="w-44 flex-shrink-0 max-md:w-auto max-md:min-w-0 max-md:flex-1 max-md:shrink"
+    >
       <OSelect
         :model-value="selectedVersion"
         :label="t('aiObservability.scope.version')"
diff --git a/web/src/enterprise/components/AIObservability/AiScopeBar.vue b/web/src/enterprise/components/AIObservability/AiScopeBar.vue
index 19dd147eba..95ecdf612b 100644
--- a/web/src/enterprise/components/AIObservability/AiScopeBar.vue
+++ b/web/src/enterprise/components/AIObservability/AiScopeBar.vue
@@ -40,7 +40,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
   <div
-    class="px-page-edge flex items-center gap-3 py-2"
+    class="px-page-edge flex items-center gap-3 py-2 max-lg:flex-wrap"
     :class="{ 'border-border-default border-b': bordered }"
   >
     <OToggleGroup
diff --git a/web/src/enterprise/components/AIObservability/ExperimentBrowser.vue b/web/src/enterprise/components/AIObservability/ExperimentBrowser.vue
index 60848ffed0..d4f9e0c2af 100644
--- a/web/src/enterprise/components/AIObservability/ExperimentBrowser.vue
+++ b/web/src/enterprise/components/AIObservability/ExperimentBrowser.vue
@@ -230,6 +230,7 @@
                     : t('aiObservability.experiments.setBaseline')
                 "
                 :disabled="baselineChangingId === row.id || !canSetBaseline(row)"
+                class="max-md:hidden"
                 :data-test="`ai-experiment-baseline-${row.id}`"
                 @click.stop="toggleBaseline(row)"
               />
@@ -240,11 +241,46 @@
               icon-left="content-copy"
               :disabled="cloningId === row.id"
               :aria-label="t('aiObservability.experiments.clone')"
+              class="max-md:hidden"
               :data-test="`ai-experiment-clone-${row.id}`"
               @click.stop="cloneExperiment(row)"
             >
               <OTooltip side="bottom" :content="t('aiObservability.experiments.clone')" />
             </OButton>
+            <ODropdown side="bottom" align="end">
+              <template #trigger>
+                <OButton
+                  icon-left="more-vert"
+                  variant="ghost"
+                  size="icon-xs-sq"
+                  class="md:hidden"
+                  data-test="ai-experiment-actions-menu-btn"
+                  @click.stop
+                />
+              </template>
+              <ODropdownItem
+                :icon-left="isBaseline(row) ? 'keep' : 'keep-outline'"
+                class="md:hidden"
+                :disabled="baselineChangingId === row.id || !canSetBaseline(row)"
+                :data-test="`ai-experiment-baseline-${row.id}-menu`"
+                @select="toggleBaseline(row)"
+              >
+                <span>{{
+                  isBaseline(row)
+                    ? t("aiObservability.experiments.clearBaseline")
+                    : t("aiObservability.experiments.setBaseline")
+                }}</span>
+              </ODropdownItem>
+              <ODropdownItem
+                icon-left="content-copy"
+                class="md:hidden"
+                :disabled="cloningId === row.id"
+                :data-test="`ai-experiment-clone-${row.id}-menu`"
+                @select="cloneExperiment(row)"
+              >
+                <span>{{ t("aiObservability.experiments.clone") }}</span>
+              </ODropdownItem>
+            </ODropdown>
           </div>
         </template>
       </OTable>
@@ -259,6 +295,8 @@ import { raw, useI18nTyped } from "@/types/i18n";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import OSkeleton from "@/lib/feedback/Skeleton/OSkeleton.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import OInput from "@/lib/forms/Input/OInput.vue";
diff --git a/web/src/enterprise/components/OnlineEvals.vue b/web/src/enterprise/components/OnlineEvals.vue
index 119eb7b4cc..97bfd2a66c 100644
--- a/web/src/enterprise/components/OnlineEvals.vue
+++ b/web/src/enterprise/components/OnlineEvals.vue
@@ -139,7 +139,7 @@ the Free Software Foundation, either version 3 of the License, or
           <!-- Last-refreshed indicator + labeled primary Refresh button, matching
                the other AI pages' AiPageShell header. -->
           <AiLastRefreshed
-            class="me-1"
+            class="me-1 max-lg:hidden"
             :last-run-at="qualityLastRunAt"
             :loading="qualityRefreshing"
             data-test="quality-last-refreshed"
@@ -148,6 +148,7 @@ the Free Software Foundation, either version 3 of the License, or
             ref="qualityDatePickerRef"
             v-model="qualitySelectedDate"
             :auto-apply-dashboard="true"
+            class="max-lg:[&_.date-time-label]:hidden"
             data-test="quality-time-range-picker"
           />
           <OButton
diff --git a/web/src/enterprise/components/billings/Billing.vue b/web/src/enterprise/components/billings/Billing.vue
index 4fa5ee1ccf..466a72b5d1 100644
--- a/web/src/enterprise/components/billings/Billing.vue
+++ b/web/src/enterprise/components/billings/Billing.vue
@@ -169,6 +169,7 @@ import OSelect from "@/lib/forms/Select/OSelect.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 // @ts-ignore
 import { defineComponent, ref, computed, onMounted, provide, reactive, watch } from "vue";
+import useBreakpoint from "@/composables/useBreakpoint";
 import { raw, useI18nTyped } from "@/types/i18n";
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";
@@ -281,6 +282,15 @@ export default defineComponent({
       }
     };
 
+    const { isMobile } = useBreakpoint();
+    watch(
+      isMobile,
+      (mobile) => {
+        if (mobile && showSidebar.value) collapseSidebar();
+      },
+      { immediate: true },
+    );
+
     onMounted(async () => {
       // Fetch billing info to determine provider type
       await fetchBillingInfo();
diff --git a/web/src/enterprise/components/billings/BillingGroup.vue b/web/src/enterprise/components/billings/BillingGroup.vue
index 6bc0755c04..63ecf4d938 100644
--- a/web/src/enterprise/components/billings/BillingGroup.vue
+++ b/web/src/enterprise/components/billings/BillingGroup.vue
@@ -240,6 +240,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   variant="primary"
                   size="sm"
                   :disabled="actioningToken === row.token"
+                  class="max-md:hidden"
                   :data-test="`org-group-accept-invite-${row.inviter_org_id}`"
                   @click="acceptInvite(row.token)"
                 >
@@ -249,11 +250,40 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   variant="outline"
                   size="sm"
                   :disabled="actioningToken === row.token"
+                  class="max-md:hidden"
                   :data-test="`org-group-reject-invite-${row.inviter_org_id}`"
                   @click="rejectInvite(row.token)"
                 >
                   {{ t("billing.billingGroup.reject") }}
                 </OButton>
+                <ODropdown side="bottom" align="end">
+                  <template #trigger>
+                    <OButton
+                      icon-left="more-vert"
+                      variant="ghost"
+                      size="icon-xs-sq"
+                      class="md:hidden"
+                      data-test="org-group-row-more-actions"
+                      @click.stop
+                    />
+                  </template>
+                  <ODropdownItem
+                    class="md:hidden"
+                    :disabled="actioningToken === row.token"
+                    :data-test="`org-group-accept-invite-${row.inviter_org_id}-menu`"
+                    @select="acceptInvite(row.token)"
+                  >
+                    <span>{{ t("billing.billingGroup.accept") }}</span>
+                  </ODropdownItem>
+                  <ODropdownItem
+                    class="md:hidden"
+                    :disabled="actioningToken === row.token"
+                    :data-test="`org-group-reject-invite-${row.inviter_org_id}-menu`"
+                    @select="rejectInvite(row.token)"
+                  >
+                    <span>{{ t("billing.billingGroup.reject") }}</span>
+                  </ODropdownItem>
+                </ODropdown>
               </div>
             </template>
           </OTable>
@@ -372,6 +402,8 @@ import OSpinner from "@/lib/feedback/Spinner/OSpinner.vue";
 import OTable from "@/lib/core/Table/OTable.vue";
 import OUserCell from "@/lib/core/Table/cells/OUserCell.vue";
 import ODrawer from "@/lib/overlay/Drawer/ODrawer.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import AppTabs from "@/components/common/AppTabs.vue";
 import type { OTableColumnDef } from "@/lib/core/Table/OTable.types";
@@ -420,6 +452,8 @@ export default defineComponent({
     OTable,
     OUserCell,
     ODrawer,
+    ODropdown,
+    ODropdownItem,
     OTooltip,
     AppTabs,
   },
diff --git a/web/src/enterprise/components/billings/plans.vue b/web/src/enterprise/components/billings/plans.vue
index c95bde3453..baa930f36e 100644
--- a/web/src/enterprise/components/billings/plans.vue
+++ b/web/src/enterprise/components/billings/plans.vue
@@ -150,7 +150,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div v-if="loading" class="text-center text-xl font-medium font-semibold">
         <OSpinner size="md" class="mx-auto mt-3 block text-center" />
       </div>
-      <div v-else class="mt-3 grid grid-cols-2 gap-3">
+      <div v-else class="mt-3 grid grid-cols-2 gap-3 max-lg:grid-cols-1">
         <ProPlan
           :planType="planType"
           :billingProvider="billingProvider"
diff --git a/web/src/enterprise/components/billings/usage.vue b/web/src/enterprise/components/billings/usage.vue
index 68d47bd23f..921da01745 100644
--- a/web/src/enterprise/components/billings/usage.vue
+++ b/web/src/enterprise/components/billings/usage.vue
@@ -101,17 +101,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
              base so large numbers stay readable. -->
       <div
         v-if="!dataLoading && Object.keys(usageData).length > 0"
-        class="grid w-full grid-cols-3 gap-3 xl:grid-cols-6"
+        class="grid w-full grid-cols-3 gap-3 max-lg:flex max-lg:flex-wrap max-lg:gap-1.5 xl:grid-cols-6"
       >
         <div
           v-for="tile in usageTiles"
           :key="tile.key"
           data-test="billings-usage-tile"
-          class="usage-tile bg-card-glass-bg border-card-glass-border rounded-default flex flex-col gap-2 border px-3 py-3 transition-shadow duration-200 ease-in-out"
+          class="usage-tile bg-card-glass-bg border-card-glass-border rounded-default flex flex-col gap-2 border px-3 py-3 transition-shadow duration-200 ease-in-out max-lg:shrink-0 max-lg:basis-auto max-lg:flex-row-reverse max-lg:items-center max-lg:gap-1.5 max-lg:px-1.5 max-lg:py-1"
+          :title="lgUp ? undefined : tile.label"
         >
           <div class="flex items-center justify-between gap-2">
             <div
-              class="text-text-secondary truncate text-(length:--text-xs) font-medium"
+              class="text-text-secondary truncate text-(length:--text-xs) font-medium max-lg:hidden"
               data-test="billings-usage-tile-title"
               :title="tile.label"
             >
@@ -124,7 +125,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </div>
           </div>
           <div class="flex items-baseline gap-1 whitespace-nowrap">
-            <span class="text-text-body text-(length:--text-xl) leading-none font-bold">
+            <span
+              class="text-text-body text-(length:--text-xl) leading-none font-bold max-lg:text-(length:--text-lg)"
+            >
               {{ tile.value }}
             </span>
             <span class="text-text-secondary text-(length:--text-xs) font-medium">
@@ -133,7 +136,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
           <div
             v-if="usageCost[tile.key]"
-            class="text-text-secondary text-(length:--text-xs) font-medium"
+            class="text-text-secondary text-(length:--text-xs) font-medium max-lg:hidden"
           >
             {{ "$" + usageCost[tile.key] }}
           </div>
@@ -222,6 +225,7 @@ import { defineComponent, ref, onMounted, watch, computed, inject } from "vue";
 import { useStore } from "vuex";
 import useTheme from "@/composables/useTheme";
 import { useI18nTyped, type I18nText } from "@/types/i18n";
+import useBreakpoint from "@/composables/useBreakpoint";
 import BillingService from "@/services/billings";
 import organizations from "@/services/organizations";
 import { useRouter } from "vue-router";
@@ -244,6 +248,7 @@ export default defineComponent({
   },
   setup() {
     const { t } = useI18nTyped();
+    const { lgUp } = useBreakpoint();
     const store = useStore();
     const { isDark } = useTheme();
     const router = useRouter();
@@ -820,6 +825,7 @@ export default defineComponent({
     });
 
     return {
+      lgUp,
       t,
       store,
       chartData,
diff --git a/web/src/enterprise/components/onlineEvals/EvalJobList.vue b/web/src/enterprise/components/onlineEvals/EvalJobList.vue
index 8d3802ad16..25ca0ca541 100644
--- a/web/src/enterprise/components/onlineEvals/EvalJobList.vue
+++ b/web/src/enterprise/components/onlineEvals/EvalJobList.vue
@@ -78,7 +78,7 @@
         </template>
 
         <template #bottom="{ totalRows }">
-          <span class="text-xs font-normal">
+          <span class="text-xs font-normal max-md:hidden">
             {{ totalRows.toLocaleString() }} {{ t("onlineEvals.job.listTitle") }}
           </span>
           <OButton
@@ -126,6 +126,7 @@
               icon-left="play-arrow"
               :loading="pendingStatusId === row.id"
               :disabled="pendingStatusId !== null && pendingStatusId !== row.id"
+              class="max-md:hidden"
               @click.stop="$emit('activate', row)"
             />
             <OButton
@@ -137,6 +138,7 @@
               icon-left="pause"
               :loading="pendingStatusId === row.id"
               :disabled="pendingStatusId !== null && pendingStatusId !== row.id"
+              class="max-md:hidden"
               @click.stop="$emit('pause', row)"
             />
             <OButton
@@ -145,6 +147,7 @@
               size="icon-sm"
               :title="t('onlineEvals.actions.edit')"
               icon-left="edit"
+              class="max-md:hidden"
               @click.stop="$emit('edit', row)"
             />
             <OButton
@@ -153,8 +156,59 @@
               size="icon-sm"
               :title="t('onlineEvals.actions.delete')"
               icon-left="delete"
+              class="max-md:hidden"
               @click.stop="$emit('delete', row)"
             />
+            <ODropdown side="bottom" align="end">
+              <template #trigger>
+                <OButton
+                  icon-left="more-vert"
+                  variant="ghost"
+                  size="icon-xs-sq"
+                  class="md:hidden"
+                  data-test="eval-job-list-row-more-actions"
+                  @click.stop
+                />
+              </template>
+              <ODropdownItem
+                v-if="canActivate(row.status)"
+                icon-left="play-arrow"
+                class="md:hidden"
+                :disabled="pendingStatusId !== null && pendingStatusId !== row.id"
+                :data-test="`eval-job-list-${row.name}-activate-btn-menu`"
+                @select="$emit('activate', row)"
+              >
+                <span>{{ t("onlineEvals.actions.activate") }}</span>
+              </ODropdownItem>
+              <ODropdownItem
+                v-if="canPause(row.status)"
+                icon-left="pause"
+                variant="destructive"
+                class="md:hidden"
+                :disabled="pendingStatusId !== null && pendingStatusId !== row.id"
+                :data-test="`eval-job-list-${row.name}-pause-btn-menu`"
+                @select="$emit('pause', row)"
+              >
+                <span>{{ t("onlineEvals.actions.pause") }}</span>
+              </ODropdownItem>
+              <ODropdownItem
+                icon-left="edit"
+                class="md:hidden"
+                :data-test="`eval-job-list-${row.name}-edit-btn-menu`"
+                @select="$emit('edit', row)"
+              >
+                <span>{{ t("onlineEvals.actions.edit") }}</span>
+              </ODropdownItem>
+              <ODropdownItem
+                icon-left="delete"
+                variant="destructive"
+                class="md:hidden"
+                :data-test="`eval-job-list-${row.name}-delete-btn-menu`"
+                @select="$emit('delete', row)"
+              >
+                <span>{{ t("onlineEvals.actions.delete") }}</span>
+              </ODropdownItem>
+            </ODropdown>
           </div>
         </template>
       </OTable>
@@ -167,6 +221,8 @@ import { computed, ref, watch } from "vue";
 import { useI18nTyped, raw } from "@/types/i18n";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import { useShortcuts } from "@/lib/vue-shortcut-manager";
 import { isInputFocused } from "@/utils/keyboardShortcuts";
 import OTable from "@/lib/core/Table/OTable.vue";
diff --git a/web/src/enterprise/components/onlineEvals/QualityPage.vue b/web/src/enterprise/components/onlineEvals/QualityPage.vue
index 344538dd58..2446651ef4 100644
--- a/web/src/enterprise/components/onlineEvals/QualityPage.vue
+++ b/web/src/enterprise/components/onlineEvals/QualityPage.vue
@@ -34,7 +34,7 @@
     <QualityKpiSkeleton v-if="showKpiSkeleton" :count="visibleKpis.length" class="px-page-edge" />
     <KpiCardRow
       v-else
-      gap="gap-2"
+      gap="gap-2 max-lg:gap-1.5"
       class="quality-page__kpis px-page-edge"
       :aria-label="t('onlineEvals.quality.kpisAriaLabel')"
     >
diff --git a/web/src/enterprise/components/onlineEvals/ScoreConfigList.vue b/web/src/enterprise/components/onlineEvals/ScoreConfigList.vue
index ce5b164850..fa2edb2e48 100644
--- a/web/src/enterprise/components/onlineEvals/ScoreConfigList.vue
+++ b/web/src/enterprise/components/onlineEvals/ScoreConfigList.vue
@@ -120,7 +120,7 @@
         </template>
 
         <template #bottom="{ totalRows }">
-          <span class="text-xs font-normal">
+          <span class="text-xs font-normal max-md:hidden">
             {{ totalRows.toLocaleString() }} {{ t("onlineEvals.scoreConfig.listTitle") }}
           </span>
           <OButton
@@ -145,6 +145,7 @@
               size="icon-sm"
               :title="t('onlineEvals.actions.edit')"
               icon-left="edit"
+              class="max-md:hidden"
               @click.stop="$emit('edit', row)"
             />
             <OButton
@@ -153,6 +154,7 @@
               size="icon-sm"
               :title="t('onlineEvals.actions.export')"
               icon-left="download"
+              class="max-md:hidden"
               @click.stop="$emit('export', row)"
             />
             <OButton
@@ -162,8 +164,46 @@
               size="icon-sm"
               :title="t('onlineEvals.actions.delete')"
               icon-left="delete"
+              class="max-md:hidden"
               @click.stop="$emit('delete', row)"
             />
+            <ODropdown side="bottom" align="end">
+              <template #trigger>
+                <OButton
+                  icon-left="more-vert"
+                  variant="ghost"
+                  size="icon-xs-sq"
+                  class="md:hidden"
+                  data-test="score-config-list-row-more-actions"
+                  @click.stop
+                />
+              </template>
+              <ODropdownItem
+                icon-left="edit"
+                class="md:hidden"
+                :data-test="`score-config-list-${row.name}-edit-btn-menu`"
+                @select="$emit('edit', row)"
+              >
+                <span>{{ t("onlineEvals.actions.edit") }}</span>
+              </ODropdownItem>
+              <ODropdownItem
+                icon-left="download"
+                class="md:hidden"
+                :data-test="`score-config-list-${row.name}-export-btn-menu`"
+                @select="$emit('export', row)"
+              >
+                <span>{{ t("onlineEvals.actions.export") }}</span>
+              </ODropdownItem>
+              <ODropdownItem
+                icon-left="delete"
+                variant="destructive"
+                class="md:hidden"
+                :data-test="`score-config-list-${row.name}-delete-btn-menu`"
+                @select="$emit('delete', row)"
+              >
+                <span>{{ t("onlineEvals.actions.delete") }}</span>
+              </ODropdownItem>
+            </ODropdown>
           </div>
         </template>
       </OTable>
@@ -176,6 +216,8 @@ import { computed, ref } from "vue";
 import { raw, useI18nTyped } from "@/types/i18n";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import { useShortcuts } from "@/lib/vue-shortcut-manager";
 import { isInputFocused } from "@/utils/keyboardShortcuts";
 import OTag from "@/lib/core/Badge/OTag.vue";
diff --git a/web/src/enterprise/components/onlineEvals/ScorerList.vue b/web/src/enterprise/components/onlineEvals/ScorerList.vue
index b5522a79bb..359447e1e7 100644
--- a/web/src/enterprise/components/onlineEvals/ScorerList.vue
+++ b/web/src/enterprise/components/onlineEvals/ScorerList.vue
@@ -109,7 +109,7 @@
         </template>
 
         <template #bottom="{ totalRows }">
-          <span class="text-xs font-normal">
+          <span class="text-xs font-normal max-md:hidden">
             {{ totalRows.toLocaleString() }} {{ t("onlineEvals.scorer.listTitle") }}
           </span>
           <OButton
@@ -150,6 +150,7 @@
               size="icon-sm"
               :title="t('onlineEvals.actions.edit')"
               icon-left="edit"
+              class="max-md:hidden"
               @click.stop="$emit('edit', row)"
             />
             <OButton
@@ -158,6 +159,7 @@
               size="icon-sm"
               :title="t('onlineEvals.actions.export')"
               icon-left="download"
+              class="max-md:hidden"
               @click.stop="$emit('export', row)"
             />
             <OButton
@@ -167,8 +169,46 @@
               size="icon-sm"
               :title="t('onlineEvals.actions.delete')"
               icon-left="delete"
+              class="max-md:hidden"
               @click.stop="$emit('delete', row)"
             />
+            <ODropdown side="bottom" align="end">
+              <template #trigger>
+                <OButton
+                  icon-left="more-vert"
+                  variant="ghost"
+                  size="icon-xs-sq"
+                  class="md:hidden"
+                  data-test="scorer-list-row-more-actions"
+                  @click.stop
+                />
+              </template>
+              <ODropdownItem
+                icon-left="edit"
+                class="md:hidden"
+                :data-test="`scorer-list-${row.name}-edit-btn-menu`"
+                @select="$emit('edit', row)"
+              >
+                <span>{{ t("onlineEvals.actions.edit") }}</span>
+              </ODropdownItem>
+              <ODropdownItem
+                icon-left="download"
+                class="md:hidden"
+                :data-test="`scorer-list-${row.name}-export-btn-menu`"
+                @select="$emit('export', row)"
+              >
+                <span>{{ t("onlineEvals.actions.export") }}</span>
+              </ODropdownItem>
+              <ODropdownItem
+                icon-left="delete"
+                variant="destructive"
+                class="md:hidden"
+                :data-test="`scorer-list-${row.name}-delete-btn-menu`"
+                @select="$emit('delete', row)"
+              >
+                <span>{{ t("onlineEvals.actions.delete") }}</span>
+              </ODropdownItem>
+            </ODropdown>
           </div>
         </template>
       </OTable>
@@ -180,6 +220,8 @@
 import { computed, ref } from "vue";
 import { useI18nTyped, raw } from "@/types/i18n";
 import OButton from "@/lib/core/Button/OButton.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import { useShortcuts } from "@/lib/vue-shortcut-manager";
 import { isInputFocused } from "@/utils/keyboardShortcuts";
diff --git a/web/src/enterprise/components/onlineEvals/quality/QualityKpiCard.vue b/web/src/enterprise/components/onlineEvals/quality/QualityKpiCard.vue
index 3454fe6198..ce9861a701 100644
--- a/web/src/enterprise/components/onlineEvals/quality/QualityKpiCard.vue
+++ b/web/src/enterprise/components/onlineEvals/quality/QualityKpiCard.vue
@@ -1,23 +1,24 @@
 <template>
   <div
     :class="[
-      'bg-card-glass-bg rounded-default border-border-default flex flex-col gap-0.5 overflow-hidden border px-3 pt-1.5 pb-1.5 transition-shadow duration-200 ease-in-out hover:shadow-sm',
+      'bg-card-glass-bg rounded-default border-border-default flex flex-col gap-0.5 overflow-hidden border px-3 pt-1.5 pb-1.5 transition-shadow duration-200 ease-in-out hover:shadow-sm max-lg:shrink-0 max-lg:basis-auto max-lg:px-1.5 max-lg:py-1',
       clickable &&
         'hover:border-accent focus-visible:ring-accent cursor-pointer focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none',
     ]"
     :data-test="`quality-kpi-${kpi.id}`"
+    :title="lgUp ? undefined : t(`onlineEvals.quality.kpis.${kpi.id}.title`)"
     :role="clickable ? 'button' : undefined"
     :tabindex="clickable ? 0 : undefined"
     @click="activate"
     @keydown.enter.prevent="activate"
     @keydown.space.prevent="activate"
   >
-    <div class="flex flex-col gap-0.5">
+    <div class="flex flex-col gap-0.5 max-lg:flex-row-reverse max-lg:items-center max-lg:gap-1.5">
       <!-- Label + a metric icon in a soft corner tile — same KPI-card pattern
            as LLM Insights / Session Detail so every card reads the same. -->
       <div class="flex items-center justify-between gap-2">
         <div
-          class="kpi-label text-2xs text-text-secondary min-w-0 truncate leading-normal font-semibold"
+          class="kpi-label text-2xs text-text-secondary min-w-0 truncate leading-normal font-semibold max-lg:hidden"
         >
           {{ t(`onlineEvals.quality.kpis.${kpi.id}.title`) }}
         </div>
@@ -29,7 +30,7 @@
       </div>
       <div class="flex items-baseline gap-[0.2rem]">
         <template v-if="kpi.value != null">
-          <span class="text-text-secondary text-2xl leading-none font-bold">
+          <span class="text-text-secondary text-2xl leading-none font-bold max-lg:text-lg">
             {{ bigNumber }}
           </span>
           <span v-if="unitLabel" class="text-compact text-text-secondary font-semibold">
@@ -42,7 +43,7 @@
       </div>
       <div
         v-if="kpi.id === 'scoreResults' && kpi.scopeCounts"
-        class="text-3xs text-text-tertiary flex flex-wrap items-center gap-x-2 gap-y-0.5 font-medium"
+        class="text-3xs text-text-tertiary flex flex-wrap items-center gap-x-2 gap-y-0.5 font-medium max-lg:hidden"
         data-test="quality-kpi-scope-breakdown"
       >
         <span
@@ -64,7 +65,7 @@
            short history) rather than zero. -->
       <div
         v-if="kpi.value != null"
-        class="text-3xs flex items-center gap-1 font-medium"
+        class="text-3xs flex items-center gap-1 font-medium max-lg:hidden"
         :class="{
           'text-status-success-text': (delta != null ? trendSentiment : 'neutral') === 'good',
           'text-error-600': (delta != null ? trendSentiment : 'neutral') === 'bad',
@@ -86,7 +87,7 @@
       :data="kpi.sparkline"
       :color="sparkColor"
       :height="20"
-      class="-mx-3 mt-auto -mb-1.5"
+      class="-mx-3 mt-auto -mb-1.5 max-lg:hidden"
     />
   </div>
 </template>
@@ -97,6 +98,9 @@ import { useI18nTyped } from "@/types/i18n";
 import KpiSparkline from "@/plugins/traces/KpiSparkline.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import type { KpiCard } from "../composables/useQualityData";
+import useBreakpoint from "@/composables/useBreakpoint";
+
+const { lgUp } = useBreakpoint();
 
 const props = defineProps<{
   kpi: KpiCard;
diff --git a/web/src/enterprise/components/onlineEvals/quality/QualityKpiSkeleton.vue b/web/src/enterprise/components/onlineEvals/quality/QualityKpiSkeleton.vue
index dd383366d4..2acd691820 100644
--- a/web/src/enterprise/components/onlineEvals/quality/QualityKpiSkeleton.vue
+++ b/web/src/enterprise/components/onlineEvals/quality/QualityKpiSkeleton.vue
@@ -5,7 +5,7 @@
     <div
       v-for="n in count"
       :key="n"
-      class="bg-card-glass-bg border-border-default rounded-default flex min-h-24 flex-col gap-0.5 border px-3 pt-1.5 pb-1.5"
+      class="bg-card-glass-bg border-border-default rounded-default flex min-h-24 flex-col gap-0.5 border px-3 pt-1.5 pb-1.5 max-lg:min-h-9 max-lg:w-20 max-lg:shrink-0"
       data-test="quality-kpi-skeleton"
     >
       <OSkeleton type="text" class="h-2.75 w-[55%]" />
diff --git a/web/src/enterprise/views/AIObservability/DatasetDetailPage.vue b/web/src/enterprise/views/AIObservability/DatasetDetailPage.vue
index 59de973939..f4cf0df44d 100644
--- a/web/src/enterprise/views/AIObservability/DatasetDetailPage.vue
+++ b/web/src/enterprise/views/AIObservability/DatasetDetailPage.vue
@@ -183,6 +183,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   variant="ghost"
                   size="icon-sm"
                   icon-left="edit"
+                  class="max-md:hidden"
                   :data-test="`ai-dataset-detail-item-edit-${row.id}`"
                   @click.stop="openEditItem(row)"
                 >
@@ -192,11 +193,41 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   variant="ghost-destructive"
                   size="icon-sm"
                   icon-left="delete"
+                  class="max-md:hidden"
                   :data-test="`ai-dataset-detail-item-delete-${row.id}`"
                   @click.stop="removeItem(row)"
                 >
                   <OTooltip side="bottom" :content="t('common.delete')" />
                 </OButton>
+                <ODropdown side="bottom" align="end">
+                  <template #trigger>
+                    <OButton
+                      icon-left="more-vert"
+                      variant="ghost"
+                      size="icon-xs-sq"
+                      class="md:hidden"
+                      data-test="ai-dataset-detail-row-more-actions"
+                      @click.stop
+                    />
+                  </template>
+                  <ODropdownItem
+                    icon-left="edit"
+                    class="md:hidden"
+                    :data-test="`ai-dataset-detail-item-edit-${row.id}-menu`"
+                    @select="openEditItem(row)"
+                  >
+                    <span>{{ t("common.edit") }}</span>
+                  </ODropdownItem>
+                  <ODropdownItem
+                    icon-left="delete"
+                    variant="destructive"
+                    class="md:hidden"
+                    :data-test="`ai-dataset-detail-item-delete-${row.id}-menu`"
+                    @select="removeItem(row)"
+                  >
+                    <span>{{ t("common.delete") }}</span>
+                  </ODropdownItem>
+                </ODropdown>
               </div>
             </template>
           </OTable>
@@ -356,6 +387,8 @@ import type { BadgeVariant } from "@/lib/core/Badge/OBadge.types";
 import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import OContent from "@/lib/core/Content/OContent.vue";
 import OTabs from "@/lib/navigation/Tabs/OTabs.vue";
 import OTab from "@/lib/navigation/Tabs/OTab.vue";
diff --git a/web/src/enterprise/views/AIObservability/DatasetsPage.vue b/web/src/enterprise/views/AIObservability/DatasetsPage.vue
index 19c4e5f770..33611654e1 100644
--- a/web/src/enterprise/views/AIObservability/DatasetsPage.vue
+++ b/web/src/enterprise/views/AIObservability/DatasetsPage.vue
@@ -143,6 +143,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               variant="ghost"
               size="icon-sm"
               icon-left="edit"
+              class="max-md:hidden"
               :data-test="`ai-datasets-edit-${row.id}`"
               @click.stop="openEdit(row)"
             >
@@ -152,11 +153,41 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               variant="ghost-destructive"
               size="icon-sm"
               icon-left="delete"
+              class="max-md:hidden"
               :data-test="`ai-datasets-delete-${row.id}`"
               @click.stop="removeDataset(row)"
             >
               <OTooltip side="bottom" :content="t('common.delete')" />
             </OButton>
+            <ODropdown side="bottom" align="end">
+              <template #trigger>
+                <OButton
+                  icon-left="more-vert"
+                  variant="ghost"
+                  size="icon-xs-sq"
+                  class="md:hidden"
+                  data-test="ai-datasets-row-more-actions"
+                  @click.stop
+                />
+              </template>
+              <ODropdownItem
+                icon-left="edit"
+                class="md:hidden"
+                :data-test="`ai-datasets-edit-${row.id}-menu`"
+                @select="openEdit(row)"
+              >
+                <span>{{ t("common.edit") }}</span>
+              </ODropdownItem>
+              <ODropdownItem
+                icon-left="delete"
+                variant="destructive"
+                class="md:hidden"
+                :data-test="`ai-datasets-delete-${row.id}-menu`"
+                @select="removeDataset(row)"
+              >
+                <span>{{ t("common.delete") }}</span>
+              </ODropdownItem>
+            </ODropdown>
           </div>
         </template>
       </OTable>
@@ -240,6 +271,8 @@ import OTimeCell from "@/lib/core/Table/cells/OTimeCell.vue";
 import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import ODrawer from "@/lib/overlay/Drawer/ODrawer.vue";
 import OForm from "@/lib/forms/Form/OForm.vue";
 import { useOForm } from "@/lib/forms/Form/useOForm";
diff --git a/web/src/enterprise/views/AIObservability/DiscoveryPage.vue b/web/src/enterprise/views/AIObservability/DiscoveryPage.vue
index e8157b175e..ae5e6be1ee 100644
--- a/web/src/enterprise/views/AIObservability/DiscoveryPage.vue
+++ b/web/src/enterprise/views/AIObservability/DiscoveryPage.vue
@@ -80,10 +80,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Search stretches so the queue filter and the column toggle OTable
              injects after this slot both sit at the right edge. -->
         <template #toolbar>
-          <div class="flex w-full items-center gap-2">
+          <div class="flex w-full items-center gap-2 max-lg:min-w-0 max-md:contents">
             <OSearchInput
               v-model="search"
-              class="min-w-0 flex-1"
+              class="min-w-0 flex-1 max-md:min-w-24"
               :placeholder="t('aiObservability.discovery.searchPlaceholder')"
               data-test="ai-discovery-search-input"
               clearable
@@ -95,7 +95,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               value-key="value"
               :searchable="false"
               width="sm"
-              class="shrink-0"
+              class="shrink-0 max-md:w-36"
               data-test="ai-discovery-in-queue-filter"
               @update:model-value="onQueueStatusChange"
             />
@@ -218,9 +218,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   })
                 }}
               </template>
-              <template v-else>
+              <span v-else class="max-md:hidden">
                 {{ t("aiObservability.discovery.footerTitle", { scope: scopeNoun }) }}
-              </template>
+              </span>
             </span>
             <AddToQueueMenu
               v-if="selectedIds.length"
diff --git a/web/src/enterprise/views/AIObservability/PlaygroundPage.vue b/web/src/enterprise/views/AIObservability/PlaygroundPage.vue
index a89110710a..f79dc80abd 100644
--- a/web/src/enterprise/views/AIObservability/PlaygroundPage.vue
+++ b/web/src/enterprise/views/AIObservability/PlaygroundPage.vue
@@ -18,8 +18,9 @@
     icon="play-circle"
     title-data-test="ai-playground-title"
     bleed
+    overflow-first
   >
-    <template #actions>
+    <template #actions-overflow>
       <ODropdown v-if="recentDrafts.length" align="end" content-class="w-100">
         <template #trigger>
           <OButton
@@ -57,7 +58,11 @@
       >
         {{ t("aiObservability.playground.reset") }}
       </OButton>
-      <span class="text-text-secondary text-xs" data-test="ai-playground-window-count">
+      <span
+        v-if="!isMobile"
+        class="text-text-secondary text-xs"
+        data-test="ai-playground-window-count"
+      >
         {{
           t("aiObservability.playground.windowCount", {
             count: draft.variants.length,
@@ -86,6 +91,21 @@
       >
         {{ t("aiObservability.playground.share") }}
       </OButton>
+    </template>
+
+    <template #actions>
+      <span
+        v-if="isMobile"
+        class="text-text-secondary text-xs"
+        data-test="ai-playground-window-count"
+      >
+        {{
+          t("aiObservability.playground.windowCount", {
+            count: draft.variants.length,
+            max: MAX_VARIANTS,
+          })
+        }}
+      </span>
       <OButton
         v-if="runningAll"
         variant="cancel-query"
@@ -287,6 +307,7 @@ import PlaygroundExpectedBar from "@/enterprise/components/AIObservability/Playg
 import PlaygroundSampleDialog from "@/enterprise/components/AIObservability/PlaygroundSampleDialog.vue";
 import PlaygroundScorersMenu from "@/enterprise/components/AIObservability/PlaygroundScorersMenu.vue";
 import PlaygroundShareDialog from "@/enterprise/components/AIObservability/PlaygroundShareDialog.vue";
+import useBreakpoint from "@/composables/useBreakpoint";
 import PlaygroundVariableBar from "@/enterprise/components/AIObservability/PlaygroundVariableBar.vue";
 import PlaygroundVariantColumn from "@/enterprise/components/AIObservability/PlaygroundVariantColumn.vue";
 import onlineEvalsService, { type Provider, type Scorer } from "@/services/online-evals.service";
@@ -351,6 +372,7 @@ const results = reactive<PlaygroundResults>({});
 const providers = ref<Provider[]>([]);
 const loadingProviders = ref(true);
 const scorers = ref<Scorer[]>([]);
+const { isMobile } = useBreakpoint();
 const scoring = ref(false);
 const datasets = ref<LlmDataset[]>([]);
 
diff --git a/web/src/enterprise/views/AIObservability/RemoteTasksPage.vue b/web/src/enterprise/views/AIObservability/RemoteTasksPage.vue
index a08db7650e..6331087f4b 100644
--- a/web/src/enterprise/views/AIObservability/RemoteTasksPage.vue
+++ b/web/src/enterprise/views/AIObservability/RemoteTasksPage.vue
@@ -157,6 +157,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               size="icon-sm"
               icon-left="edit"
               :disabled="!canEdit(row)"
+              class="max-md:hidden"
               :data-test="`ai-remote-tasks-edit-${row.entityId}`"
               @click.stop="openEdit(row)"
             >
@@ -173,11 +174,42 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               variant="ghost-destructive"
               size="icon-sm"
               icon-left="delete"
+              class="max-md:hidden"
               :data-test="`ai-remote-tasks-delete-${row.entityId}`"
               @click.stop="removeTask(row)"
             >
               <OTooltip side="bottom" :content="t('common.delete')" />
             </OButton>
+            <ODropdown side="bottom" align="end">
+              <template #trigger>
+                <OButton
+                  icon-left="more-vert"
+                  variant="ghost"
+                  size="icon-xs-sq"
+                  class="md:hidden"
+                  data-test="ai-remote-tasks-row-more-actions"
+                  @click.stop
+                />
+              </template>
+              <ODropdownItem
+                icon-left="edit"
+                class="md:hidden"
+                :disabled="!canEdit(row)"
+                :data-test="`ai-remote-tasks-edit-${row.entityId}-menu`"
+                @select="openEdit(row)"
+              >
+                <span>{{ t("aiObservability.remoteTasks.edit") }}</span>
+              </ODropdownItem>
+              <ODropdownItem
+                icon-left="delete"
+                variant="destructive"
+                class="md:hidden"
+                :data-test="`ai-remote-tasks-delete-${row.entityId}-menu`"
+                @select="removeTask(row)"
+              >
+                <span>{{ t("common.delete") }}</span>
+              </ODropdownItem>
+            </ODropdown>
           </div>
         </template>
       </OTable>
@@ -198,6 +230,8 @@ import OTag from "@/lib/core/Badge/OTag.vue";
 import OSearchInput from "@/lib/forms/SearchInput/OSearchInput.vue";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import { COL, type OTableColumnDef } from "@/lib/core/Table/OTable.types";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import { useConfirmDialog } from "@/composables/useConfirmDialog";
diff --git a/web/src/layouts/MainLayout.vue b/web/src/layouts/MainLayout.vue
index a808f7713f..5204b203d9 100644
--- a/web/src/layouts/MainLayout.vue
+++ b/web/src/layouts/MainLayout.vue
@@ -74,6 +74,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         @change-language="changeLanguage"
         @open-predefined-themes="openPredefinedThemes"
         @open-shortcuts="openShortcutsList"
+        @toggle-mobile-nav="mobileNavOpen = !mobileNavOpen"
         @signout="signout"
       />
     </header>
@@ -81,23 +82,66 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div class="flex min-h-0 flex-1">
       <ONavbar
         v-if="store.state.printMode !== true"
+        class="max-md:hidden"
         :links-list="navLinks"
         :mini-mode="miniMode"
         :visible="leftDrawerOpen"
         @menu-hover="handleMenuHover"
       />
 
+      <!-- Not seamless: the scrim gives tap-outside-to-close a target. -->
+      <ODrawer
+        v-model:open="mobileNavOpen"
+        side="left"
+        :width="30"
+        bleed
+        :show-close="false"
+        data-test="main-layout-mobile-nav-drawer"
+      >
+        <div class="flex h-full min-h-0 flex-col">
+          <div
+            class="border-border-default flex shrink-0 items-center justify-between border-b px-4 py-3"
+          >
+            <img
+              class="h-6 w-auto"
+              :src="
+                getImageURL(
+                  isDark
+                    ? 'images/common/openobserve_latest_dark_2.svg'
+                    : 'images/common/openobserve_latest_light_2.svg',
+                )
+              "
+              :alt="raw('OpenObserve')"
+            />
+            <OButton
+              variant="ghost"
+              size="icon"
+              icon-left="close"
+              data-test="main-layout-mobile-nav-close"
+              @click="mobileNavOpen = false"
+            />
+          </div>
+          <ONavbar
+            class="min-h-0 flex-1 overflow-y-auto"
+            :links-list="navLinks"
+            :visible="true"
+            @menu-hover="handleMenuHover"
+          />
+        </div>
+      </ODrawer>
+
       <div class="flex h-full min-h-0 min-w-0 flex-1">
         <!-- Main Panel -->
         <main
           data-test="main-content"
-          class="bg-surface-chrome-deeper flex min-h-0 flex-col pe-2 pb-2"
+          class="bg-surface-chrome-deeper flex min-h-0 flex-col pe-2 pb-2 max-md:pe-0"
           :style="{
-            width: !store.state.isAiChatEnabled
-              ? '100%'
-              : store.state.isAiChatExpanded
-                ? '50%'
-                : '75%',
+            width:
+              !store.state.isAiChatEnabled || isMobile
+                ? '100%'
+                : store.state.isAiChatExpanded
+                  ? '50%'
+                  : '75%',
           }"
         >
           <!-- Content card — all pages render inside this. The border stays present in both
@@ -121,7 +165,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Right Panel (AI Chat - unified for both general and context-specific usage) -->
         <aside
           v-show="store.state.isAiChatEnabled && isLoading"
-          class="o2-sidebar o2-sidebar-right bg-surface-chrome-deeper sticky top-[var(--navbar-height,2.25rem)] shrink-0 self-start overflow-y-auto"
+          class="o2-sidebar o2-sidebar-right bg-surface-chrome-deeper shrink-0 overflow-y-auto"
           :class="[
             isDark ? 'dark-mode-chat-container' : 'light-mode-chat-container',
             { 'o2-sidebar--expanded': store.state.isAiChatExpanded },
@@ -129,17 +173,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             // card's right/bottom gap (+ rounded-surface corners) so they read as
             // the same card. Expanding only widens it; it never overlays the header.
             'pe-2 pb-2',
+            isMobile
+              ? 'fixed inset-x-0 bottom-0 z-50 ps-2'
+              : 'sticky top-[var(--navbar-height,2.25rem)] self-start',
           ]"
           :style="[
             {
               height: 'calc(100vh - var(--navbar-height, 2.25rem))',
               maxWidth: '100%',
             },
-            // Full-screen just widens the panel (25% → 50%) beside the content —
-            // same top position + height, so the main header stays visible.
-            store.state.isAiChatExpanded
-              ? { width: '50%', minWidth: '18.75rem' }
-              : { width: '25%', minWidth: '4.688rem' },
+            isMobile
+              ? { width: '100%', top: 'var(--navbar-height, 2.25rem)' }
+              : // Full-screen just widens the panel (25% → 50%) beside the content —
+                // same top position + height, so the main header stays visible.
+                store.state.isAiChatExpanded
+                ? { width: '50%', minWidth: '18.75rem' }
+                : { width: '25%', minWidth: '4.688rem' },
           ]"
         >
           <O2AIChat
@@ -213,6 +262,9 @@ import { usePredefinedThemes } from "@/composables/usePredefinedThemes";
 import GetStarted from "@/components/login/GetStarted.vue";
 import CommunitySlackInvite from "@/components/CommunitySlackInvite.vue";
 import ODialog from "@/lib/overlay/Dialog/ODialog.vue";
+import ODrawer from "@/lib/overlay/Drawer/ODrawer.vue";
+import OButton from "@/lib/core/Button/OButton.vue";
+import useBreakpoint from "@/composables/useBreakpoint";
 import SlackIcon from "@/components/icons/SlackIcon.vue";
 import ManagementIcon from "@/components/icons/ManagementIcon.vue";
 import organizations from "@/services/organizations";
@@ -254,6 +306,8 @@ export default defineComponent({
     GetStarted,
     CommunitySlackInvite,
     ODialog,
+    ODrawer,
+    OButton,
   },
   methods: {
     navigateToDocs() {
@@ -324,6 +378,15 @@ export default defineComponent({
     const zoBackendUrl = store.state.API_ENDPOINT;
     const isLoading = ref(false);
 
+    const { isMobile } = useBreakpoint();
+    const mobileNavOpen = ref(false);
+    watch(
+      () => router.currentRoute.value.fullPath,
+      () => {
+        mobileNavOpen.value = false;
+      },
+    );
+
     const { getStreams, resetStreams } = useStreams(t);
     const { closeSocket } = useSearchWebSocket();
     const { isOpen: isPredefinedThemesOpen, toggleThemes } = usePredefinedThemes();
@@ -1377,6 +1440,7 @@ export default defineComponent({
     return {
       isDark,
       t,
+      raw,
       router,
       store,
       config,
@@ -1389,6 +1453,8 @@ export default defineComponent({
       orgOptions,
       leftDrawerOpen: true,
       miniMode,
+      isMobile,
+      mobileNavOpen,
       user,
       zoBackendUrl,
       isLoading,
diff --git a/web/src/lib/core/EmptyState/EmptyStateActionCard.vue b/web/src/lib/core/EmptyState/EmptyStateActionCard.vue
index 38dd44ec48..6ee1db6b03 100644
--- a/web/src/lib/core/EmptyState/EmptyStateActionCard.vue
+++ b/web/src/lib/core/EmptyState/EmptyStateActionCard.vue
@@ -23,7 +23,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <button
     type="button"
-    class="group rounded-default border-border-default bg-surface-base hover:border-accent hover:bg-tabs-hover-bg focus-visible:ring-accent/40 relative flex min-h-16 max-w-72 min-w-0 flex-1 basis-56 cursor-pointer items-center gap-3 border py-2.5 ps-3 pe-3.5 text-left transition-[color,background-color,border-color,box-shadow,transform] duration-150 outline-none hover:shadow-md focus-visible:ring-[0.125rem]"
+    class="group rounded-default border-border-default bg-surface-base hover:border-accent hover:bg-tabs-hover-bg focus-visible:ring-accent/40 relative flex min-h-16 max-w-72 min-w-0 flex-1 basis-56 cursor-pointer items-center gap-3 border py-2.5 ps-3 pe-3.5 text-left transition-[color,background-color,border-color,box-shadow,transform] duration-150 outline-none hover:shadow-md focus-visible:ring-[0.125rem] max-md:max-w-full max-md:basis-full"
   >
     <span
       class="rounded-default bg-tabs-active-bg text-tabs-active-text group-hover:bg-accent group-hover:text-text-inverse relative inline-flex h-10 w-10 shrink-0 items-center justify-center transition-colors"
diff --git a/web/src/lib/core/EmptyState/EmptyStateIngestionCard.vue b/web/src/lib/core/EmptyState/EmptyStateIngestionCard.vue
index d38803bdc8..331441d986 100644
--- a/web/src/lib/core/EmptyState/EmptyStateIngestionCard.vue
+++ b/web/src/lib/core/EmptyState/EmptyStateIngestionCard.vue
@@ -22,7 +22,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <button
     type="button"
-    class="es-ing-card group rounded-default border-border-default bg-surface-base hover:border-accent hover:bg-tabs-hover-bg focus-visible:ring-accent/40 relative flex min-h-16 max-w-72 min-w-0 flex-1 basis-56 cursor-pointer items-center gap-3 border py-2.5 ps-3 pe-3.5 text-left transition-[color,background-color,border-color,box-shadow] duration-150 outline-none hover:shadow-md focus-visible:ring-2"
+    class="es-ing-card group rounded-default border-border-default bg-surface-base hover:border-accent hover:bg-tabs-hover-bg focus-visible:ring-accent/40 relative flex min-h-16 max-w-72 min-w-0 flex-1 basis-56 cursor-pointer items-center gap-3 border py-2.5 ps-3 pe-3.5 text-left transition-[color,background-color,border-color,box-shadow] duration-150 outline-none hover:shadow-md focus-visible:ring-2 max-md:max-w-full max-md:basis-full"
     @click="emit('click')"
   >
     <span
diff --git a/web/src/lib/core/EmptyState/OEmptyState.spec.ts b/web/src/lib/core/EmptyState/OEmptyState.spec.ts
index d97f14f90f..8abd59bf68 100644
--- a/web/src/lib/core/EmptyState/OEmptyState.spec.ts
+++ b/web/src/lib/core/EmptyState/OEmptyState.spec.ts
@@ -111,26 +111,27 @@ describe("OEmptyState", () => {
       expect(flexNowrapEl.exists()).toBe(false);
     });
 
-    it("uses flex-nowrap on the actions wrapper when columns is false", () => {
+    it("should keep a single row on lg+ but wrap below lg when columns is false", () => {
       // Arrange & Act
       wrapper = buildWrapper({ columns: false });
 
-      // Assert
+      // Assert — nowrap is lg+ only; below lg the row wraps instead of overflowing.
       const flexWrapEl = wrapper.find(".flex-wrap");
-      const flexNowrapEl = wrapper.find(".flex-nowrap");
+      const flexNowrapEl = wrapper.find(".lg\\:flex-nowrap");
 
       expect(flexWrapEl.exists()).toBe(false);
       expect(flexNowrapEl.exists()).toBe(true);
+      expect(flexNowrapEl.classes()).toContain("max-lg:flex-wrap");
     });
 
-    it("uses flex-nowrap on the actions wrapper when columns is omitted (default)", () => {
+    it("should keep a single row on lg+ but wrap below lg when columns is omitted (default)", () => {
       // Arrange & Act — no columns prop at all
       wrapper = buildWrapper();
 
-      // Assert — default is false, so flex-nowrap should be present and
-      // flex-wrap should not.
+      // Assert — default is false, so the lg+ nowrap variant should be present
+      // and unconditional flex-wrap should not.
       const flexWrapEl = wrapper.find(".flex-wrap");
-      const flexNowrapEl = wrapper.find(".flex-nowrap");
+      const flexNowrapEl = wrapper.find(".lg\\:flex-nowrap");
 
       expect(flexWrapEl.exists()).toBe(false);
       expect(flexNowrapEl.exists()).toBe(true);
diff --git a/web/src/lib/core/EmptyState/OEmptyState.vue b/web/src/lib/core/EmptyState/OEmptyState.vue
index e75fcea9fa..d7e61acaae 100644
--- a/web/src/lib/core/EmptyState/OEmptyState.vue
+++ b/web/src/lib/core/EmptyState/OEmptyState.vue
@@ -34,7 +34,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div
     :class="[
+      // Safe centering keeps the top reachable once the stack overflows its pane and scrolls.
       'o2-empty-state relative flex flex-col items-center justify-center overflow-hidden',
+      'max-lg:justify-center-safe max-lg:overflow-x-hidden max-lg:overflow-y-auto',
       '[--empty-dot:var(--color-grey-300)] dark:[--empty-dot:var(--color-grey-800)]',
       sizeClass.root,
       { 'o2-empty-state--hero': size === 'hero' },
@@ -49,8 +51,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       :style="dotGridStyle"
     />
 
+    <!-- max-w-full: the stack otherwise sizes to its widest child (the no-wrap action-card row). -->
     <div
-      :class="['relative flex w-full min-w-0 flex-col items-center text-center', sizeClass.stack]"
+      :class="[
+        'relative flex w-full max-w-full min-w-0 flex-col items-center text-center',
+        sizeClass.stack,
+      ]"
     >
       <!-- illustration (hero/block) — preset/illustration prop or slot -->
       <div v-if="hasIllustration" class="shrink-0">
@@ -97,7 +103,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :class="[
           props.columns
             ? 'flex flex-wrap justify-center'
-            : 'flex flex-nowrap items-stretch justify-center',
+            : 'flex items-stretch justify-center max-lg:flex-wrap lg:flex-nowrap',
           sizeClass.actions,
         ]"
       >
diff --git a/web/src/lib/core/Navbar/ONavGroup.vue b/web/src/lib/core/Navbar/ONavGroup.vue
index c53695eb39..9e4eb9ab79 100644
--- a/web/src/lib/core/Navbar/ONavGroup.vue
+++ b/web/src/lib/core/Navbar/ONavGroup.vue
@@ -55,6 +55,7 @@ import config from "@/aws-exports";
 import { GATE_PREDICATES } from "./navGroups";
 import type { SubnavChild, NavGateContext } from "./ONavbar.types";
 import { isInputFocused } from "@/utils/keyboardShortcuts";
+import useBreakpoint from "@/composables/useBreakpoint";
 
 const props = defineProps<{
   groupKey: string;
@@ -71,6 +72,8 @@ const { t } = useI18nTyped();
 
 const isLinkMode = computed(() => !!props.parentItem);
 
+const { isMobile } = useBreakpoint();
+
 // Submenu text is pure black in light mode (the dropdown-item-text token is
 // grey-900, which reads as "not quite black"); dark mode keeps the token so the
 // text stays legible on the dark surface.
@@ -350,12 +353,14 @@ function close() {
 }
 
 function scheduleOpen() {
+  // Some touch browsers emit a synthetic mouseenter, which would open a group the user only scrolled past.
+  if (isMobile.value) return;
   clearTimers();
   openTimer = setTimeout(() => open(), OPEN_DELAY);
 }
 
 function scheduleClose() {
-  if (isPinned.value) return;
+  if (isPinned.value || isMobile.value) return;
   clearTimers();
   closeTimer = setTimeout(() => close(), CLOSE_DELAY);
 }
@@ -474,8 +479,9 @@ function onChildMouseenter(event: MouseEvent) {
     <!-- Link mode: a navigating MenuLink that also reveals sub-pages on hover.
          `active` is driven by "is any child active" so a group tile (e.g. Data,
          whose children span several path roots) highlights on all its pages. -->
+    <!-- < md a tap toggles instead of routing away and closing the drawer; each group lists its own page as a child. -->
     <MenuLink
-      v-if="isLinkMode && parentItem"
+      v-if="isLinkMode && parentItem && !isMobile"
       submenu
       :title="title"
       :icon="icon"
@@ -498,11 +504,76 @@ function onChildMouseenter(event: MouseEvent) {
       @keydown="onTileKeydown"
     />
 
+    <!-- A teleported flyout anchored to the rail is unreachable on a phone, so < md the rows render inline. -->
+    <div
+      v-if="isMobile && isOpen"
+      :data-test="`nav-group-inline-${groupKey}`"
+      role="menu"
+      :aria-label="title"
+      class="border-border-default ms-3 mt-0.5 mb-1 flex flex-col gap-0.5 border-s ps-2"
+    >
+      <template v-for="block in flyoutBlocks" :key="`inline-${block.key}`">
+        <div
+          v-if="block.kind === 'group'"
+          role="group"
+          :aria-labelledby="`inline-${block.labelId}`"
+          :data-test="`nav-group-inline-section-${block.key}`"
+        >
+          <div
+            :id="`inline-${block.labelId}`"
+            role="presentation"
+            class="text-2xs text-tabs-inactive-text px-2 pt-2 pb-0.5 font-medium"
+          >
+            {{ t(block.labelKey) }}
+          </div>
+          <router-link
+            v-for="child in block.children"
+            :key="childKey(child)"
+            :data-test="childDataTest(child)"
+            role="menuitem"
+            :to="childTo(child)"
+            class="nav-group-item rounded-default flex cursor-pointer items-center gap-2 px-2 py-1.5 text-xs transition-colors duration-150 outline-none select-none [text-decoration:none]!"
+            :class="[
+              flyoutTextClass,
+              isChildActive(child) ? 'bg-select-item-selected-bg font-medium' : '',
+            ]"
+            :aria-current="isChildActive(child) ? 'page' : undefined"
+            @click="onChildClick"
+          >
+            <OIcon :name="child.icon" size="sm" class="shrink-0" :class="flyoutIconClass" />
+            <span class="leading-tight">{{
+              child.title ? raw(child.title) : t(child.titleKey)
+            }}</span>
+          </router-link>
+        </div>
+
+        <router-link
+          v-else
+          :data-test="childDataTest(block.child)"
+          role="menuitem"
+          :to="childTo(block.child)"
+          class="nav-group-item rounded-default flex cursor-pointer items-center gap-2 px-2 py-1.5 text-xs transition-colors duration-150 outline-none select-none [text-decoration:none]!"
+          :class="[
+            flyoutTextClass,
+            block.spaced ? 'mt-2' : '',
+            isChildActive(block.child) ? 'bg-select-item-selected-bg font-medium' : '',
+          ]"
+          :aria-current="isChildActive(block.child) ? 'page' : undefined"
+          @click="onChildClick"
+        >
+          <OIcon :name="block.child.icon" size="sm" class="shrink-0" :class="flyoutIconClass" />
+          <span class="leading-tight">{{
+            block.child.title ? raw(block.child.title) : t(block.child.titleKey)
+          }}</span>
+        </router-link>
+      </template>
+    </div>
+
     <!-- Flyout submenu — teleported to escape the rail's overflow clip; styled
          exactly like O2's native dropdown for consistency. -->
     <Teleport to="body">
       <div
-        v-if="isOpen"
+        v-if="isOpen && !isMobile"
         ref="flyoutRef"
         :data-test="`nav-group-flyout-${groupKey}`"
         role="menu"
diff --git a/web/src/lib/core/Navbar/ONavbar.vue b/web/src/lib/core/Navbar/ONavbar.vue
index 9645dd0066..5496b121c7 100644
--- a/web/src/lib/core/Navbar/ONavbar.vue
+++ b/web/src/lib/core/Navbar/ONavbar.vue
@@ -22,7 +22,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     :aria-label="t('components.navbar.mainNavigation')"
     data-test="navbar-main-nav"
     data-o2-navbar
-    class="left-drawer o2-navbar-scroll bg-surface-chrome-deeper flex min-h-0 w-[5.5rem] shrink-0 flex-col overflow-y-auto pb-1"
+    class="left-drawer o2-navbar-scroll bg-surface-chrome-deeper flex min-h-0 w-[5.5rem] shrink-0 flex-col overflow-y-auto pb-1 max-md:w-full"
     @keydown="handleKeydown"
   >
     <!-- Three rail-entry shapes (see navGroups.ts):
diff --git a/web/src/lib/core/PageHeader/OPageHeader.vue b/web/src/lib/core/PageHeader/OPageHeader.vue
index 2db1233107..1b210efe3e 100644
--- a/web/src/lib/core/PageHeader/OPageHeader.vue
+++ b/web/src/lib/core/PageHeader/OPageHeader.vue
@@ -37,7 +37,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   Tailwind utilities (unlayered CSS wins over layered utilities in v4).
 
   Props: title | titleDataTest | subtitle | icon | back | tabsBelow
-  Slots: title-prefix | title | subtitle | actions | tabs | back
+  Slots: title-prefix | title | subtitle | actions | actions-overflow | tabs | back
+
+  #actions-overflow — secondary actions. Inline on desktop; < md they collapse
+  behind a single "More" button so the primary ones keep one row.
 -->
 <template>
   <!-- No overflow-hidden here: it clipped the focus ring of the right-most
@@ -50,13 +53,31 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
        61px on some pages and 60px on others. -->
   <header
     class="app-page-header px-page-edge border-border-default shrink-0 border-b"
-    :class="[tabsBelow ? 'flex flex-col' : 'flex h-15 items-center justify-between gap-4']"
+    :data-drawer-anchor="ownsSidebarTrigger ? 'page-layout-sidebar' : undefined"
+    :class="[tabsBelow ? 'flex flex-col' : ROW_CLASS]"
   >
     <!-- Row 1. In two-row mode this is its own flex row; otherwise it collapses
          (display:contents) so the title block + actions stay direct children of
          the header — preserving the original single-row inline-tabs layout. -->
-    <div :class="tabsBelow ? 'flex h-15 items-center justify-between gap-4' : 'contents'">
-      <div class="flex h-full min-w-0 flex-1 items-center gap-3.25">
+    <div :class="tabsBelow ? ROW_CLASS : 'contents'">
+      <!-- flex-1 is basis-0, so the min-w floor is what forces the actions to wrap. -->
+      <div
+        class="flex h-full min-w-0 flex-1 items-center gap-3.25 max-lg:h-auto max-lg:self-stretch md:max-lg:min-w-40"
+        :class="[
+          hasBack ? 'max-md:min-w-40' : 'max-md:min-w-24',
+          hasTabs && !tabsBelow ? 'max-md:flex-wrap' : 'max-md:flex-nowrap',
+        ]"
+      >
+        <OButton
+          v-if="ownsSidebarTrigger"
+          variant="ghost"
+          size="icon-toolbar"
+          data-test="o-page-layout-mobile-sidebar-btn"
+          :aria-label="t('common.sidePanel')"
+          @click="layoutSidebar?.open()"
+        >
+          <OIcon name="menu" size="sm" />
+        </OButton>
         <slot name="title-prefix" />
 
         <!-- Sub-page: the module-icon tile BECOMES a Back button (same 8×8
@@ -79,7 +100,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Listing/index page: the module icon tile. -->
         <span
           v-else-if="icon"
-          class="rounded-default bg-tabs-active-bg text-tabs-active-text inline-flex h-9.5 w-9.5 shrink-0 items-center justify-center"
+          class="rounded-default bg-tabs-active-bg text-tabs-active-text inline-flex h-9.5 w-9.5 shrink-0 items-center justify-center max-md:hidden"
           aria-hidden="true"
         >
           <OIcon :name="icon" size="md" />
@@ -91,7 +112,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
              row and only ellipsise once genuinely out of room. -->
         <div
           class="flex min-w-0 flex-col justify-center"
-          :class="titleOverflow === 'visible' ? '' : 'shrink-0'"
+          :class="
+            titleOverflow === 'visible'
+              ? ''
+              : hasTabs && !tabsBelow
+                ? 'shrink-0 max-md:shrink'
+                : 'shrink-0 max-lg:shrink md:max-lg:min-w-32'
+          "
         >
           <h1
             class="text-text-heading min-h-6 text-base! leading-[1.45]! font-semibold! tracking-[-0.02em]!"
@@ -108,7 +135,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             v-if="hasSubtitle"
             variant="meta"
             as="div"
-            class="-mt-0.5 flex h-5 min-w-0 items-center"
+            class="-mt-0.5 flex h-5 min-w-0 items-center max-md:hidden"
           >
             <slot name="subtitle">
               <!-- leading-normal (not the meta variant's leading-none): truncate
@@ -125,13 +152,40 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <!-- Module tabs (Level-2 nav), inline to the right of the title.
            Two-row mode renders them as a full-width strip below instead. -->
-        <div v-if="hasTabs && !tabsBelow" class="flex h-full min-w-0 flex-1 items-center">
+        <div
+          v-if="hasTabs && !tabsBelow"
+          class="flex h-full min-w-0 flex-1 items-center max-md:h-auto max-md:basis-full max-md:flex-wrap"
+        >
           <slot name="tabs" />
         </div>
       </div>
 
-      <div v-if="hasActions" class="flex shrink-0 items-center gap-2">
+      <!-- max-w-full + shrink let the group wrap within its row; shrink-0 alone runs it off-screen. -->
+      <div
+        v-if="hasActions || hasActionsOverflow"
+        class="flex shrink-0 items-center gap-2 max-lg:ms-auto max-md:max-w-full max-md:shrink max-md:flex-wrap max-md:justify-end"
+      >
+        <slot v-if="hasActionsOverflow && !isMobile && overflowFirst" name="actions-overflow" />
         <slot name="actions" />
+
+        <template v-if="hasActionsOverflow">
+          <slot v-if="!isMobile && !overflowFirst" name="actions-overflow" />
+          <ODropdown v-else-if="isMobile" side="bottom" align="end">
+            <template #trigger>
+              <OButton
+                variant="outline"
+                size="icon-toolbar"
+                data-test="app-page-header-more-btn"
+                :aria-label="t('common.more')"
+              >
+                <OIcon name="more-vert" size="sm" />
+              </OButton>
+            </template>
+            <div class="flex max-w-56 flex-wrap gap-1 p-1.5">
+              <slot name="actions-overflow" />
+            </div>
+          </ODropdown>
+        </template>
       </div>
     </div>
 
@@ -149,10 +203,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <script setup lang="ts">
 import { raw, useI18nTyped, type I18nText } from "@/types/i18n";
-import { Comment, Text, computed, useSlots } from "vue";
+import {
+  Comment,
+  Text,
+  computed,
+  inject,
+  onActivated,
+  onBeforeUnmount,
+  onDeactivated,
+  onMounted,
+  useSlots,
+} from "vue";
 import { useRouter } from "vue-router";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OText from "@/lib/core/Typography/OText.vue";
+import OButton from "@/lib/core/Button/OButton.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import useBreakpoint from "@/composables/useBreakpoint";
+import { PAGE_LAYOUT_SIDEBAR_KEY } from "@/lib/core/PageLayout/pageLayoutSidebar";
 import type { IconName } from "@/lib/core/Icon/OIcon.icons";
 
 interface BackTarget {
@@ -184,17 +252,42 @@ const props = withDefaults(
      * owns its own overflow (an inline-edited page name does exactly this).
      */
     titleOverflow?: "truncate" | "visible";
+    /** Render #actions-overflow BEFORE #actions on desktop, so a trailing primary CTA stays last. */
+    overflowFirst?: boolean;
   }>(),
   {
     title: raw(""),
     subtitle: raw(""),
     titleOverflow: "truncate",
+    overflowFirst: false,
   },
 );
 
+// Fixed h-15 so h-full slot content (inline tabs, dividers) spans the row; < lg it may wrap.
+const ROW_CLASS =
+  "flex h-15 items-center justify-between gap-4 max-lg:h-auto max-lg:min-h-15 max-lg:flex-wrap max-lg:gap-y-1 max-lg:py-1.5";
+
 const router = useRouter();
 const slots = useSlots();
 const { t } = useI18nTyped();
+const { isMobile } = useBreakpoint();
+
+// The first header inside a sidebar layout carries its phone trigger, saving the layout a row.
+const layoutSidebar = inject(PAGE_LAYOUT_SIDEBAR_KEY, null);
+const sidebarClaim = Symbol("page-header");
+const claimSidebarTrigger = () => {
+  if (layoutSidebar && layoutSidebar.owner.value === null) layoutSidebar.owner.value = sidebarClaim;
+};
+const releaseSidebarTrigger = () => {
+  if (layoutSidebar?.owner.value === sidebarClaim) layoutSidebar.owner.value = null;
+};
+onMounted(claimSidebarTrigger);
+onActivated(claimSidebarTrigger);
+onBeforeUnmount(releaseSidebarTrigger);
+onDeactivated(releaseSidebarTrigger);
+const ownsSidebarTrigger = computed(
+  () => isMobile.value && layoutSidebar?.owner.value === sidebarClaim,
+);
 
 // A slot passed with an always-present <template> but a falsy inner v-if still
 // yields a comment placeholder node — so checking `$slots.x` is truthy even
@@ -213,6 +306,7 @@ const slotHasContent = (name: string): boolean => {
 const hasSubtitle = computed(() => Boolean(props.subtitle) || slotHasContent("subtitle"));
 const hasTabs = computed(() => slotHasContent("tabs"));
 const hasActions = computed(() => slotHasContent("actions"));
+const hasActionsOverflow = computed(() => slotHasContent("actions-overflow"));
 const hasBack = computed(() => Boolean(props.back) || slotHasContent("back"));
 const backLabel = computed(() =>
   props.back?.label ? t("common.backTo", { label: props.back.label }) : t("common.back"),
diff --git a/web/src/lib/core/PageLayout/OPageLayout.vue b/web/src/lib/core/PageLayout/OPageLayout.vue
index 1aed4bd4a6..fe91835839 100644
--- a/web/src/lib/core/PageLayout/OPageLayout.vue
+++ b/web/src/lib/core/PageLayout/OPageLayout.vue
@@ -24,6 +24,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   Header — from props (the normal case):
     :title :subtitle :icon :back :titleDataTest
     #actions      — right-aligned header actions (O2 buttons)
+    #actions-overflow — secondary actions; inline on desktop, behind "More" < md
     #header-tabs  — inline module tabs in the header row (Level-2 nav)
     #title        — custom title node (when a string title isn't enough)
     #header       — ESCAPE HATCH: a fully custom header the props can't express.
@@ -67,6 +68,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :title-data-test="titleDataTest"
           :tabs-below="tabsBelow"
           :title-overflow="titleOverflow"
+          :overflow-first="overflowFirst"
         >
           <template v-if="!!slots.title" #title><slot name="title" /></template>
           <template v-if="!!slots['title-prefix']" #title-prefix
@@ -77,6 +79,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           /></template>
           <template v-if="!!slots.subtitle" #subtitle><slot name="subtitle" /></template>
           <template v-if="!!slots.actions" #actions><slot name="actions" /></template>
+          <template v-if="!!slots['actions-overflow']" #actions-overflow
+            ><slot name="actions-overflow"
+          /></template>
           <template v-if="!!slots['header-tabs']" #tabs><slot name="header-tabs" /></template>
         </OPageHeader>
       </slot>
@@ -87,9 +92,49 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <slot name="subnav" />
     </div>
 
+    <!-- ── Body (mobile): sidebar collapses into an off-canvas drawer ── -->
+    <template v-if="!!slots.sidebar && isMobile">
+      <div
+        v-if="!sidebarTriggerOwner"
+        class="border-border-default px-page-edge flex shrink-0 items-center border-b py-1"
+        data-drawer-anchor="page-layout-sidebar"
+      >
+        <OButton
+          variant="ghost"
+          size="sm"
+          data-test="o-page-layout-mobile-sidebar-btn"
+          @click="mobileSidebarOpen = true"
+        >
+          <template #icon-left><OIcon name="menu" size="sm" /></template>
+          {{ t("common.sidePanel") }}
+        </OButton>
+      </div>
+      <OContent
+        :bleed="bleed"
+        :y="padY"
+        class="flex min-h-0 w-full flex-1 flex-col overflow-hidden"
+      >
+        <slot />
+      </OContent>
+      <ODrawer
+        v-model:open="mobileSidebarOpen"
+        side="left"
+        size="sm"
+        bleed
+        seamless
+        anchor='[data-drawer-anchor="page-layout-sidebar"]'
+        :anchor-edge="sidebarTriggerOwner ? 'bottom' : 'top'"
+        data-test="o-page-layout-mobile-sidebar-drawer"
+      >
+        <div class="flex h-full flex-col overflow-hidden">
+          <slot name="sidebar" />
+        </div>
+      </ODrawer>
+    </template>
+
     <!-- ── Body: resizable sidebar + main (OSplitter) ───────────── -->
     <OSplitter
-      v-if="!!slots.sidebar && resizable"
+      v-else-if="!!slots.sidebar && resizable"
       v-model="internalWidth"
       unit="px"
       :limits="splitterLimits"
@@ -151,12 +196,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script setup lang="ts">
-import type { I18nText } from "@/types/i18n";
-import { ref, computed, watch, useSlots } from "vue";
+import { useI18nTyped, type I18nText } from "@/types/i18n";
+import { ref, computed, watch, useSlots, provide } from "vue";
+import { useRouter } from "vue-router";
 import OSplitter from "@/lib/core/Splitter/OSplitter.vue";
 import ConstrainedPage from "@/components/common/ConstrainedPage.vue";
 import OPageHeader from "@/lib/core/PageHeader/OPageHeader.vue";
 import OContent from "@/lib/core/Content/OContent.vue";
+import OButton from "@/lib/core/Button/OButton.vue";
+import OIcon from "@/lib/core/Icon/OIcon.vue";
+import ODrawer from "@/lib/overlay/Drawer/ODrawer.vue";
+import useBreakpoint from "@/composables/useBreakpoint";
+import { PAGE_LAYOUT_SIDEBAR_KEY } from "./pageLayoutSidebar";
 import type { IconName } from "@/lib/core/Icon/OIcon.icons";
 
 interface BackTarget {
@@ -183,6 +234,8 @@ const props = withDefaults(
      * control (an inline-edited page name) so the <h1> stops clipping it.
      */
     titleOverflow?: "truncate" | "visible";
+    /** Forwarded to OPageHeader: desktop renders #actions-overflow before #actions. */
+    overflowFirst?: boolean;
     // Body
     bleed?: boolean;
     padY?: boolean;
@@ -201,6 +254,7 @@ const props = withDefaults(
   }>(),
   {
     tabsBelow: false,
+    overflowFirst: false,
     bleed: false,
     padY: false,
     scroll: false,
@@ -218,6 +272,24 @@ const emit = defineEmits<{
 }>();
 
 const slots = useSlots();
+const { t } = useI18nTyped();
+
+const { isMobile } = useBreakpoint();
+const mobileSidebarOpen = ref(false);
+// Picking a destination from the phone sidebar is the end of that interaction.
+const router = useRouter();
+watch(
+  () => router?.currentRoute?.value?.fullPath,
+  () => (mobileSidebarOpen.value = false),
+);
+// Only a sidebar host provides, so a nested sidebar-less layout doesn't shadow its parent's trigger.
+const sidebarTriggerOwner = ref<symbol | null>(null);
+if (slots.sidebar) {
+  provide(PAGE_LAYOUT_SIDEBAR_KEY, {
+    owner: sidebarTriggerOwner,
+    open: () => (mobileSidebarOpen.value = true),
+  });
+}
 
 const hasHeader = computed(
   () =>
diff --git a/web/src/lib/core/PageLayout/pageLayoutSidebar.ts b/web/src/lib/core/PageLayout/pageLayoutSidebar.ts
new file mode 100644
index 0000000000..b0c6ad8214
--- /dev/null
+++ b/web/src/lib/core/PageLayout/pageLayoutSidebar.ts
@@ -0,0 +1,25 @@
+// Copyright 2026 OpenObserve Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import type { InjectionKey, Ref } from "vue";
+
+/** Lets the first page header inside an OPageLayout host the phone sidebar trigger. */
+export interface PageLayoutSidebarContext {
+  owner: Ref<symbol | null>;
+  open: () => void;
+}
+
+export const PAGE_LAYOUT_SIDEBAR_KEY: InjectionKey<PageLayoutSidebarContext> =
+  Symbol("pageLayoutSidebar");
diff --git a/web/src/lib/core/RefreshButton/ORefreshButton.vue b/web/src/lib/core/RefreshButton/ORefreshButton.vue
index 518e6c20b1..9c9dcc6835 100644
--- a/web/src/lib/core/RefreshButton/ORefreshButton.vue
+++ b/web/src/lib/core/RefreshButton/ORefreshButton.vue
@@ -92,7 +92,7 @@ function handleClick(e: MouseEvent) {
     <!-- relative timestamp -->
     <span
       v-if="lastRunAt"
-      class="text-text-secondary text-xs whitespace-nowrap tabular-nums select-none"
+      class="text-text-secondary text-xs whitespace-nowrap tabular-nums select-none max-md:hidden"
     >
       {{ relativeTime || t("refreshButton.justNow") }}
       <OTooltip :content="exactTime" />
diff --git a/web/src/lib/core/Table/OTable.vue b/web/src/lib/core/Table/OTable.vue
index b7402d69b4..5413c8006e 100644
--- a/web/src/lib/core/Table/OTable.vue
+++ b/web/src/lib/core/Table/OTable.vue
@@ -27,6 +27,7 @@ import {
 } from "./OTable.types";
 
 import { useTableCore } from "./composables/useTableCore";
+import useBreakpoint from "@/composables/useBreakpoint";
 import { useTablePagination } from "./composables/useTablePagination";
 import { useTableSorting } from "./composables/useTableSorting";
 import { useTableSelection } from "./composables/useTableSelection";
@@ -94,6 +95,17 @@ const props = withDefaults(defineProps<OTableProps<TData>>(), {
 const emit = defineEmits<OTableEmits<TData>>();
 const slots = defineSlots<OTableSlots<TData>>();
 
+// < md columns scroll within the table rather than being crushed down to the name column.
+const { isMobile: isMobileViewport, lgUp } = useBreakpoint();
+const horizontalScrollOn = computed(() => !!props.horizontalScroll || isMobileViewport.value);
+
+const showColumnToggle = computed(
+  () =>
+    !!props.persistColumns &&
+    !!props.tableId &&
+    props.columns.some((c) => c.hideable && !c.isAction),
+);
+
 // A row only gets the pointer cursor when it's actually interactive — i.e. the
 // parent listens for @row-click / @row-dblclick, or row-click toggles expansion.
 // Otherwise rows are display-only and keep the default cursor.
@@ -809,16 +821,18 @@ provide("o2TableBoundedFill", hasBoundedFill);
 // is still absorbing the leftover the table fits, so a stray 1-2px scrollbar
 // from rounding must stay hidden.
 const allowHorizontalScroll = computed(() => {
-  if (props.horizontalScroll) return true;
+  if (horizontalScrollOn.value) return true;
   if (!hasFillColumn.value) return true;
+  if (containerWidth.value <= 0) return false;
   if (useComputedWidth.value) {
-    if (containerWidth.value <= 0) return false;
     // Frozen → scroll once the resized columns exceed the container.
     if (frozen.value) return realSum() > containerWidth.value + 1;
     // Fill → scroll once the columns can't fit even at their min widths
     // (table-fixed otherwise grows past 100% and the overflow is clipped).
     return fillMinSum() > containerWidth.value + 1;
   }
+  // < lg past the columns' min widths the table grows anyway, clipping trailing columns out of reach.
+  if (!lgUp.value) return fillMinSum() > containerWidth.value + 1;
   return false;
 });
 
@@ -995,6 +1009,13 @@ const computedTableWidth = computed<string | undefined>(() => {
   return `${Math.max(containerWidth.value || 0, realSum())}px`;
 });
 
+// < md the column sizes' sum is the table's floor, so the container scrolls instead of crushing them.
+const mobileMinTableWidth = computed<string | undefined>(() => {
+  if (!isMobileViewport.value || props.horizontalScroll || props.defaultColumns) return undefined;
+  const sum = table.getVisibleLeafColumns().reduce((a, c) => a + c.getSize(), 0);
+  return sum > 0 ? `${sum}px` : undefined;
+});
+
 // Virtual measureElement callback — wraps the virtualizer's measure.
 // Re-measuring is only needed when row heights actually VARY (expanded rows or
 // wrapped text). For fixed-height rows the virtualizer's size estimate is exact,
@@ -1142,27 +1163,29 @@ defineExpose({
       <div
         v-if="slots.toolbar || slots['toolbar-trailing']"
         :class="[
-          'px-page-edge flex items-center gap-2 py-2',
+          'px-page-edge flex items-center gap-2 py-2 max-md:flex-wrap max-md:gap-y-1.5',
           props.toolbarBordered ? 'border-table-row-divider border-b' : '',
         ]"
         data-test="o2-table-toolbar"
       >
         <slot name="toolbar" />
-        <OTableColumnToggle
-          v-if="
-            props.persistColumns &&
-            props.tableId &&
-            props.columns.some((c) => c.hideable && !c.isAction)
-          "
-          :columns="props.columns"
-          :column-visibility="internalColumnVisibility"
-          :has-resized-columns="props.enableColumnResize && hasResizedColumns"
-          class="shrink-0"
-          data-test="o2-table-column-toggle"
-          @update:column-visibility="handleColumnVisibilityChange"
-          @reset:column-sizes="handleResetColumnSizes"
-        />
-        <slot name="toolbar-trailing" />
+        <!-- Rendered only with content: an empty flex item still costs the toolbar a gap. -->
+        <div
+          v-if="showColumnToggle || slots['toolbar-trailing']"
+          class="flex shrink-0 items-center gap-2 max-md:ms-auto"
+        >
+          <OTableColumnToggle
+            v-if="showColumnToggle"
+            :columns="props.columns"
+            :column-visibility="internalColumnVisibility"
+            :has-resized-columns="props.enableColumnResize && hasResizedColumns"
+            class="shrink-0"
+            data-test="o2-table-column-toggle"
+            @update:column-visibility="handleColumnVisibilityChange"
+            @reset:column-sizes="handleResetColumnSizes"
+          />
+          <slot name="toolbar-trailing" />
+        </div>
       </div>
       <!-- ── Sub-header slot: custom full-width content between the toolbar and
          the table body (e.g. a summary-stat strip). ── -->
@@ -1287,6 +1310,7 @@ defineExpose({
             ...measuredColumnSizeVars,
             ...dynamicSizeVars,
             ...(computedTableWidth ? { width: computedTableWidth } : {}),
+            ...(mobileMinTableWidth ? { minWidth: mobileMinTableWidth } : {}),
             '--table-row-height':
               props.rowHeight != null
                 ? `${props.rowHeight}px`
diff --git a/web/src/lib/core/Table/cells/OCodeCell.vue b/web/src/lib/core/Table/cells/OCodeCell.vue
index ddd1b3a487..7706d9ca83 100644
--- a/web/src/lib/core/Table/cells/OCodeCell.vue
+++ b/web/src/lib/core/Table/cells/OCodeCell.vue
@@ -51,7 +51,7 @@ const { t } = useI18nTyped();
     <button
       v-if="copy"
       type="button"
-      class="text-text-body shrink-0 cursor-pointer leading-none opacity-0 transition-opacity group-hover/code:opacity-60 hover:opacity-100!"
+      class="text-text-body shrink-0 cursor-pointer leading-none opacity-0 transition-opacity group-hover/code:opacity-60 hover:opacity-100! max-md:opacity-60"
       :title="copied ? t('common.copiedExclaim') : t('common.copy')"
       @click="handleCopy"
     >
diff --git a/web/src/lib/core/Table/composables/useTableCore.ts b/web/src/lib/core/Table/composables/useTableCore.ts
index ca1110e4be..51b4837f95 100644
--- a/web/src/lib/core/Table/composables/useTableCore.ts
+++ b/web/src/lib/core/Table/composables/useTableCore.ts
@@ -14,6 +14,7 @@ import {
 } from "@tanstack/vue-table";
 import { computed, ref, watch, type Ref } from "vue";
 import { raw } from "@/types/i18n";
+import useBreakpoint from "@/composables/useBreakpoint";
 import { TABLE_INDEX_COL_SIZE, type OTableColumnDef } from "../OTable.types";
 
 // Register the custom "avg" fn (provided via table options below) so
@@ -66,8 +67,23 @@ export function useTableCore<TData>(
   // value is derived from the row's position so pages need not hand-roll a
   // `"#"` field in their data. Under server pagination we add the page offset
   // so numbering stays continuous across pages.
+  const MOBILE_MAX_COL_SIZE = 200;
+  const { isMobile } = useBreakpoint();
+  const responsiveColumns = computed<OTableColumnDef<TData>[]>(() => {
+    if (!isMobile.value) return props.columns;
+    return props.columns.map((c) => {
+      if (c.isAction || c.id === "actions") return c;
+      if ((c.size ?? 0) <= MOBILE_MAX_COL_SIZE && (c.minSize ?? 0) <= MOBILE_MAX_COL_SIZE) return c;
+      return {
+        ...c,
+        size: Math.min(c.size ?? MOBILE_MAX_COL_SIZE, MOBILE_MAX_COL_SIZE),
+        minSize: c.minSize != null ? Math.min(c.minSize, MOBILE_MAX_COL_SIZE) : c.minSize,
+      };
+    });
+  });
+
   const indexColumn = computed<OTableColumnDef<TData> | null>(() => {
-    if (!props.showIndex) return null;
+    if (!props.showIndex || isMobile.value) return null;
     if (props.columns.some((c) => c.id === "#")) return null;
     const isServer = props.pagination === "server";
     const offset = isServer
@@ -103,7 +119,9 @@ export function useTableCore<TData>(
   // keeps px-2; when false the actions column is last and gets the 1rem right
   // edge inset. `actionColumnWidth` reads this to budget the right padding.
   const hasTrailingSpacer = computed<boolean>(() => {
-    const base = indexColumn.value ? [indexColumn.value, ...props.columns] : props.columns;
+    const base = indexColumn.value
+      ? [indexColumn.value, ...responsiveColumns.value]
+      : responsiveColumns.value;
     const hasAutoWidth = base.some((c) => c.meta?.autoWidth);
     return (
       (props.enableColumnResize ?? false) &&
@@ -114,7 +132,9 @@ export function useTableCore<TData>(
   });
 
   const effectiveColumns = computed<OTableColumnDef<TData>[]>(() => {
-    const base = indexColumn.value ? [indexColumn.value, ...props.columns] : props.columns;
+    const base = indexColumn.value
+      ? [indexColumn.value, ...responsiveColumns.value]
+      : responsiveColumns.value;
     // An `autoWidth` column flexes permanently and absorbs leftover on its own,
     // so those tables need no spacer. Every other resizable table gets an
     // invisible trailing spacer: it sits before the pinned actions column and
@@ -153,14 +173,16 @@ export function useTableCore<TData>(
   // cell's right padding, in px. Keep in sync with the token (0.75rem = 12px).
   const PAGE_EDGE_PX = 12;
   const actionColumnWidth = (actionCount?: number): number => {
-    const n = Math.max(1, Number(actionCount) || 2);
+    // < md row actions collapse behind one overflow kebab, so the column budgets a single button.
+    const n = isMobile.value ? 1 : Math.max(1, Number(actionCount) || 2);
     // Cell padding: px-2 is 8+8=16. When the actions column is the row's last
     // cell (no trailing spacer) the edge inset replaces its right padding with
     // the page-edge inset, so budget 8 + PAGE_EDGE_PX — exact, so the buttons
     // land on the same right-edge grid line as everything else (no over-width).
     const cellPad = hasTrailingSpacer.value ? 16 : 8 + PAGE_EDGE_PX;
     const content = n * ACTION_ICON_BTN + (n - 1) * ACTION_BTN_GAP + cellPad;
-    return Math.max(content, ACTIONS_HEADER_MIN);
+    // < md the "Actions" header floor would leave the one-kebab column mostly dead width.
+    return Math.max(content, isMobile.value ? 0 : ACTIONS_HEADER_MIN);
   };
 
   // Track column order for drag-reorder
@@ -170,7 +192,10 @@ export function useTableCore<TData>(
   const userReorderedColumns = ref(false);
 
   // Track column sizing — seeded with persisted values when provided
-  const columnSizing = ref<Record<string, number>>(props.initialColumnSizes ?? {});
+  // Persisted sizes were dragged on desktop; honouring them < md would undo the mobile column cap.
+  const columnSizing = ref<Record<string, number>>(
+    isMobile.value ? {} : (props.initialColumnSizes ?? {}),
+  );
   const columnResizeMode = "onChange";
 
   // Track sorting state for client-side
@@ -233,11 +258,13 @@ export function useTableCore<TData>(
       // the loading skeleton and the loaded table render it at the exact same
       // width — no flash when data arrives.
       const size = isActionCol
-        ? Math.max(col.size ?? 0, actionColumnWidth((col.meta as any)?.actionCount))
+        ? isMobile.value
+          ? actionColumnWidth((col.meta as any)?.actionCount)
+          : Math.max(col.size ?? 0, actionColumnWidth((col.meta as any)?.actionCount))
         : (col.size ?? 150);
       const columnDef: ColumnDef<TData> = {
         id: col.id,
-        header: col.header as any,
+        header: isActionCol && isMobile.value ? "" : (col.header as any),
         accessorKey: col.accessorKey ?? col.id,
         accessorFn: col.accessorFn as any,
         cell: col.cell
diff --git a/web/src/lib/core/Table/sub-components/OTableBodyCell.vue b/web/src/lib/core/Table/sub-components/OTableBodyCell.vue
index 58e664a26d..6fa8a0cdfb 100644
--- a/web/src/lib/core/Table/sub-components/OTableBodyCell.vue
+++ b/web/src/lib/core/Table/sub-components/OTableBodyCell.vue
@@ -548,7 +548,7 @@ onBeforeUnmount(() => window.removeEventListener("scroll", onScrollDismiss, true
           size="icon-xs-sq"
           :data-test="`o2-table-cell-copy-${cell.column.id}`"
           :data-copied="copied ? 'true' : undefined"
-          class="h-4! min-h-0! w-4! shrink-0 opacity-0 transition-opacity group-hover/cell:opacity-100"
+          class="h-4! min-h-0! w-4! shrink-0 opacity-0 transition-opacity group-hover/cell:opacity-100 max-md:opacity-100"
           :class="align === 'right' ? 'order-first me-1' : 'ms-1'"
           :title="copied ? t('common.copiedExclaim') : t('common.copy')"
           @click="handleCopy"
diff --git a/web/src/lib/core/Table/sub-components/OTableHeader.vue b/web/src/lib/core/Table/sub-components/OTableHeader.vue
index ca60a97b81..b248f3e33f 100644
--- a/web/src/lib/core/Table/sub-components/OTableHeader.vue
+++ b/web/src/lib/core/Table/sub-components/OTableHeader.vue
@@ -684,7 +684,7 @@ function getStandardStickyTotalStyle(header: any): Record<string, any> {
             v-if="(header.column.columnDef.meta as any)?.closable"
             type="button"
             :data-test="`o2-table-th-remove-${header.id}-btn`"
-            class="rounded-default text-text-secondary hover:text-text-body hover:bg-table-row-hover-bg inline-flex shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent p-0.5 opacity-0 transition-opacity group-hover:opacity-100"
+            class="rounded-default text-text-secondary hover:text-text-body hover:bg-table-row-hover-bg inline-flex shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent p-0.5 opacity-0 transition-opacity group-hover:opacity-100 max-md:opacity-100"
             :aria-label="t('components.table.removeColumnAria')"
             @click.stop="emit('close-column', header.column.columnDef)"
           >
@@ -997,7 +997,7 @@ function getStandardStickyTotalStyle(header: any): Record<string, any> {
             v-if="(header.column.columnDef.meta as any)?.closable"
             type="button"
             :data-test="`o2-table-th-remove-${header.id}-btn`"
-            class="rounded-default text-text-secondary hover:text-text-body hover:bg-table-row-hover-bg inline-flex shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent p-0.5 opacity-0 transition-opacity group-hover:opacity-100"
+            class="rounded-default text-text-secondary hover:text-text-body hover:bg-table-row-hover-bg inline-flex shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent p-0.5 opacity-0 transition-opacity group-hover:opacity-100 max-md:opacity-100"
             :aria-label="t('components.table.removeColumnAria')"
             @click.stop="emit('close-column', header.column.columnDef)"
           >
diff --git a/web/src/lib/core/Table/sub-components/OTablePagination.vue b/web/src/lib/core/Table/sub-components/OTablePagination.vue
index 51ba0734b7..e74bd4b2b3 100644
--- a/web/src/lib/core/Table/sub-components/OTablePagination.vue
+++ b/web/src/lib/core/Table/sub-components/OTablePagination.vue
@@ -70,8 +70,10 @@ const pageSizeSelectOptions = computed(() => {
          The footer-title typography lives on this wrapper so BOTH the default
          row count and any custom #bottom (actions) slot content inherit it —
          font-size / weight / line-height are inherited properties. -->
+    <!-- < md hidden unless it hosts bulk actions: the pager's "Showing x - y of z" already has the count. -->
     <div
       class="flex items-center gap-2 text-xs font-normal"
+      :class="slots.actions ? '' : 'max-md:hidden'"
       data-test="o2-table-pagination-actions"
     >
       <!-- Loading: always skeleton, regardless of slot/count -->
@@ -88,7 +90,7 @@ const pageSizeSelectOptions = computed(() => {
     </div>
 
     <!-- Right: controls -->
-    <div class="flex items-center gap-3">
+    <div class="flex items-center gap-3 max-md:flex-1 max-md:justify-between max-md:gap-2">
       <span
         v-if="loading"
         class="o2-pag-skel rounded-default inline-block h-3 w-36 [animation:o2-skel-shimmer_1.5s_ease-in-out_infinite] [background-size:200%_100%] [background:linear-gradient(90deg,var(--color-skeleton-base)_0%,var(--color-skeleton-highlight)_50%,var(--color-skeleton-base)_100%)]"
@@ -103,9 +105,12 @@ const pageSizeSelectOptions = computed(() => {
         {{ t("search.showing") }} {{ showingFrom }} - {{ showingTo }} {{ t("search.of") }}
         {{ totalCount.toLocaleString() }}{{ totalCountExact ? "" : "+" }}
       </span>
-      <div class="bg-border-default h-4 w-px shrink-0" v-if="pageSizeOptions.length > 0" />
+      <div
+        class="bg-border-default h-4 w-px shrink-0 max-md:hidden"
+        v-if="pageSizeOptions.length > 0"
+      />
       <div v-if="pageSizeOptions.length > 0" class="text-primary flex items-center gap-1.5 text-xs">
-        <span class="whitespace-nowrap">{{ t("search.recordsPerPage") }}</span>
+        <span class="whitespace-nowrap max-md:hidden">{{ t("search.recordsPerPage") }}</span>
         <OSelect
           v-model="pageSizeModel"
           :options="pageSizeSelectOptions"
diff --git a/web/src/lib/core/ToggleGroup/OToggleGroup.types.ts b/web/src/lib/core/ToggleGroup/OToggleGroup.types.ts
index 38bcdebf6e..72d2d03064 100644
--- a/web/src/lib/core/ToggleGroup/OToggleGroup.types.ts
+++ b/web/src/lib/core/ToggleGroup/OToggleGroup.types.ts
@@ -46,8 +46,20 @@ export interface ToggleGroupProps {
    * responsible for applying it. Default: false
    */
   reorderable?: boolean;
+  /** Below md, render as a dropdown showing the active item (single-select only). */
+  mobileDropdown?: boolean;
 }
 
+/** Tells an OToggleGroupItem it is being rendered as the dropdown trigger or as a menu row. */
+export interface ToggleGroupMenuContext {
+  mode: "trigger" | "menu";
+  isActive: (value: AcceptableValue | boolean) => boolean;
+  select: (value: AcceptableValue | boolean) => void;
+}
+
+export const ToggleGroupMenuKey: InjectionKey<ToggleGroupMenuContext> =
+  Symbol("o-toggle-group-menu");
+
 /**
  * Provided by OToggleGroup, injected by each OToggleGroupItem so the item knows to
  * defer its active fill to the group's sliding indicator. True for single-select
diff --git a/web/src/lib/core/ToggleGroup/OToggleGroup.vue b/web/src/lib/core/ToggleGroup/OToggleGroup.vue
index 386c5ab557..7c2867ef2a 100644
--- a/web/src/lib/core/ToggleGroup/OToggleGroup.vue
+++ b/web/src/lib/core/ToggleGroup/OToggleGroup.vue
@@ -7,7 +7,11 @@ import type {
 } from "./OToggleGroup.types";
 import { ToggleGroupAnimatedKey, TOGGLE_GROUP_CONTEXT_KEY } from "./OToggleGroup.types";
 import { ToggleGroupRoot, type AcceptableValue } from "reka-ui";
-import { computed, provide, ref, watch, nextTick, onMounted, onBeforeUnmount } from "vue";
+import { computed, provide, ref, watch, nextTick, onMounted, onBeforeUnmount, useAttrs } from "vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import OButton from "@/lib/core/Button/OButton.vue";
+import OToggleGroupMenuScope from "./OToggleGroupMenuScope.vue";
+import useBreakpoint from "@/composables/useBreakpoint";
 
 const props = withDefaults(defineProps<ToggleGroupProps>(), {
   type: "single",
@@ -16,6 +20,7 @@ const props = withDefaults(defineProps<ToggleGroupProps>(), {
   variant: "default",
   labelPosition: "left",
   reorderable: false,
+  mobileDropdown: false,
 });
 
 const emit = defineEmits<ToggleGroupEmits>();
@@ -28,6 +33,21 @@ const rekaModelValue = computed(() => props.modelValue as AcceptableValue | Acce
 
 const hasLabel = computed(() => Boolean(slots.label) || props.label !== undefined);
 
+const { isMobile } = useBreakpoint();
+const attrs = useAttrs();
+const asDropdown = computed(
+  () =>
+    props.mobileDropdown &&
+    isMobile.value &&
+    props.type === "single" &&
+    props.orientation !== "vertical",
+);
+const dropdownTestId = computed(() =>
+  attrs["data-test"] ? `${attrs["data-test"]}-dropdown-btn` : "o-toggle-group-dropdown-btn",
+);
+const isActiveValue = (value: AcceptableValue | boolean) => props.modelValue === value;
+const selectValue = (value: AcceptableValue | boolean) => emit("update:modelValue", value);
+
 // Sliding-selection indicator ------------------------------------------------
 // On by default for every single-select group (one active item to track). A
 // multiple-select group has no single active item, so it keeps per-item fills.
@@ -122,9 +142,17 @@ watch(
   },
 );
 
-onMounted(async () => {
-  if (!animate.value) return;
+const detachIndicator = () => {
+  resizeObserver?.disconnect();
+  resizeObserver = null;
+  mutationObserver?.disconnect();
+  mutationObserver = null;
+};
+
+const attachIndicator = async () => {
+  if (!animate.value || asDropdown.value) return;
   await nextTick();
+  detachIndicator();
   measure(false);
   // … but only snap when item sizes/visibility change (responsive icon-only mode,
   // items shown/hidden, the group being revealed) — these are not user selections.
@@ -144,13 +172,13 @@ onMounted(async () => {
     mutationObserver = new MutationObserver(measureSettled);
     mutationObserver.observe(track, { childList: true });
   }
-});
+};
+
+onMounted(attachIndicator);
+watch(asDropdown, (dropdown) => (dropdown ? detachIndicator() : attachIndicator()));
 
 onBeforeUnmount(() => {
-  resizeObserver?.disconnect();
-  resizeObserver = null;
-  mutationObserver?.disconnect();
-  mutationObserver = null;
+  detachIndicator();
   cancelAnimationFrame(settleRaf);
 });
 
@@ -273,7 +301,27 @@ provide(TOGGLE_GROUP_CONTEXT_KEY, context);
   <!-- With label: wrap in a flex container so the label and toggle bar sit
        together. Without label: render the ToggleGroupRoot directly to keep
        the existing inline-flex/sizing contract. -->
-  <div v-if="hasLabel" :class="wrapperClasses">
+  <ODropdown v-if="asDropdown" side="bottom" align="start">
+    <template #trigger>
+      <OButton
+        variant="outline"
+        size="sm-toolbar"
+        icon-right="arrow-drop-down"
+        class="shrink-0"
+        :disabled="disabled"
+        :data-test="dropdownTestId"
+      >
+        <OToggleGroupMenuScope mode="trigger" :is-active="isActiveValue" :select="selectValue">
+          <slot />
+        </OToggleGroupMenuScope>
+      </OButton>
+    </template>
+    <OToggleGroupMenuScope mode="menu" :is-active="isActiveValue" :select="selectValue">
+      <slot />
+    </OToggleGroupMenuScope>
+  </ODropdown>
+
+  <div v-else-if="hasLabel" :class="wrapperClasses">
     <span
       :class="[
         'o-input-label text-compact leading-tight select-none',
@@ -328,6 +376,8 @@ provide(TOGGLE_GROUP_CONTEXT_KEY, context);
       orientation === 'vertical' ? 'flex-col' : 'flex-row',
       'bg-toggle-track-bg rounded-default p-0.5',
       'border-toggle-border border',
+      // Wrapped toggle chips read as two unrelated controls, so the strip scrolls within its track.
+      orientation !== 'vertical' && 'max-md:max-w-full max-md:overflow-x-auto',
     ]"
     v-bind="dragListeners"
     @update:model-value="
diff --git a/web/src/lib/core/ToggleGroup/OToggleGroupItem.vue b/web/src/lib/core/ToggleGroup/OToggleGroupItem.vue
index f6df4df0ad..5a4d948d1a 100644
--- a/web/src/lib/core/ToggleGroup/OToggleGroupItem.vue
+++ b/web/src/lib/core/ToggleGroup/OToggleGroupItem.vue
@@ -4,11 +4,16 @@ import type {
   ToggleGroupItemSlots,
   ToggleGroupContext,
 } from "./OToggleGroup.types";
-import { ToggleGroupAnimatedKey, TOGGLE_GROUP_CONTEXT_KEY } from "./OToggleGroup.types";
+import {
+  ToggleGroupAnimatedKey,
+  ToggleGroupMenuKey,
+  TOGGLE_GROUP_CONTEXT_KEY,
+} from "./OToggleGroup.types";
 import { ToggleGroupItem } from "reka-ui";
-import { computed, inject, type ComputedRef } from "vue";
+import { computed, inject, useAttrs, type ComputedRef } from "vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 
 defineOptions({ inheritAttrs: false });
 
@@ -23,6 +28,13 @@ const props = withDefaults(defineProps<ToggleGroupItemProps>(), {
 
 const slots = defineSlots<ToggleGroupItemSlots>();
 
+// Set when the parent group has collapsed into a dropdown (phones): render as its trigger label or a menu row.
+const menu = inject(ToggleGroupMenuKey, null);
+const attrs = useAttrs();
+const menuItemTestId = computed(() =>
+  attrs["data-test"] ? `${attrs["data-test"]}-item` : `o-toggle-group-item-${String(props.value)}`,
+);
+
 // An item may be used standalone (no OToggleGroup parent), so the context is
 // optional and every read below is guarded.
 const context = inject<ComputedRef<ToggleGroupContext> | undefined>(TOGGLE_GROUP_CONTEXT_KEY);
@@ -58,9 +70,9 @@ const dropIndicatorClass = computed<string>(() => {
 });
 
 const sizeClasses: Record<NonNullable<ToggleGroupItemProps["size"]>, string> = {
-  md: "h-9 px-3 text-sm",
-  sm: "h-7 px-2.5 text-xs",
-  xs: "h-5 px-1.5 text-xs",
+  md: "h-9 px-3 text-sm max-md:px-2",
+  sm: "h-7 px-2.5 text-xs max-md:px-1.5",
+  xs: "h-5 px-1.5 text-xs max-md:px-1",
 };
 
 // Icon size mirrors the toggle size
@@ -72,12 +84,34 @@ const iconSize: Record<NonNullable<ToggleGroupItemProps["size"]>, "xs" | "sm" |
 </script>
 
 <template>
+  <template v-if="menu?.mode === 'trigger'">
+    <template v-if="menu.isActive(props.value)">
+      <slot v-if="slots['icon-left']" name="icon-left" />
+      <OIcon v-else-if="props.iconLeft" :name="props.iconLeft" size="sm" />
+      <slot />
+    </template>
+  </template>
+  <ODropdownItem
+    v-else-if="menu"
+    :disabled="props.disabled"
+    :data-test="menuItemTestId"
+    @select="menu.select(props.value)"
+  >
+    <template v-if="slots['icon-left'] || props.iconLeft" #icon-left>
+      <slot v-if="slots['icon-left']" name="icon-left" />
+      <OIcon v-else-if="props.iconLeft" :name="props.iconLeft" size="sm" />
+    </template>
+    <slot />
+    <template #icon-right>
+      <OIcon v-if="menu.isActive(props.value)" name="check" size="sm" class="ms-auto" />
+    </template>
+  </ODropdownItem>
   <!--
     Disabled buttons suppress hover events when pointer-events-none is set.
     The span wrapper intercepts hover so cursor-not-allowed and the tooltip
     remain visible even when the inner item is disabled.
   -->
-  <span :class="props.disabled ? 'cursor-not-allowed' : 'contents'">
+  <span v-else :class="props.disabled ? 'cursor-not-allowed' : 'contents'">
     <ToggleGroupItem
       v-bind="$attrs"
       :value="props.value"
diff --git a/web/src/lib/core/ToggleGroup/OToggleGroupMenuScope.vue b/web/src/lib/core/ToggleGroup/OToggleGroupMenuScope.vue
new file mode 100644
index 0000000000..aae9052e5d
--- /dev/null
+++ b/web/src/lib/core/ToggleGroup/OToggleGroupMenuScope.vue
@@ -0,0 +1,38 @@
+<!-- Copyright 2026 OpenObserve Inc.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<script setup lang="ts">
+import { provide } from "vue";
+import type { AcceptableValue } from "reka-ui";
+import { ToggleGroupMenuKey } from "./OToggleGroup.types";
+
+const props = defineProps<{
+  mode: "trigger" | "menu";
+  isActive: (value: AcceptableValue | boolean) => boolean;
+  select: (value: AcceptableValue | boolean) => void;
+}>();
+
+// Items read this through inject, so the same group slot renders as a trigger label or as menu rows.
+provide(ToggleGroupMenuKey, {
+  mode: props.mode,
+  isActive: (value) => props.isActive(value),
+  select: (value) => props.select(value),
+});
+</script>
+
+<template>
+  <slot />
+</template>
diff --git a/web/src/lib/data/StatStrip/OStatCard.vue b/web/src/lib/data/StatStrip/OStatCard.vue
index 8c215b7783..56b76fa15b 100644
--- a/web/src/lib/data/StatStrip/OStatCard.vue
+++ b/web/src/lib/data/StatStrip/OStatCard.vue
@@ -22,6 +22,9 @@ import { computed, useSlots } from "vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import type { IconName } from "@/lib/core/Icon/OIcon.icons";
 import type { StatTone, StatTrend } from "./OStatStrip.types";
+import useBreakpoint from "@/composables/useBreakpoint";
+
+const { lgUp } = useBreakpoint();
 
 const props = withDefaults(
   defineProps<{
@@ -142,12 +145,13 @@ const trendClass = computed(() =>
     :is="clickable ? 'button' : 'div'"
     :type="clickable ? 'button' : undefined"
     :aria-pressed="clickable ? String(selected) : undefined"
-    class="rounded-default bg-surface-base flex min-w-0 flex-col justify-center gap-1 overflow-hidden border px-2.5 py-1 text-left transition-colors"
+    class="rounded-default bg-surface-base flex min-w-0 flex-col justify-center gap-1 overflow-hidden border px-2.5 py-1 text-left transition-colors max-lg:px-1.5"
     :class="[
       selected ? 'border-accent' : 'border-border-default',
       clickable ? 'cursor-pointer' : '',
       clickable && !selected ? 'hover:border-accent' : '',
     ]"
+    :title="label && !lgUp ? String(label) : undefined"
     :data-test="dataTest"
   >
     <div class="flex min-w-0 items-center justify-between gap-2">
@@ -157,26 +161,28 @@ const trendClass = computed(() =>
              the squeeze is absorbed by the label below, which stays readable
              truncated because the tone icon already identifies the metric. -->
         <span
-          class="shrink-0 text-2xl leading-none font-semibold whitespace-nowrap"
+          class="shrink-0 text-2xl leading-none font-semibold whitespace-nowrap max-lg:text-lg"
           :class="isMuted ? 'text-text-muted' : tc.value"
         >
           <slot name="value">{{ displayValue }}</slot>
         </span>
-        <span v-if="label" class="text-text-secondary truncate text-xs font-medium">{{
+        <span v-if="label" class="text-text-secondary truncate text-xs font-medium max-lg:hidden">{{
           label
         }}</span>
-        <span v-if="trend" class="text-2xs shrink-0 font-semibold" :class="trendClass"
+        <span v-if="trend" class="text-2xs shrink-0 font-semibold max-lg:hidden" :class="trendClass"
           >{{ trendArrow }} {{ trend.label }}</span
         >
         <!-- A QUALIFIER on the value, not a second metric: it says what the
              number IS (which measurement, whose count), so a tile under a
              generic heading cannot be read as the wrong quantity. Truncates
              before the value does — the value never shrinks. -->
-        <span v-if="sub" class="text-text-label text-2xs min-w-0 truncate">{{ sub }}</span>
+        <span v-if="sub" class="text-text-label text-2xs min-w-0 truncate max-lg:hidden">{{
+          sub
+        }}</span>
       </div>
       <span
         v-if="icon || slots.icon"
-        class="rounded-default grid h-7 w-7 shrink-0 place-items-center"
+        class="rounded-default grid h-7 w-7 shrink-0 place-items-center max-lg:h-6 max-lg:w-6"
         :class="tc.chip"
       >
         <slot name="icon">
diff --git a/web/src/lib/data/StatStrip/OStatStrip.vue b/web/src/lib/data/StatStrip/OStatStrip.vue
index 585ef51b9e..bfde13b87d 100644
--- a/web/src/lib/data/StatStrip/OStatStrip.vue
+++ b/web/src/lib/data/StatStrip/OStatStrip.vue
@@ -68,14 +68,14 @@ const onCardClick = (item: StatItem) => {
 </script>
 
 <template>
-  <div class="flex flex-wrap gap-2" data-test="o-stat-strip">
+  <div class="flex flex-wrap gap-2 max-lg:gap-1.5" data-test="o-stat-strip">
     <!-- The basis is the wrap threshold, not a fixed width: tiles still grow to
          fill a wide strip. The default suits long labels; `compact` is for short
          ones, where basis-52 would wrap a five-tile strip onto two rows. -->
     <OStatCard
       v-for="item in items"
       :key="item.key"
-      class="grow"
+      class="grow max-lg:shrink-0 max-lg:basis-auto"
       :class="compact ? 'basis-36' : 'basis-52'"
       :label="item.label"
       :value="item.value"
diff --git a/web/src/lib/forms/Color/OColor.vue b/web/src/lib/forms/Color/OColor.vue
index ac4c8de0b7..c3a9281009 100644
--- a/web/src/lib/forms/Color/OColor.vue
+++ b/web/src/lib/forms/Color/OColor.vue
@@ -174,7 +174,7 @@ const wrapperClasses = computed(() => [
           <PopoverContent
             :side-offset="6"
             align="start"
-            class="rounded-default bg-colorpicker-popup-bg border-colorpicker-popup-border z-10001 flex w-55 flex-col gap-3 border p-3 shadow-md"
+            class="rounded-default bg-colorpicker-popup-bg border-colorpicker-popup-border z-10001 flex w-55 flex-col gap-3 border p-3 shadow-md max-lg:max-h-[var(--reka-popper-available-height,75vh)] max-lg:overflow-y-auto"
           >
             <!-- Saturation / Brightness area -->
             <!-- ColorAreaRoot passes gradient styles via scoped slot -->
diff --git a/web/src/lib/forms/Combobox/OCombobox.vue b/web/src/lib/forms/Combobox/OCombobox.vue
index 7196ff4be2..81f8b2f1ea 100644
--- a/web/src/lib/forms/Combobox/OCombobox.vue
+++ b/web/src/lib/forms/Combobox/OCombobox.vue
@@ -255,6 +255,7 @@ const hasInsideLabel = computed(
           :class="[
             'z-10001 w-(--reka-combobox-trigger-width) max-w-(--reka-combobox-trigger-width) min-w-(--reka-combobox-trigger-width)',
             'max-h-60 overflow-hidden',
+            'max-lg:max-h-[var(--reka-popper-available-height,15rem)]',
             'rounded-default border shadow-lg',
             'bg-select-content-bg border-select-content-border',
             'p-1',
@@ -267,7 +268,9 @@ const hasInsideLabel = computed(
             'data-[side=top]:data-[state=closed]:animate-[o2-reveal-up-out_100ms_cubic-bezier(0.4,0,1,1)]',
           ]"
         >
-          <ComboboxViewport class="max-h-56 overflow-y-auto">
+          <ComboboxViewport
+            class="max-h-56 overflow-y-auto max-lg:max-h-[calc(var(--reka-popper-available-height,14rem)-0.5rem)]"
+          >
             <ComboboxEmpty class="text-select-placeholder px-3 py-2 text-center text-sm">
               {{ t("components.combobox.noOptionsFound") }}
             </ComboboxEmpty>
diff --git a/web/src/lib/forms/DateTimeRange/ODateTimeRange.vue b/web/src/lib/forms/DateTimeRange/ODateTimeRange.vue
index 6df6797392..5cf86ca9f3 100644
--- a/web/src/lib/forms/DateTimeRange/ODateTimeRange.vue
+++ b/web/src/lib/forms/DateTimeRange/ODateTimeRange.vue
@@ -372,7 +372,7 @@ const triggerClasses = computed(() => [
       <PopoverContent
         :side-offset="4"
         align="start"
-        class="rounded-default bg-datepicker-popup-bg border-datepicker-popup-border z-50 w-80 border shadow-lg outline-none"
+        class="rounded-default bg-datepicker-popup-bg border-datepicker-popup-border z-50 w-80 border shadow-lg outline-none max-lg:max-h-[var(--reka-popper-available-height,75vh)] max-lg:overflow-y-auto"
         data-test="datetimerange-popup"
       >
         <!-- Tab bar -->
@@ -553,7 +553,7 @@ const triggerClasses = computed(() => [
         <!-- ── ABSOLUTE TAB ──────────────────────────────────── -->
         <div
           v-if="activeTab === 'absolute'"
-          class="flex max-h-[70vh] flex-col gap-3 overflow-y-auto p-3"
+          class="flex max-h-[70vh] flex-col gap-3 overflow-y-auto p-3 max-lg:max-h-none max-lg:overflow-visible"
           data-test="datetimerange-absolute-panel"
         >
           <!-- Range calendar -->
diff --git a/web/src/lib/forms/Select/OSelect.vue b/web/src/lib/forms/Select/OSelect.vue
index af0cbac4a3..c5b29c0aba 100644
--- a/web/src/lib/forms/Select/OSelect.vue
+++ b/web/src/lib/forms/Select/OSelect.vue
@@ -48,6 +48,7 @@ import {
   watch,
   watchEffect,
 } from "vue";
+import useBreakpoint from "@/composables/useBreakpoint";
 import {
   O_DROPDOWN_NESTED_KEY,
   setActiveOverlay,
@@ -90,6 +91,8 @@ const DEFAULT_OPTION_LABEL = "label";
 const DEFAULT_OPTION_VALUE = "value";
 const DEFAULT_OPTION_DISABLED = "disabled";
 
+const { lgUp } = useBreakpoint();
+
 const props = withDefaults(defineProps<SelectProps>(), {
   size: "md",
   appearance: "field",
@@ -1828,10 +1831,12 @@ const fieldWidthClass = computed(() => {
           position="popper"
           :side-offset="4"
           :hide-when-detached="true"
+          :collision-padding="lgUp ? 0 : 8"
           :data-test="parentDataTest ? `${parentDataTest}-popover` : undefined"
           :class="[
-            'z-10001 min-w-(--reka-select-trigger-width)',
+            'z-10001 min-w-(--reka-select-trigger-width) max-lg:max-w-[calc(100vw-1rem)]',
             'overflow-hidden',
+            'max-lg:max-h-[var(--reka-popper-available-height,75vh)] max-lg:overflow-y-auto',
             'rounded-default border shadow-md',
             'bg-select-content-bg border-select-content-border',
             // Clip-path reveal: unveiled at full size from its trigger edge (no
diff --git a/web/src/lib/forms/Time/OTime.vue b/web/src/lib/forms/Time/OTime.vue
index ffeff9a2bc..9b3bde697e 100644
--- a/web/src/lib/forms/Time/OTime.vue
+++ b/web/src/lib/forms/Time/OTime.vue
@@ -396,6 +396,7 @@ const fieldClasses = computed(() => [
         align="start"
         :class="[
           'rounded-default bg-datepicker-popup-bg border-datepicker-popup-border z-60 overflow-hidden border shadow-md outline-none',
+          'max-lg:max-h-[var(--reka-popper-available-height,75vh)] max-lg:overflow-y-auto',
           withSeconds ? 'w-64' : 'w-56',
         ]"
         data-test="otime-popup"
diff --git a/web/src/lib/lists/FieldList/OFieldList.vue b/web/src/lib/lists/FieldList/OFieldList.vue
index 41ef231c02..f2330841db 100644
--- a/web/src/lib/lists/FieldList/OFieldList.vue
+++ b/web/src/lib/lists/FieldList/OFieldList.vue
@@ -101,7 +101,7 @@
             </div>
             <div
               v-if="$slots['field-actions']"
-              class="o-field-list__actions border-field-list-actions-border rounded-default bg-field-list-actions-bg invisible absolute top-1/2 right-1 flex shrink-0 -translate-y-1/2 items-stretch overflow-hidden border opacity-0 transition-[opacity,visibility] duration-[120ms] ease-[ease] group-hover:visible group-hover:opacity-100"
+              class="o-field-list__actions border-field-list-actions-border rounded-default bg-field-list-actions-bg invisible absolute top-1/2 right-1 flex shrink-0 -translate-y-1/2 items-stretch overflow-hidden border opacity-0 transition-[opacity,visibility] duration-[120ms] ease-[ease] group-hover:visible group-hover:opacity-100 max-md:visible max-md:opacity-100"
             >
               <slot name="field-actions" :row="row" :index="row._index" />
             </div>
diff --git a/web/src/lib/lists/FieldList/OFieldRow.vue b/web/src/lib/lists/FieldList/OFieldRow.vue
index 3e28afb452..a32506675b 100644
--- a/web/src/lib/lists/FieldList/OFieldRow.vue
+++ b/web/src/lib/lists/FieldList/OFieldRow.vue
@@ -22,7 +22,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <slot />
     <div
       v-if="$slots.actions"
-      class="o-field-row__actions bg-field-list-actions-bg rounded-default absolute top-0 right-0 bottom-0 hidden items-center gap-1.5 overflow-hidden px-1 py-0 group-hover:flex"
+      class="o-field-row__actions bg-field-list-actions-bg rounded-default absolute top-0 right-0 bottom-0 hidden items-center gap-1.5 overflow-hidden px-1 py-0 group-hover:flex max-md:flex"
     >
       <slot name="actions" />
     </div>
diff --git a/web/src/lib/navigation/Tabs/OTab.vue b/web/src/lib/navigation/Tabs/OTab.vue
index 321bd9999f..e7ebee61a9 100644
--- a/web/src/lib/navigation/Tabs/OTab.vue
+++ b/web/src/lib/navigation/Tabs/OTab.vue
@@ -220,7 +220,12 @@ const heightClasses = computed<string>(() => {
             >{{ icon }}</span
           >
         </slot>
-        <span v-if="label" class="o-tab__label truncate">{{ label }}</span>
+        <span
+          v-if="label"
+          class="o-tab__label truncate"
+          :class="context?.collapseLabels && !isActive ? 'max-md:hidden' : ''"
+          >{{ label }}</span
+        >
       </template>
       <slot v-else />
     </TabsTrigger>
diff --git a/web/src/lib/navigation/Tabs/OTabs.types.ts b/web/src/lib/navigation/Tabs/OTabs.types.ts
index aaf66005ac..3ca6427421 100644
--- a/web/src/lib/navigation/Tabs/OTabs.types.ts
+++ b/web/src/lib/navigation/Tabs/OTabs.types.ts
@@ -26,6 +26,8 @@ export interface OTabsProps {
    * responsible for applying it. Default: false
    */
   reorderable?: boolean;
+  /** Below md, inactive tabs show only their icon while the active tab keeps its label. Default: false */
+  collapseLabels?: boolean;
 }
 
 export interface OTabsEmits {
@@ -64,6 +66,8 @@ export interface TabsContext {
   dropTargetName: string | number | null;
   /** Drop side for the current drop target: true = before, false = after */
   dropBefore: boolean;
+  /** Whether inactive tabs hide their label below md (see OTabsProps) */
+  collapseLabels: boolean;
 }
 
 /** Symbol key used for provide / inject */
diff --git a/web/src/lib/navigation/Tabs/OTabs.vue b/web/src/lib/navigation/Tabs/OTabs.vue
index ededf04bf0..d47d88966c 100644
--- a/web/src/lib/navigation/Tabs/OTabs.vue
+++ b/web/src/lib/navigation/Tabs/OTabs.vue
@@ -30,6 +30,7 @@ const props = withDefaults(defineProps<OTabsProps>(), {
   dense: false,
   bordered: false,
   reorderable: false,
+  collapseLabels: false,
 });
 
 const emit = defineEmits<OTabsEmits>();
@@ -181,6 +182,7 @@ const context = computed<TabsContext>(() => ({
   draggingName: draggingName.value,
   dropTargetName: dropTargetName.value,
   dropBefore: dropBefore.value,
+  collapseLabels: props.collapseLabels,
 }));
 
 provide(TABS_CONTEXT_KEY, context);
diff --git a/web/src/lib/overlay/Drawer/ODrawer.types.ts b/web/src/lib/overlay/Drawer/ODrawer.types.ts
index 55c562fd89..06e8a00211 100644
--- a/web/src/lib/overlay/Drawer/ODrawer.types.ts
+++ b/web/src/lib/overlay/Drawer/ODrawer.types.ts
@@ -149,6 +149,12 @@ export interface DrawerProps {
    */
   portalTarget?: string | HTMLElement | null;
 
+  /** Element (or CSS selector) the drawer starts from, so app chrome above it stays visible; re-measured on resize. */
+  anchor?: string | HTMLElement | null;
+
+  /** Which edge of `anchor` the drawer starts at. Default: "top". */
+  anchorEdge?: "top" | "bottom";
+
   /** Render the portal in place for a contained drawer surface. Default: false. */
   inline?: boolean;
 }
diff --git a/web/src/lib/overlay/Drawer/ODrawer.vue b/web/src/lib/overlay/Drawer/ODrawer.vue
index 4ee5da79f7..0f96678d3c 100644
--- a/web/src/lib/overlay/Drawer/ODrawer.vue
+++ b/web/src/lib/overlay/Drawer/ODrawer.vue
@@ -26,6 +26,7 @@ import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import { useScrollShadow } from "@/lib/overlay/useScrollShadow";
 import { FORM_SUBMIT_STATE_KEY } from "@/lib/forms/Form/OForm.types";
 import { useI18nTyped } from "@/types/i18n";
+import useBreakpoint from "@/composables/useBreakpoint";
 
 const { t } = useI18nTyped();
 
@@ -56,6 +57,8 @@ const props = withDefaults(defineProps<DrawerProps>(), {
   neutralButtonLoading: false,
   lazy: true,
   portalTarget: undefined,
+  anchor: undefined,
+  anchorEdge: "top",
 });
 
 const emit = defineEmits<DrawerEmits>();
@@ -194,12 +197,49 @@ const sizeClasses = computed(() => {
 const isContained = computed(() => !!props.portalTarget);
 
 // Explicit width override — vw when full-viewport, % when container-scoped
+const { isMobile } = useBreakpoint();
+
+// Measured, not CSS: the drawer is portaled to <body>, away from its anchor row.
+const anchorTop = ref(0);
+function measureAnchor() {
+  const a = props.anchor;
+  const el = typeof a === "string" ? document.querySelector<HTMLElement>(a) : a;
+  const rect = el?.getBoundingClientRect();
+  anchorTop.value = rect
+    ? Math.max(0, Math.round(props.anchorEdge === "bottom" ? rect.bottom : rect.top))
+    : 0;
+}
+watchEffect(
+  (cleanup) => {
+    if (!internalOpen.value || !props.anchor) {
+      anchorTop.value = 0;
+      return;
+    }
+    measureAnchor();
+    window.addEventListener("resize", measureAnchor);
+    cleanup(() => window.removeEventListener("resize", measureAnchor));
+  },
+  // The anchor can be swapped in the same tick, so measure only once it is in the DOM.
+  { flush: "post" },
+);
+const anchorStyle = computed(() => {
+  const style: Record<string, string> = {};
+  if (anchorTop.value > 0) {
+    style.top = `${anchorTop.value}px`;
+    style.height = `calc(100% - ${anchorTop.value}px)`;
+  }
+  return style;
+});
+const overlayStyle = computed(() => ({ zIndex: overlayZIndex.value, ...anchorStyle.value }));
+
 const contentStyle = computed(() => {
   const style: Record<string, string | number> = {
     zIndex: contentZIndex.value,
+    ...anchorStyle.value,
   };
   if (props.width != null) {
-    style.width = isContained.value ? `${props.width}%` : `${props.width}vw`;
+    const w = isMobile.value ? Math.min(100, Math.max(88, props.width)) : props.width;
+    style.width = isContained.value ? `${w}%` : `${w}vw`;
   }
   return style;
 });
@@ -324,7 +364,7 @@ watch(internalOpen, (open) => {
           'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',
           'data-[state=closed]:duration-120 data-[state=open]:duration-120',
         ]"
-        :style="{ zIndex: overlayZIndex }"
+        :style="overlayStyle"
       />
 
       <!-- Drawer panel -->
diff --git a/web/src/lib/overlay/Dropdown/ODropdown.vue b/web/src/lib/overlay/Dropdown/ODropdown.vue
index cf8639bbd4..73c7454531 100644
--- a/web/src/lib/overlay/Dropdown/ODropdown.vue
+++ b/web/src/lib/overlay/Dropdown/ODropdown.vue
@@ -32,6 +32,7 @@ import {
   DropdownMenuContent,
 } from "reka-ui";
 import { computed, inject, onBeforeUnmount, provide, ref, watch, type Ref } from "vue";
+import useBreakpoint from "@/composables/useBreakpoint";
 import {
   O_DROPDOWN_NESTED_KEY,
   type DropdownNestedRegistry,
@@ -39,6 +40,8 @@ import {
   clearActiveOverlay,
 } from "./ODropdown.context";
 
+const { lgUp } = useBreakpoint();
+
 const props = withDefaults(defineProps<DropdownProps>(), {
   modal: false,
   side: "bottom",
@@ -292,11 +295,13 @@ onBeforeUnmount(() => {
         :align="align"
         :side-offset="sideOffset"
         :hide-when-detached="true"
+        :collision-padding="lgUp ? 0 : 8"
         @pointer-down-outside="handlePointerDownOutside"
         @focus-outside="handleFocusOutside"
         :style="{ zIndex: contentZIndex }"
         :class="[
-          'min-w-40 p-1',
+          'min-w-40 p-1 max-lg:max-w-[calc(100vw-1rem)]',
+          'max-lg:max-h-[var(--reka-popper-available-height,75vh)] max-lg:overflow-y-auto',
           // Surface
           'bg-dropdown-bg border-dropdown-border rounded-default border shadow-md',
           // Typography
diff --git a/web/src/lib/overlay/Popover/OPopover.vue b/web/src/lib/overlay/Popover/OPopover.vue
index bcaa1879cc..cc92bf9c09 100644
--- a/web/src/lib/overlay/Popover/OPopover.vue
+++ b/web/src/lib/overlay/Popover/OPopover.vue
@@ -41,6 +41,7 @@ if (typeof document !== "undefined" && !(globalThis as any)[_oPopKey]) {
 <script setup lang="ts">
 import { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent } from "reka-ui";
 import { inject, onBeforeUnmount, provide, ref, watch, type Ref } from "vue";
+import useBreakpoint from "@/composables/useBreakpoint";
 import {
   O_DROPDOWN_NESTED_KEY,
   type DropdownNestedRegistry,
@@ -48,6 +49,8 @@ import {
   clearActiveOverlay,
 } from "@/lib/overlay/Dropdown/ODropdown.context";
 
+const { lgUp } = useBreakpoint();
+
 const props = withDefaults(
   defineProps<{
     open?: boolean;
@@ -223,12 +226,14 @@ onBeforeUnmount(() => {
         :align="align"
         :side-offset="sideOffset"
         :hide-when-detached="hideWhenDetached"
+        :collision-padding="lgUp ? 0 : 8"
         :aria-label="ariaLabel"
         :style="{ zIndex }"
         @pointer-down-outside="handlePointerDownOutside"
         @focus-outside="handleFocusOutside"
         :class="[
-          'outline-none',
+          'outline-none max-lg:max-w-[calc(100vw-1rem)]',
+          'max-lg:max-h-[var(--reka-popper-available-height,75vh)] max-lg:overflow-y-auto',
           // Surface
           'bg-dropdown-bg border-dropdown-border rounded-default border shadow-md',
           // Open/close reveal animation (matches ODropdown)
diff --git a/web/src/locales/languages/ar-SA.json b/web/src/locales/languages/ar-SA.json
index 33bb83d672..38ed124a27 100644
--- a/web/src/locales/languages/ar-SA.json
+++ b/web/src/locales/languages/ar-SA.json
@@ -587,6 +587,8 @@
     "operator": "المشغل",
     "value": "القيمة",
     "filters": "المرشحات",
+    "more": "المزيد",
+    "sidePanel": "اللوحة الجانبية",
     "selectFilter": "اختر المرشح",
     "confirm": "تأكيد",
     "json": "JSON",
@@ -1070,6 +1072,7 @@
     "errorFetchingResults": "خطأ أثناء جلب النتائج",
     "somethingWentWrong": "حدث خطأ ما",
     "selectStreamForAI": "اختر البث أولا لاستخدام الذكاء الاصطناعي",
+    "showFields": "إظهار الحقول",
     "collapseFields": "حقول الانهيار",
     "allFieldsWarningMsg": "يمكن أن تكون عمليات البحث بطيئة عندما يكون عدد الحقول في المخطط مرتفعا جدا. يرجى اختيار الحقول المطلوبة بعناية.",
     "regionFilterMsg": "البحث عن المنطقة/العنقود",
@@ -1146,6 +1149,7 @@
     "histogramTitle": "عرض {start} {end} من أحداث {total} في {took} الميلان الثانوي.",
     "histogramTitleWithScan": "عرض {start} {end} من {total} الأحداث في {took} الخاطب ({scanLabel}: {scanSize})",
     "recordsChip": "{start} {end} من {total} الأحداث",
+    "recordsChipShort": "{start}–{end} من {total}",
     "tookChip": "{took} مللي ثانية",
     "scanSize": "حجم المسح",
     "deltaScanSize": "حجم دلتا سكان",
diff --git a/web/src/locales/languages/de-DE.json b/web/src/locales/languages/de-DE.json
index 5bc55a27dc..4aa1a59723 100644
--- a/web/src/locales/languages/de-DE.json
+++ b/web/src/locales/languages/de-DE.json
@@ -587,6 +587,8 @@
     "operator": "Operator",
     "value": "Wert",
     "filters": "Filter",
+    "more": "Mehr",
+    "sidePanel": "Seitenleiste",
     "selectFilter": "Filter auswählen",
     "confirm": "Bestätigen",
     "json": "JSON",
@@ -1070,6 +1072,7 @@
     "errorFetchingResults": "Fehler beim Abrufen der Ergebnisse",
     "somethingWentWrong": "Etwas ist schief gelaufen",
     "selectStreamForAI": "Wählen Sie zuerst einen Stream aus, um KI zu verwenden",
+    "showFields": "Felder anzeigen",
     "collapseFields": "Felder ausblenden",
     "allFieldsWarningMsg": "Suchen können langsam sein, wenn die Anzahl der Felder im Schema extrem hoch ist. Bitte wählen Sie die erforderlichen Felder entsprechend aus.",
     "regionFilterMsg": "Region/Cluster suchen",
@@ -1146,6 +1149,7 @@
     "histogramTitle": "Zeige {start} bis {end} von {total} Ereignissen in {took} ms.",
     "histogramTitleWithScan": "Zeige {start} bis {end} von {total} Ereignissen in {took} ms. ({scanLabel}: {scanSize})",
     "recordsChip": "{start} bis {end} von {total} Ereignissen",
+    "recordsChipShort": "{start}–{end} von {total}",
     "tookChip": "{took} ms",
     "scanSize": "Scan-Größe",
     "deltaScanSize": "Delta-Scan-Größe",
diff --git a/web/src/locales/languages/en-US.json b/web/src/locales/languages/en-US.json
index 18fd0011e3..1eacc4fb0b 100644
--- a/web/src/locales/languages/en-US.json
+++ b/web/src/locales/languages/en-US.json
@@ -587,6 +587,8 @@
     "operator": "Operator",
     "value": "Value",
     "filters": "Filters",
+    "more": "More",
+    "sidePanel": "Side panel",
     "selectFilter": "Select Filter",
     "confirm": "Confirm",
     "json": "JSON",
@@ -1070,6 +1072,7 @@
     "errorFetchingResults": "Error while fetching results",
     "somethingWentWrong": "Something went wrong",
     "selectStreamForAI": "Select a stream first to use AI",
+    "showFields": "Show fields",
     "collapseFields": "Collapse Fields",
     "allFieldsWarningMsg": "Searches can be slow when the number of fields in the schema is extremely high. Please choose the required fields carefully.",
     "regionFilterMsg": "Search Region/Cluster",
@@ -1146,6 +1149,7 @@
     "histogramTitle": "Showing {start} to {end} out of {total} events in {took} ms.",
     "histogramTitleWithScan": "Showing {start} to {end} out of {total} events in {took} ms. ({scanLabel}: {scanSize})",
     "recordsChip": "{start} to {end} out of {total} events",
+    "recordsChipShort": "{start}–{end} of {total}",
     "tookChip": "{took} ms",
     "scanSize": "Scan Size",
     "deltaScanSize": "Delta Scan Size",
diff --git a/web/src/locales/languages/es-ES.json b/web/src/locales/languages/es-ES.json
index 45d97e638f..070dff3679 100644
--- a/web/src/locales/languages/es-ES.json
+++ b/web/src/locales/languages/es-ES.json
@@ -587,6 +587,8 @@
     "operator": "Operador",
     "value": "Valor",
     "filters": "Filtros",
+    "more": "Más",
+    "sidePanel": "Panel lateral",
     "selectFilter": "Seleccione un filtro",
     "confirm": "Confirmar",
     "json": "JSON",
@@ -1070,6 +1072,7 @@
     "errorFetchingResults": "Error al obtener los resultados",
     "somethingWentWrong": "Algo salió mal",
     "selectStreamForAI": "Selecciona primero una transmisión para usar la IA",
+    "showFields": "Mostrar campos",
     "collapseFields": "Campos colapsados",
     "allFieldsWarningMsg": "Las búsquedas pueden ser lentas cuando el número de campos del esquema es extremadamente alto. Elija los campos obligatorios de forma adecuada.",
     "regionFilterMsg": "Región/clúster de búsqueda",
@@ -1146,6 +1149,7 @@
     "histogramTitle": "Mostrando {start} a {end} de {total} eventos en {took} ms.",
     "histogramTitleWithScan": "Mostrando {start} a {end} de {total} eventos en {took} ms. ({scanLabel}: {scanSize})",
     "recordsChip": "{start} a {end} de {total} eventos",
+    "recordsChipShort": "{start}–{end} de {total}",
     "tookChip": "{took} ms",
     "scanSize": "Tamaño de escaneo",
     "deltaScanSize": "Tamaño de escaneo delta",
diff --git a/web/src/locales/languages/fr-FR.json b/web/src/locales/languages/fr-FR.json
index 4fdee42c90..d60968f603 100644
--- a/web/src/locales/languages/fr-FR.json
+++ b/web/src/locales/languages/fr-FR.json
@@ -587,6 +587,8 @@
     "operator": "Opérateur",
     "value": "Valeur",
     "filters": "Filtres",
+    "more": "Plus",
+    "sidePanel": "Panneau latéral",
     "selectFilter": "Sélectionnez un filtre",
     "confirm": "Confirmez",
     "json": "JSON",
@@ -1070,6 +1072,7 @@
     "errorFetchingResults": "Erreur lors de la récupération des résultats",
     "somethingWentWrong": "Quelque chose s'est mal passé",
     "selectStreamForAI": "Sélectionnez d'abord un flux pour utiliser l'IA",
+    "showFields": "Afficher les champs",
     "collapseFields": "Effondrer les champs",
     "allFieldsWarningMsg": "Les recherches peuvent être lentes lorsque le nombre de champs du schéma est extrêmement élevé. Veuillez sélectionner les champs obligatoires de manière appropriée.",
     "regionFilterMsg": "Rechercher une région/un cluster",
@@ -1146,6 +1149,7 @@
     "histogramTitle": "Affichage de {start} à {end} sur {total} événements en {took} ms.",
     "histogramTitleWithScan": "Affichage de {start} à {end} sur {total} événements en {took} ms. ({scanLabel} : {scanSize})",
     "recordsChip": "{start} à {end} sur {total} événements",
+    "recordsChipShort": "{start}–{end} sur {total}",
     "tookChip": "{took} ms",
     "scanSize": "Taille de scan",
     "deltaScanSize": "Taille de scan delta",
diff --git a/web/src/locales/languages/it-IT.json b/web/src/locales/languages/it-IT.json
index 629361918e..aebd4c85fe 100644
--- a/web/src/locales/languages/it-IT.json
+++ b/web/src/locales/languages/it-IT.json
@@ -587,6 +587,8 @@
     "operator": "Operatore",
     "value": "Valore",
     "filters": "Filtri",
+    "more": "Altro",
+    "sidePanel": "Pannello laterale",
     "selectFilter": "Seleziona filtro",
     "confirm": "Confermare",
     "json": "JSON",
@@ -1070,6 +1072,7 @@
     "errorFetchingResults": "Errore durante il recupero dei risultati",
     "somethingWentWrong": "Qualcosa è andato storto",
     "selectStreamForAI": "Seleziona prima uno stream per utilizzare l'IA",
+    "showFields": "Mostra campi",
     "collapseFields": "Comprimi campi",
     "allFieldsWarningMsg": "Le ricerche possono essere lente quando il numero di campi nello schema è estremamente elevato, scegli i campi obbligatori in modo appropriato.",
     "regionFilterMsg": "Cerca regione/cluster",
@@ -1146,6 +1149,7 @@
     "histogramTitle": "Mostrando {start} a {end} di {total} eventi in {took} ms.",
     "histogramTitleWithScan": "Mostrando {start} a {end} di {total} eventi in {took} ms. ({scanLabel}: {scanSize})",
     "recordsChip": "{start} a {end} di {total} eventi",
+    "recordsChipShort": "{start}–{end} di {total}",
     "tookChip": "{took} ms",
     "scanSize": "Dimensione scansione",
     "deltaScanSize": "Dimensione scansione delta",
diff --git a/web/src/locales/languages/ja-JP.json b/web/src/locales/languages/ja-JP.json
index c3e7e5101a..513f72141b 100644
--- a/web/src/locales/languages/ja-JP.json
+++ b/web/src/locales/languages/ja-JP.json
@@ -587,6 +587,8 @@
     "operator": "演算子",
     "value": "値",
     "filters": "フィルター",
+    "more": "その他",
+    "sidePanel": "サイドパネル",
     "selectFilter": "フィルタを選択",
     "confirm": "確認",
     "json": "JSON",
@@ -1070,6 +1072,7 @@
     "errorFetchingResults": "結果を取得中にエラーが発生しました",
     "somethingWentWrong": "何かがおかしくなった",
     "selectStreamForAI": "AI を使用するには、まずストリームを選択してください",
+    "showFields": "フィールドを表示",
     "collapseFields": "フィールドを折りたたむ",
     "allFieldsWarningMsg": "スキーマのフィールド数が極端に多い場合、検索が遅くなる可能性があります。必要なフィールドを適切に選択してください。",
     "regionFilterMsg": "リージョン/クラスターの検索",
@@ -1146,6 +1149,7 @@
     "histogramTitle": "{start} から {end} まで、{total} 件のイベント中 {took} ms で表示しています。",
     "histogramTitleWithScan": "{start} から {end} まで、{total} 件のイベント中 {took} ms で表示しています。（{scanLabel}: {scanSize}）",
     "recordsChip": "{start} から {end} まで（{total} イベント中）",
+    "recordsChipShort": "{start}–{end} / {total} 件",
     "tookChip": "{took} ms",
     "scanSize": "スキャンサイズ",
     "deltaScanSize": "デルタスキャンサイズ",
diff --git a/web/src/locales/languages/ko-KR.json b/web/src/locales/languages/ko-KR.json
index 64c05c1f46..22578214e9 100644
--- a/web/src/locales/languages/ko-KR.json
+++ b/web/src/locales/languages/ko-KR.json
@@ -587,6 +587,8 @@
     "operator": "운영자",
     "value": "값",
     "filters": "필터",
+    "more": "더보기",
+    "sidePanel": "사이드 패널",
     "selectFilter": "필터 선택",
     "confirm": "확인",
     "json": "JSON",
@@ -1070,6 +1072,7 @@
     "errorFetchingResults": "결과를 가져오는 중 오류가 발생했습니다.",
     "somethingWentWrong": "뭔가 잘못됐어",
     "selectStreamForAI": "AI를 사용할 스트림을 먼저 선택하세요",
+    "showFields": "필드 표시",
     "collapseFields": "필드 축소",
     "allFieldsWarningMsg": "스키마의 필드 수가 너무 많으면 검색 속도가 느려질 수 있습니다. 필수 필드를 적절하게 선택하십시오.",
     "regionFilterMsg": "검색 지역/클러스터",
@@ -1146,6 +1149,7 @@
     "histogramTitle": "총 {total}개 이벤트 중 {start}~{end}을(를) {took} ms에 표시 중입니다.",
     "histogramTitleWithScan": "총 {total}개 이벤트 중 {start}~{end}을(를) {took} ms에 표시 중입니다. ({scanLabel}: {scanSize})",
     "recordsChip": "총 {total}개 이벤트 중 {start}~{end}",
+    "recordsChipShort": "{total}개 중 {start}–{end}",
     "tookChip": "{took} ms",
     "scanSize": "스캔 크기",
     "deltaScanSize": "델타 스캔 크기",
diff --git a/web/src/locales/languages/nl-NL.json b/web/src/locales/languages/nl-NL.json
index 876a1c1d02..f4f7406aea 100644
--- a/web/src/locales/languages/nl-NL.json
+++ b/web/src/locales/languages/nl-NL.json
@@ -587,6 +587,8 @@
     "operator": "Operator",
     "value": "Waarde",
     "filters": "Filters",
+    "more": "Meer",
+    "sidePanel": "Zijpaneel",
     "selectFilter": "Filter selecteren",
     "confirm": "Bevestigen",
     "json": "JSON",
@@ -1070,6 +1072,7 @@
     "errorFetchingResults": "Fout bij het ophalen van resultaten",
     "somethingWentWrong": "Er is iets misgegaan",
     "selectStreamForAI": "Selecteer eerst een stream om AI te gebruiken",
+    "showFields": "Velden tonen",
     "collapseFields": "Velden samenvouwen",
     "allFieldsWarningMsg": "Zoekopdrachten kunnen traag zijn als het aantal velden in het schema extreem hoog is. Kies de vereiste velden op de juiste manier.",
     "regionFilterMsg": "Zoek regio/cluster",
@@ -1146,6 +1149,7 @@
     "histogramTitle": "Toont {start} tot {end} van {total} gebeurtenissen in {took} ms.",
     "histogramTitleWithScan": "Toont {start} tot {end} van {total} gebeurtenissen in {took} ms. ({scanLabel}: {scanSize})",
     "recordsChip": "{start} tot {end} van {total} gebeurtenissen",
+    "recordsChipShort": "{start}–{end} van {total}",
     "tookChip": "{took} ms",
     "scanSize": "Scangrootte",
     "deltaScanSize": "Delta-scangrootte",
diff --git a/web/src/locales/languages/pl-PL.json b/web/src/locales/languages/pl-PL.json
index 2dcc6be900..80113f5114 100644
--- a/web/src/locales/languages/pl-PL.json
+++ b/web/src/locales/languages/pl-PL.json
@@ -587,6 +587,8 @@
     "operator": "Operator",
     "value": "Wartość",
     "filters": "Filtry",
+    "more": "Więcej",
+    "sidePanel": "Panel boczny",
     "selectFilter": "Wybierz filtr",
     "confirm": "Potwierdź",
     "json": "JSON",
@@ -1070,6 +1072,7 @@
     "errorFetchingResults": "Błąd podczas pobierania wyników",
     "somethingWentWrong": "Coś poszło nie tak",
     "selectStreamForAI": "Najpierw wybierz strumień, aby użyć AI",
+    "showFields": "Pokaż pola",
     "collapseFields": "Zwiń pola",
     "allFieldsWarningMsg": "Wyszukiwania mogą być wolne, gdy liczba pól w schemacie jest bardzo wysoka. Wybierz wymagane pola ostrożnie.",
     "regionFilterMsg": "Szukaj regionu/klastra",
@@ -1146,6 +1149,7 @@
     "histogramTitle": "Wyświetlanie od {start} do {end} z {total} zdarzeń w {took} ms.",
     "histogramTitleWithScan": "Wyświetlanie od {start} do {end} z {total} zdarzeń w {took} ms. ({scanLabel}: {scanSize})",
     "recordsChip": "Od {start} do {end} z {total} zdarzeń",
+    "recordsChipShort": "{start}–{end} z {total}",
     "tookChip": "{took} ms",
     "scanSize": "Rozmiar skanowania",
     "deltaScanSize": "Delta rozmiaru skanowania",
diff --git a/web/src/locales/languages/pt-PT.json b/web/src/locales/languages/pt-PT.json
index d9c789a2f9..3eeaa61f23 100644
--- a/web/src/locales/languages/pt-PT.json
+++ b/web/src/locales/languages/pt-PT.json
@@ -587,6 +587,8 @@
     "operator": "Operador",
     "value": "Valor",
     "filters": "Filtros",
+    "more": "Mais",
+    "sidePanel": "Painel lateral",
     "selectFilter": "Selecionar filtro",
     "confirm": "Confirme",
     "json": "JSON",
@@ -1070,6 +1072,7 @@
     "errorFetchingResults": "Erro ao buscar resultados",
     "somethingWentWrong": "Algo deu errado",
     "selectStreamForAI": "Selecione primeiro um stream para usar a IA",
+    "showFields": "Mostrar campos",
     "collapseFields": "Colapsar campos",
     "allFieldsWarningMsg": "As pesquisas podem ser lentas quando o número de campos no esquema é extremamente alto. Escolha os campos obrigatórios adequadamente.",
     "regionFilterMsg": "Região/cluster de pesquisa",
@@ -1146,6 +1149,7 @@
     "histogramTitle": "Exibindo {start} a {end} de {total} eventos em {took} ms.",
     "histogramTitleWithScan": "Exibindo {start} a {end} de {total} eventos em {took} ms. ({scanLabel}: {scanSize})",
     "recordsChip": "{start} a {end} de {total} eventos",
+    "recordsChipShort": "{start}–{end} de {total}",
     "tookChip": "{took} ms",
     "scanSize": "Tamanho da varredura",
     "deltaScanSize": "Tamanho da varredura delta",
diff --git a/web/src/locales/languages/ru-RU.json b/web/src/locales/languages/ru-RU.json
index 0b032242d4..80ba038e04 100644
--- a/web/src/locales/languages/ru-RU.json
+++ b/web/src/locales/languages/ru-RU.json
@@ -587,6 +587,8 @@
     "operator": "Оператор",
     "value": "Значение",
     "filters": "Фильтры",
+    "more": "Ещё",
+    "sidePanel": "Боковая панель",
     "selectFilter": "Выбрать фильтр",
     "confirm": "Подтвердить",
     "json": "JSON",
@@ -1070,6 +1072,7 @@
     "errorFetchingResults": "Ошибка при загрузке результатов",
     "somethingWentWrong": "Что-то пошло не так",
     "selectStreamForAI": "Сначала выберите поток, чтобы использовать AI",
+    "showFields": "Показать поля",
     "collapseFields": "Свернуть поля",
     "allFieldsWarningMsg": "Поиск может быть медленным, если количество полей в схеме чрезвычайно велико. Пожалуйста, внимательно выбирайте необходимые поля.",
     "regionFilterMsg": "Поиск региона/кластера",
@@ -1146,6 +1149,7 @@
     "histogramTitle": "Показаны события с {start} по {end} из {total} за {took} мс.",
     "histogramTitleWithScan": "Показаны события с {start} по {end} из {total} за {took} мс. ({scanLabel}: {scanSize})",
     "recordsChip": "с {start} по {end} из {total} событий",
+    "recordsChipShort": "{start}–{end} из {total}",
     "tookChip": "{took} мс",
     "scanSize": "Размер сканирования",
     "deltaScanSize": "Дельта размера сканирования",
diff --git a/web/src/locales/languages/tr-TR.json b/web/src/locales/languages/tr-TR.json
index e77b044def..0c6f76257e 100644
--- a/web/src/locales/languages/tr-TR.json
+++ b/web/src/locales/languages/tr-TR.json
@@ -587,6 +587,8 @@
     "operator": "Şebeke",
     "value": "Değer",
     "filters": "Filtreler",
+    "more": "Daha fazla",
+    "sidePanel": "Yan panel",
     "selectFilter": "Filtreyi Seç",
     "confirm": "Onayla",
     "json": "JSON",
@@ -1070,6 +1072,7 @@
     "errorFetchingResults": "Sonuçları getirirken hata oluştu",
     "somethingWentWrong": "Bir şeyler ters gitti",
     "selectStreamForAI": "Yapay zekayı kullanmak için önce bir akış seçin",
+    "showFields": "Alanları göster",
     "collapseFields": "Alanları Daralt",
     "allFieldsWarningMsg": "Şemadaki alan sayısı son derece yüksek olduğunda aramalar yavaş olabilir, lütfen gerekli alanları uygun şekilde seçin.",
     "regionFilterMsg": "Ara Bölge/Küme",
@@ -1146,6 +1149,7 @@
     "histogramTitle": "{start} - {end} / {total} olay, {took} ms içinde gösteriliyor.",
     "histogramTitleWithScan": "{start} - {end} / {total} olay, {took} ms içinde gösteriliyor. ({scanLabel}: {scanSize})",
     "recordsChip": "{start} - {end} / {total} olay",
+    "recordsChipShort": "{start}–{end} / {total}",
     "tookChip": "{took} ms",
     "scanSize": "Tarama Boyutu",
     "deltaScanSize": "Delta Tarama Boyutu",
diff --git a/web/src/locales/languages/vi-VN.json b/web/src/locales/languages/vi-VN.json
index 5fe645e42a..871b1ea156 100644
--- a/web/src/locales/languages/vi-VN.json
+++ b/web/src/locales/languages/vi-VN.json
@@ -587,6 +587,8 @@
     "operator": "Toán tử",
     "value": "Giá trị",
     "filters": "Bộ lọc",
+    "more": "Thêm",
+    "sidePanel": "Bảng bên",
     "selectFilter": "Chọn bộ lọc",
     "confirm": "Xác nhận",
     "json": "JSON",
@@ -1070,6 +1072,7 @@
     "errorFetchingResults": "Lỗi khi lấy kết quả",
     "somethingWentWrong": "Đã xảy ra lỗi",
     "selectStreamForAI": "Vui lòng chọn một luồng trước để sử dụng AI",
+    "showFields": "Hiển thị trường",
     "collapseFields": "Thu gọn trường",
     "allFieldsWarningMsg": "Tìm kiếm có thể chậm khi số lượng trường trong lược đồ quá lớn. Vui lòng chọn các trường cần thiết một cách cẩn thận.",
     "regionFilterMsg": "Tìm kiếm vùng/cụm",
@@ -1146,6 +1149,7 @@
     "histogramTitle": "Hiển thị {start} đến {end} trong tổng số {total} sự kiện trong {took} ms.",
     "histogramTitleWithScan": "Hiển thị {start} đến {end} trong tổng số {total} sự kiện trong {took} ms. ({scanLabel}: {scanSize})",
     "recordsChip": "{start} đến {end} trong tổng số {total} sự kiện",
+    "recordsChipShort": "{start}–{end} trong {total}",
     "tookChip": "{took} ms",
     "scanSize": "Kích thước quét",
     "deltaScanSize": "Kích thước quét Delta",
diff --git a/web/src/locales/languages/zh-CN.json b/web/src/locales/languages/zh-CN.json
index d38ae54a0e..86118b73ae 100644
--- a/web/src/locales/languages/zh-CN.json
+++ b/web/src/locales/languages/zh-CN.json
@@ -587,6 +587,8 @@
     "operator": "操作符",
     "value": "值",
     "filters": "过滤器",
+    "more": "更多",
+    "sidePanel": "侧边面板",
     "selectFilter": "过滤器",
     "confirm": "确认",
     "json": "JSON",
@@ -1070,6 +1072,7 @@
     "errorFetchingResults": "获取结果时出错",
     "somethingWentWrong": "出了点问题",
     "selectStreamForAI": "先选择一个数据流来使用 AI",
+    "showFields": "显示字段",
     "collapseFields": "折叠字段",
     "allFieldsWarningMsg": "当架构中的字段数量非常高时，搜索速度可能会很慢，请相应地选择必填字段。",
     "regionFilterMsg": "搜索区域/集群",
@@ -1146,6 +1149,7 @@
     "histogramTitle": "显示 {start} 到 {end}，共 {total} 个事件，耗时 {took} 毫秒。",
     "histogramTitleWithScan": "显示 {start} 到 {end}，共 {total} 个事件，耗时 {took} 毫秒。（{scanLabel}：{scanSize}）",
     "recordsChip": "{start} 到 {end}，共 {total} 个事件",
+    "recordsChipShort": "第 {start}–{end} 项，共 {total} 项",
     "tookChip": "{took} 毫秒",
     "scanSize": "扫描大小",
     "deltaScanSize": "增量扫描大小",
diff --git a/web/src/locales/languages/zh-TW.json b/web/src/locales/languages/zh-TW.json
index 167a5ffd2a..7ea7e42f87 100644
--- a/web/src/locales/languages/zh-TW.json
+++ b/web/src/locales/languages/zh-TW.json
@@ -587,6 +587,8 @@
     "operator": "運算子",
     "value": "值",
     "filters": "篩選條件",
+    "more": "更多",
+    "sidePanel": "側邊面板",
     "selectFilter": "選擇篩選條件",
     "confirm": "確認",
     "json": "JSON",
@@ -1070,6 +1072,7 @@
     "errorFetchingResults": "擷取結果時發生錯誤",
     "somethingWentWrong": "發生錯誤",
     "selectStreamForAI": "請先選擇串流以使用 AI",
+    "showFields": "顯示欄位",
     "collapseFields": "收合欄位",
     "allFieldsWarningMsg": "當結構描述中的欄位數量極多時，搜尋可能會變慢。請謹慎選擇所需欄位。",
     "regionFilterMsg": "搜尋區域/叢集",
@@ -1146,6 +1149,7 @@
     "histogramTitle": "顯示第 {start} 到 {end} 個事件，共 {total} 個，耗時 {took} 毫秒。",
     "histogramTitleWithScan": "顯示第 {start} 到 {end} 個事件，共 {total} 個，耗時 {took} 毫秒。（{scanLabel}: {scanSize}）",
     "recordsChip": "{start} 到 {end}，共 {total} 個事件",
+    "recordsChipShort": "{start}–{end}，共 {total}",
     "tookChip": "{took} 毫秒",
     "scanSize": "掃描大小",
     "deltaScanSize": "掃描大小差異",
diff --git a/web/src/plugins/logs/DetailTable.vue b/web/src/plugins/logs/DetailTable.vue
index 17cc466c2c..eca6599283 100644
--- a/web/src/plugins/logs/DetailTable.vue
+++ b/web/src/plugins/logs/DetailTable.vue
@@ -408,8 +408,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       v-if="tab === 'json' || tab === 'table'"
       class="px-page-edge bg-dialog-bg sticky bottom-0 z-10 py-4"
     >
-      <div class="flex flex-nowrap items-center justify-between">
-        <div class="w-1/12">
+      <div class="flex flex-nowrap items-center justify-between max-md:flex-wrap max-md:gap-2">
+        <div class="w-1/12 max-md:w-auto">
           <OButton
             data-test="log-detail-previous-detail-btn"
             variant="outline"
@@ -427,7 +427,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             searchObj.data.stream.selectedStream.length <= 1 &&
             hasAggregationQuery == false
           "
-          class="flex items-center gap-2"
+          class="flex items-center gap-2 max-md:order-last max-md:basis-full max-md:justify-center"
         >
           <label class="font-bold whitespace-nowrap">{{ t("common.noOfRecords") }}</label>
           <OSelect
diff --git a/web/src/plugins/logs/Index.vue b/web/src/plugins/logs/Index.vue
index 965b5a99c3..4f2777a06c 100644
--- a/web/src/plugins/logs/Index.vue
+++ b/web/src/plugins/logs/Index.vue
@@ -72,7 +72,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <!-- Note: Splitter max-height to be dynamically calculated with JS -->
             <OSplitter
               v-model="searchObj.config.splitterModel"
-              :limits="searchObj.config.splitterLimit"
+              :limits="isMobile ? [0, 0] : searchObj.config.splitterLimit"
               class="logs-splitter-smooth h-full max-h-full w-full overflow-hidden"
               separatorClass="field-list-separator"
               :separatorStyle="{
@@ -95,7 +95,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   class="relative-position border-border-default bg-surface-panel h-full border-e pt-2.5"
                 >
                   <IndexList
-                    v-if="searchObj.meta.showFields"
+                    v-if="searchObj.meta.showFields && !isMobile"
                     data-test="logs-search-index-list"
                     @setInterestingFieldInSQLQuery="setInterestingFieldInSQLQuery"
                   />
@@ -110,6 +110,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         searchObj.data.stream.streamLists.length == 0 &&
                         searchObj.loading == false
                       "
+                      class="h-full max-lg:overflow-y-auto"
                     >
                       <LogsNoDataState
                         :ai-enabled="isAiEnabled"
@@ -133,7 +134,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         searchObj.data.stream.streamLists.length > 0 &&
                         searchObj.data.stream.selectedStream.length == 0
                       "
-                      class="h-full"
+                      class="h-full max-lg:overflow-y-auto"
                     >
                       <LogsNoStreamState
                         :org-id="store.state.selectedOrganization.identifier"
@@ -246,6 +247,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         @send-to-ai-chat="sendToAiChat"
                         @run-query="searchData"
                         @jump-to-stream-data="onJumpToStreamData"
+                        @open-mobile-fields="mobileFieldsOpen = true"
                       />
                     </div>
                   </div>
@@ -291,6 +293,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </template>
       </OSplitter>
     </div>
+
+    <ODrawer
+      v-if="isMobile"
+      v-model:open="mobileFieldsOpen"
+      side="left"
+      size="sm"
+      bleed
+      seamless
+      anchor="#thirdLevel"
+      data-test="logs-mobile-fields-drawer"
+    >
+      <div class="flex h-full flex-col overflow-hidden pt-2.5">
+        <IndexList
+          data-test="logs-search-index-list-mobile"
+          @setInterestingFieldInSQLQuery="setInterestingFieldInSQLQuery"
+        />
+      </div>
+    </ODrawer>
   </div>
 </template>
 
@@ -355,6 +375,8 @@ import { contextRegistry } from "@/composables/contextProviders";
 import { createLogsContextProvider } from "@/composables/contextProviders/logsContextProvider";
 import IndexList from "@/plugins/logs/IndexList.vue";
 import OSplitter from "@/lib/core/Splitter/OSplitter.vue";
+import ODrawer from "@/lib/overlay/Drawer/ODrawer.vue";
+import useBreakpoint from "@/composables/useBreakpoint";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import LogsNoEventsState from "@/plugins/logs/LogsNoEventsState.vue";
 import LogsNoDataState from "@/plugins/logs/LogsNoDataState.vue";
@@ -378,6 +400,7 @@ export default defineComponent({
     VisualizeLogsQuery: defineAsyncComponent(() => import("@/plugins/logs/VisualizeLogsQuery.vue")),
     BuildQueryPage: defineAsyncComponent(() => import("@/plugins/logs/BuildQueryPage.vue")),
     OSplitter,
+    ODrawer,
     OEmptyState,
     LogsNoEventsState,
     LogsNoDataState,
@@ -564,6 +587,31 @@ export default defineComponent({
 
     const expandedLogs = ref([]);
     const splitterModel = ref(90);
+
+    const { isMobile, isTablet } = useBreakpoint();
+    const mobileFieldsOpen = ref(false);
+    watch(
+      isMobile,
+      (mobile, wasMobile) => {
+        if (mobile) {
+          searchObj.config.splitterModel = 0;
+        } else if (wasMobile && searchObj.config.splitterModel === 0 && searchObj.meta.showFields) {
+          searchObj.config.splitterModel = searchObj.config.lastSplitterPosition || 20;
+        }
+      },
+      { immediate: true },
+    );
+    // md–lg: the desktop 20% pane is ~140px, too narrow for the stream picker.
+    watch(
+      isTablet,
+      (tablet) => {
+        if (tablet && searchObj.config.splitterModel > 0 && searchObj.config.splitterModel < 30) {
+          searchObj.config.splitterModel = 30;
+        }
+      },
+      { immediate: true },
+    );
+
     const chartRedrawTimeout = ref(null);
     const updateColumnsTimeout = ref(null);
 
@@ -1353,6 +1401,16 @@ export default defineComponent({
     };
 
     const onSelectStream = () => {
+      // < md the stream selector lives in the fields drawer, so it must open before the trigger can focus.
+      if (isMobile.value) {
+        mobileFieldsOpen.value = true;
+        setTimeout(() => {
+          document
+            .querySelector<HTMLElement>('[data-test="log-search-index-list-select-stream"] button')
+            ?.click();
+        }, 300);
+        return;
+      }
       // Focus the stream selector trigger so the user can immediately pick a stream.
       const trigger = document.querySelector<HTMLElement>(
         '[data-test="log-search-index-list-select-stream"] button',
@@ -2263,19 +2321,20 @@ export default defineComponent({
       },
     );
 
-    // Auto-expand splitter to 165px when either editor has >2 lines; collapse to 130px otherwise.
-    // Never overrides a user-set value above 165px.
+    // Auto-expand the splitter when either editor has >2 lines; never overrides a larger user-set value.
     watch(
-      [() => searchObj.data.editorValue, () => searchObj.data.tempFunctionContent],
-      ([queryValue, fnValue]) => {
+      [() => searchObj.data.editorValue, () => searchObj.data.tempFunctionContent, isMobile],
+      ([queryValue, fnValue, mobile]) => {
         const queryLines = (queryValue || "").split("\n").length;
         const fnLines = (fnValue || "").split("\n").length;
         const hasMoreThanTwoLines = queryLines > 2 || fnLines > 2;
+        const baseHeight = mobile ? 165 : 83;
+        const expandedHeight = mobile ? 205 : 130;
 
-        if (hasMoreThanTwoLines && splitterModel.value < 130) {
-          splitterModel.value = 130;
-        } else if (!hasMoreThanTwoLines && splitterModel.value <= 130) {
-          splitterModel.value = 83;
+        if (hasMoreThanTwoLines && splitterModel.value < expandedHeight) {
+          splitterModel.value = expandedHeight;
+        } else if (!hasMoreThanTwoLines && splitterModel.value <= expandedHeight) {
+          splitterModel.value = baseHeight;
         }
       },
       { immediate: true },
@@ -3099,6 +3158,8 @@ export default defineComponent({
       searchObj,
       searchBarRef,
       splitterModel,
+      isMobile,
+      mobileFieldsOpen,
       // loadPageData,
       getQueryData,
       getJobData,
diff --git a/web/src/plugins/logs/SearchBar.vue b/web/src/plugins/logs/SearchBar.vue
index 3f5f91ede2..e4f0067c51 100644
--- a/web/src/plugins/logs/SearchBar.vue
+++ b/web/src/plugins/logs/SearchBar.vue
@@ -17,9 +17,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div class="logs-search-bar-component" id="searchBarComponent">
     <div
-      class="solid border-b-card-glass-border m-0! flex w-full items-center! overflow-hidden border-b p-1.5!"
+      class="solid border-b-card-glass-border m-0! flex w-full items-center! overflow-hidden border-b p-1.5! max-md:flex-wrap max-md:gap-y-1 max-md:overflow-visible"
     >
-      <div ref="toolbarLeftRef" class="flex min-w-0 flex-1 flex-nowrap items-center gap-1">
+      <div
+        ref="toolbarLeftRef"
+        class="flex min-w-0 flex-1 flex-nowrap items-center gap-1 max-md:w-full max-md:flex-none"
+      >
         <!-- Collapsible region — clips its overflow so the More button (a
              shrink-0 sibling below) always stays visible. Pinned items hide via
              the pinBudget computation before they would clip. `flex-initial`
@@ -34,7 +37,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-test="logs-view-mode-dropdown-btn"
                 size="xs"
                 variant="outline"
-                icon-right="chevron-down"
+                icon-right="arrow-drop-down"
               >
                 <OIcon :name="currentToggleOption.icon" size="sm" class="shrink-0" />
                 {{ currentToggleOption.label }}
@@ -309,7 +312,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template #trigger>
             <OButton
               data-test="logs-search-bar-utilities-menu-btn"
-              class="rounded-default hover:bg-button-outline-hover-bg element-box-shadow ms-1 min-h-[1.875rem]! p-1! text-xs font-medium [border:0.0625rem_solid_var(--color-button-outline-border)]! [transition:all_0.2s_ease]"
+              class="rounded-default hover:bg-button-outline-hover-bg element-box-shadow ms-1 min-h-[1.875rem]! p-1! text-xs font-medium [border:0.0625rem_solid_var(--color-button-outline-border)]! [transition:all_0.2s_ease] max-md:ms-auto"
               icon-left="more-horiz"
               variant="outline"
               size="xs"
@@ -567,7 +570,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </ODropdown>
       </div>
 
-      <div ref="toolbarRightRef" class="flex flex-shrink-0 items-center gap-1">
+      <div
+        ref="toolbarRightRef"
+        class="flex flex-shrink-0 items-center gap-1 max-md:w-full max-md:justify-end"
+      >
         <template v-if="searchObj.meta.showTransformEditor && !shouldMoveShareToMenu">
           <FunctionSelector
             :function-options="functionOptions"
@@ -640,9 +646,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div
               data-test="search-download-submenu-trigger"
               :aria-disabled="isDownloadDisabled || undefined"
-              @mouseenter="!isDownloadDisabled && (showDownloadSubmenu = true)"
-              @mouseleave="showDownloadSubmenu = false"
-              class="hover:bg-interactive-hover-bg search-download-item relative flex cursor-pointer items-center gap-2 px-3 py-1.5 [line-height:1.2] text-[var(--text-sm)] select-none before:absolute before:top-0 before:right-full before:h-full before:w-2.5 before:content-['']"
+              @mouseenter="!isMobile && !isDownloadDisabled && (showDownloadSubmenu = true)"
+              @mouseleave="!isMobile && (showDownloadSubmenu = false)"
+              @click="onDownloadRowClick"
+              class="hover:bg-interactive-hover-bg search-download-item relative flex cursor-pointer items-center gap-2 px-3 py-1.5 [line-height:1.2] text-[var(--text-sm)] select-none before:absolute before:top-0 before:right-full before:h-full before:w-2.5 before:content-[''] max-md:flex-wrap"
               :class="{
                 'text-text-muted cursor-not-allowed! hover:bg-transparent!': isDownloadDisabled,
               }"
@@ -657,7 +664,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
               <div
                 v-if="showDownloadSubmenu && !isDownloadDisabled"
-                class="search-download-submenu bg-dropdown-bg rounded-default shadow-hover-shadow absolute top-0 right-full z-9999 me-1 min-w-40 px-0 py-1 shadow-lg [border:0.063rem_solid_var(--color-card-glass-border)]"
+                class="search-download-submenu bg-dropdown-bg rounded-default shadow-hover-shadow absolute top-0 right-full z-9999 me-1 min-w-40 px-0 py-1 shadow-lg [border:0.063rem_solid_var(--color-card-glass-border)] max-md:static max-md:me-0 max-md:mt-1 max-md:w-full max-md:min-w-0 max-md:basis-full max-md:shadow-none"
                 data-test="search-download-submenu"
               >
                 <button
@@ -849,7 +856,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OTooltip :content="t('search.functionEditorLabel')" />
         </OButton>
 
-        <div class="order-1 me-1">
+        <div class="order-1 me-1 max-md:me-auto">
           <DateTime
             ref="dateTimeRef"
             auto-apply
@@ -1778,7 +1785,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </OButton>
                     <OButton
                       :title="t('common.edit')"
-                      class="hover:text-text-body! hover:bg-interactive-hover-bg! action-btn-hover"
+                      class="hover:text-text-body! hover:bg-interactive-hover-bg! action-btn-hover max-md:hidden"
                       variant="ghost-neutral"
                       size="icon-sm"
                       :data-test="`logs-search-bar-update-${row.view_id}-saved-view-btn`"
@@ -1788,7 +1795,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </OButton>
                     <OButton
                       :title="t('common.delete')"
-                      class="hover:text-text-body! hover:bg-interactive-hover-bg! action-btn-hover"
+                      class="hover:text-text-body! hover:bg-interactive-hover-bg! action-btn-hover max-md:hidden"
                       variant="ghost-neutral"
                       size="icon-sm"
                       :data-test="`logs-search-bar-delete-${row.view_id}-saved-view-btn`"
@@ -1796,6 +1803,35 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     >
                       <OIcon name="delete" size="xs" />
                     </OButton>
+                    <ODropdown side="bottom" align="end">
+                      <template #trigger>
+                        <OButton
+                          icon-left="more-vert"
+                          variant="ghost"
+                          size="icon-xs-sq"
+                          class="md:hidden"
+                          data-test="logs-search-bar-saved-view-row-more-actions"
+                          @click.stop
+                        />
+                      </template>
+                      <ODropdownItem
+                        icon-left="edit"
+                        class="md:hidden"
+                        :data-test="`logs-search-bar-update-${row.view_id}-saved-view-btn-menu`"
+                        @select="handleUpdateSavedView(row)"
+                      >
+                        <span>{{ t("common.edit") }}</span>
+                      </ODropdownItem>
+                      <ODropdownItem
+                        icon-left="delete"
+                        variant="destructive"
+                        class="md:hidden"
+                        :data-test="`logs-search-bar-delete-${row.view_id}-saved-view-btn-menu`"
+                        @select="handleDeleteSavedView(row)"
+                      >
+                        <span>{{ t("common.delete") }}</span>
+                      </ODropdownItem>
+                    </ODropdown>
                   </div>
                 </template>
                 <template #empty>
@@ -1852,7 +1888,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </OButton>
                     <OButton
                       :title="t('common.edit')"
-                      class="hover:text-text-body! hover:bg-interactive-hover-bg! action-btn-hover"
+                      class="hover:text-text-body! hover:bg-interactive-hover-bg! action-btn-hover max-md:hidden"
                       variant="ghost-neutral"
                       size="icon-sm"
                       :data-test="`logs-search-bar-update-${row.view_id}-favorite-saved-view-btn`"
@@ -1862,7 +1898,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     </OButton>
                     <OButton
                       :title="t('common.delete')"
-                      class="hover:text-text-body! hover:bg-interactive-hover-bg! action-btn-hover"
+                      class="hover:text-text-body! hover:bg-interactive-hover-bg! action-btn-hover max-md:hidden"
                       variant="ghost-neutral"
                       size="icon-sm"
                       :data-test="`logs-search-bar-delete-${row.view_id}-favorite-saved-view-btn`"
@@ -1870,6 +1906,35 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     >
                       <OIcon name="delete" size="xs" />
                     </OButton>
+                    <ODropdown side="bottom" align="end">
+                      <template #trigger>
+                        <OButton
+                          icon-left="more-vert"
+                          variant="ghost"
+                          size="icon-xs-sq"
+                          class="md:hidden"
+                          data-test="logs-search-bar-favorite-saved-view-row-more-actions"
+                          @click.stop
+                        />
+                      </template>
+                      <ODropdownItem
+                        icon-left="edit"
+                        class="md:hidden"
+                        :data-test="`logs-search-bar-update-${row.view_id}-favorite-saved-view-btn-menu`"
+                        @select="handleUpdateSavedView(row)"
+                      >
+                        <span>{{ t("common.edit") }}</span>
+                      </ODropdownItem>
+                      <ODropdownItem
+                        icon-left="delete"
+                        variant="destructive"
+                        class="md:hidden"
+                        :data-test="`logs-search-bar-delete-${row.view_id}-favorite-saved-view-btn-menu`"
+                        @select="handleDeleteSavedView(row)"
+                      >
+                        <span>{{ t("common.delete") }}</span>
+                      </ODropdownItem>
+                    </ODropdown>
                   </div>
                 </template>
               </OTable>
@@ -1900,6 +1965,7 @@ import { useI18nTyped, raw } from "@/types/i18n";
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
 import { useTheme } from "@/composables/useTheme";
+import useBreakpoint from "@/composables/useBreakpoint";
 import DateTime from "@/components/DateTime.vue";
 import ShareButton from "@/components/common/ShareButton.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
@@ -4316,6 +4382,13 @@ export default defineComponent({
     // Hover-triggered submenu state for "Download results → CSV/JSON" in the more-options dropdown.
     // Resets automatically when the parent ODropdown closes (via @update:open handler).
     const showDownloadSubmenu = ref(false);
+    const { isMobile } = useBreakpoint();
+    // A tap also fires mouseenter, so < md only the click toggles; taps on the submenu's own buttons are ignored.
+    const onDownloadRowClick = (e: MouseEvent) => {
+      if (!isMobile.value || isDownloadDisabled.value) return;
+      if ((e.target as HTMLElement | null)?.closest(".search-download-submenu")) return;
+      showDownloadSubmenu.value = !showDownloadSubmenu.value;
+    };
     const isDownloadDisabled = computed(
       () =>
         !searchObj.data.stream.selectedStream?.length || !searchObj.data.queryResults?.hits?.length,
@@ -4965,6 +5038,8 @@ export default defineComponent({
       confirmDialogVisible,
       confirmCallback,
       showDownloadSubmenu,
+      onDownloadRowClick,
+      isMobile,
       isDownloadDisabled,
       refreshTimes: searchObj.config.refreshTimes,
       refreshTimeChange,
@@ -5388,6 +5463,13 @@ export default defineComponent({
   opacity: 1;
 }
 
+/* Touch has no row hover — keep the row actions visible. */
+@media (max-width: 47.99rem) {
+  .saved-view-table :deep(.action-btn-hover) {
+    opacity: 1;
+  }
+}
+
 /* Remove outer box border so both panels blend into the dialog background
    Exclude elements that also have rounded-default (OInput wrapper) so the
    search input keeps its visible border. */
@@ -5425,6 +5507,12 @@ export default defineComponent({
   height: calc(100% - 2.9rem) !important;
 }
 
+@media (max-width: 47.99rem) {
+  .logs-search-bar-component .query-editor-container {
+    height: calc(100% - 5rem) !important;
+  }
+}
+
 /* padding-left intentionally outranks the `px-1` utility on this button — that
    is the pre-existing computed result. */
 .logs-search-bar-component .region-dropdown-btn {
diff --git a/web/src/plugins/logs/SearchHistory.vue b/web/src/plugins/logs/SearchHistory.vue
index 4d4149d592..ac97c11eca 100644
--- a/web/src/plugins/logs/SearchHistory.vue
+++ b/web/src/plugins/logs/SearchHistory.vue
@@ -31,7 +31,7 @@
         <OTooltip :content="t('search.messageWrapContent')" />
       </OButton>
       <div
-        class="text-status-warning-text border-status-warning-text rounded-default flex h-9 items-center border px-2"
+        class="text-status-warning-text border-status-warning-text rounded-default flex h-9 items-center border px-2 max-md:hidden"
       >
         <OIcon name="info" class="me-1" size="sm" />
         <div>
@@ -67,6 +67,14 @@
         </OButton>
       </div>
     </template>
+    <div
+      class="text-status-warning-text border-border-default flex shrink-0 items-center border-b px-3 py-1.5 text-xs md:hidden"
+    >
+      <OIcon name="info" class="me-1 shrink-0" size="sm" />
+      <div>
+        {{ t("search_history.delayMessage") }} <b>{{ delayMessage }}</b>
+      </div>
+    </div>
     <div class="bg-card-glass-bg min-h-0 flex-1 overflow-hidden">
       <OTable
         :frame="false"
@@ -254,7 +262,7 @@
 
         <template #bottom>
           <div class="flex h-12 w-full items-center justify-between">
-            <div class="flex w-25 items-center text-xs font-normal">
+            <div class="flex w-25 items-center text-xs font-normal max-md:hidden">
               {{ resultTotal }} {{ t("search_history.results") }}
             </div>
             <div class="ms-auto me-2">{{ t("logs.searchHistory.maxLimit") }} <b>1000</b></div>
diff --git a/web/src/plugins/logs/SearchJobInspector.vue b/web/src/plugins/logs/SearchJobInspector.vue
index cc4ed1fd12..fab377b94f 100644
--- a/web/src/plugins/logs/SearchJobInspector.vue
+++ b/web/src/plugins/logs/SearchJobInspector.vue
@@ -62,18 +62,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div class="flex min-h-0 w-full flex-1 flex-col overflow-hidden pt-2.5">
       <!-- Summary Stats Card -->
       <div v-if="!loading" class="mx-2.5 mb-2.5 shrink-0">
-        <div class="grid gap-3" style="grid-template-columns: 1fr 1fr 1fr 1.6fr 0.9fr">
+        <div
+          class="grid gap-3 max-md:grid-cols-5 max-md:gap-1.5 md:[grid-template-columns:1fr_1fr_1fr_1.6fr_0.9fr]"
+        >
           <!-- Results Returned -->
           <div class="stat-tile">
             <div
-              class="rounded-default bg-surface-base border-border-default flex h-28 flex-col justify-between border p-3"
+              class="rounded-default bg-surface-base border-border-default flex h-28 flex-col justify-between border p-3 max-md:h-auto max-md:items-center max-md:gap-1 max-md:p-1.5"
             >
               <div class="flex items-start justify-between">
-                <div class="font-small text-text-label text-base">
+                <div class="font-small text-text-label text-base max-md:hidden">
                   {{ t("logs.searchJobInspector.results") }}
                 </div>
                 <div
-                  class="rounded-default flex h-10 w-10 items-center justify-center border"
+                  class="rounded-default flex h-10 w-10 items-center justify-center border max-md:h-7 max-md:w-7"
                   style="
                     background: rgba(57, 126, 246, 0.2);
                     border-color: rgba(57, 126, 246, 0.35);
@@ -86,11 +88,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   />
                 </div>
               </div>
-              <div class="flex flex-col gap-1">
-                <div class="text-text-body text-2xl font-bold">
+              <div class="flex flex-col gap-1 max-md:max-w-full max-md:min-w-0 max-md:items-center">
+                <div
+                  class="text-text-body text-2xl font-bold max-md:max-w-full max-md:truncate max-md:text-sm"
+                >
                   {{ hasNoData ? raw("NA") : (profileData?.data_records || 0).toLocaleString() }}
                 </div>
-                <div class="text-3xs text-text-secondary">
+                <div class="text-3xs text-text-secondary max-md:hidden">
                   {{ t("logs.searchJobInspector.returnedFromQuery") }}
                 </div>
               </div>
@@ -100,14 +104,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Events Scanned -->
           <div class="stat-tile">
             <div
-              class="rounded-default bg-surface-base border-border-default flex h-28 flex-col justify-between border p-3"
+              class="rounded-default bg-surface-base border-border-default flex h-28 flex-col justify-between border p-3 max-md:h-auto max-md:items-center max-md:gap-1 max-md:p-1.5"
             >
               <div class="flex items-start justify-between">
-                <div class="font-small text-text-label text-base">
+                <div class="font-small text-text-label text-base max-md:hidden">
                   {{ t("logs.searchJobInspector.scannedEvents") }}
                 </div>
                 <div
-                  class="rounded-default flex h-10 w-10 items-center justify-center border"
+                  class="rounded-default flex h-10 w-10 items-center justify-center border max-md:h-7 max-md:w-7"
                   style="
                     background: rgba(57, 126, 246, 0.2);
                     border-color: rgba(57, 126, 246, 0.35);
@@ -120,11 +124,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   />
                 </div>
               </div>
-              <div class="flex flex-col gap-1">
-                <div class="text-text-body text-2xl font-bold">
+              <div class="flex flex-col gap-1 max-md:max-w-full max-md:min-w-0 max-md:items-center">
+                <div
+                  class="text-text-body text-2xl font-bold max-md:max-w-full max-md:truncate max-md:text-sm"
+                >
                   {{ hasNoData ? raw("NA") : (profileData?.scan_records || 0).toLocaleString() }}
                 </div>
-                <div class="text-3xs text-text-secondary">
+                <div class="text-3xs text-text-secondary max-md:hidden">
                   {{ t("logs.searchJobInspector.scannedEventsForQuery") }}
                 </div>
               </div>
@@ -134,14 +140,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Time Taken -->
           <div class="stat-tile">
             <div
-              class="rounded-default bg-surface-base border-border-default flex h-28 flex-col justify-between border p-3"
+              class="rounded-default bg-surface-base border-border-default flex h-28 flex-col justify-between border p-3 max-md:h-auto max-md:items-center max-md:gap-1 max-md:p-1.5"
             >
               <div class="flex items-start justify-between">
-                <div class="font-small text-text-label text-base">
+                <div class="font-small text-text-label text-base max-md:hidden">
                   {{ t("logs.searchJobInspector.timeTaken") }}
                 </div>
                 <div
-                  class="rounded-default flex h-10 w-10 items-center justify-center border"
+                  class="rounded-default flex h-10 w-10 items-center justify-center border max-md:h-7 max-md:w-7"
                   style="background: rgba(34, 197, 94, 0.2); border-color: rgba(34, 197, 94, 0.35)"
                 >
                   <svg
@@ -160,8 +166,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </svg>
                 </div>
               </div>
-              <div class="flex flex-col gap-1">
-                <div class="text-text-body text-2xl font-bold">
+              <div class="flex flex-col gap-1 max-md:max-w-full max-md:min-w-0 max-md:items-center">
+                <div
+                  class="text-text-body text-2xl font-bold max-md:max-w-full max-md:truncate max-md:text-sm"
+                >
                   {{
                     hasNoData
                       ? raw("NA")
@@ -169,7 +177,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   }}
                 </div>
                 <div
-                  class="text-3xs"
+                  class="text-3xs max-md:hidden"
                   :class="
                     hasNoData
                       ? 'text-text-secondary'
@@ -191,14 +199,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Trace ID -->
           <div class="stat-tile">
             <div
-              class="rounded-default bg-surface-base border-border-default flex h-28 flex-col justify-between border p-3"
+              class="rounded-default bg-surface-base border-border-default flex h-28 flex-col justify-between border p-3 max-md:h-auto max-md:items-center max-md:gap-1 max-md:p-1.5"
             >
               <div class="flex items-start justify-between">
-                <div class="font-small text-text-label text-base">
+                <div class="font-small text-text-label text-base max-md:hidden">
                   {{ t("logs.searchJobInspector.traceId") }}
                 </div>
                 <div
-                  class="rounded-default flex h-10 w-10 items-center justify-center border"
+                  class="rounded-default flex h-10 w-10 items-center justify-center border max-md:h-7 max-md:w-7"
                   style="
                     background: rgba(242, 220, 245, 0.25);
                     border-color: rgba(242, 220, 245, 0.45);
@@ -228,9 +236,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </svg>
                 </div>
               </div>
-              <div class="flex flex-col gap-1">
+              <div class="flex flex-col gap-1 max-md:max-w-full max-md:min-w-0 max-md:items-center">
                 <div
-                  class="truncate overflow-hidden font-mono text-sm leading-tight font-semibold"
+                  class="truncate overflow-hidden font-mono text-sm leading-tight font-semibold max-md:max-w-full max-md:text-xs"
                   :class="hasNoData ? 'text-text-secondary' : 'text-text-link'"
                 >
                   {{ hasNoData ? raw("NA") : traceId }}
@@ -243,7 +251,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- View Query -->
           <div class="stat-tile">
             <div
-              class="rounded-default bg-surface-base border-border-default flex h-28 flex-col items-center justify-center border p-3 transition-all"
+              class="rounded-default bg-surface-base border-border-default flex h-28 flex-col items-center justify-center border p-3 transition-all max-md:h-full max-md:p-1.5"
               :class="
                 hasNoData
                   ? 'cursor-not-allowed opacity-50'
@@ -252,7 +260,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               @click="!hasNoData && (showSqlDialog = true)"
             >
               <div
-                class="rounded-default mb-2 flex h-12 w-12 items-center justify-center border"
+                class="rounded-default mb-2 flex h-12 w-12 items-center justify-center border max-md:mb-0 max-md:h-7 max-md:w-7"
                 style="
                   background: rgba(245, 235, 147, 0.25);
                   border-color: rgba(245, 235, 147, 0.45);
diff --git a/web/src/plugins/logs/SearchResult.vue b/web/src/plugins/logs/SearchResult.vue
index e0be9695ae..ea0a20938e 100644
--- a/web/src/plugins/logs/SearchResult.vue
+++ b/web/src/plugins/logs/SearchResult.vue
@@ -21,7 +21,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div class="flex h-full max-h-full w-full flex-col overflow-hidden" ref="searchListContainer">
       <!-- Section header: static at top -->
       <div
-        class="border-card-glass-border bg-card-glass-bg flex h-9 shrink-0 items-center border-b"
+        class="border-card-glass-border bg-card-glass-bg flex h-9 shrink-0 items-center border-b max-md:h-auto max-md:min-h-9 max-md:flex-wrap max-md:gap-y-1 max-md:py-0.5"
       >
         <!-- Field panel toggle — same style as add-panel config sidebar -->
         <OButton
@@ -29,21 +29,25 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           size="icon-xs-sq"
           class="ms-1.5 shrink-0"
           data-test="logs-search-field-list-collapse-btn"
-          @click="toggleFieldList"
+          @click="isMobile ? $emit('open-mobile-fields') : toggleFieldList()"
         >
           <OIcon
             :name="
-              searchObj.meta.showFields
-                ? 'keyboard-double-arrow-left'
-                : 'keyboard-double-arrow-right'
+              isMobile
+                ? 'menu'
+                : searchObj.meta.showFields
+                  ? 'keyboard-double-arrow-left'
+                  : 'keyboard-double-arrow-right'
             "
             size="sm"
           />
           <OTooltip
             :content="
-              searchObj.meta.showFields
-                ? t('logs.searchResult.collapseFields')
-                : t('logs.searchResult.openFields')
+              isMobile
+                ? t('search.showFields')
+                : searchObj.meta.showFields
+                  ? t('logs.searchResult.collapseFields')
+                  : t('logs.searchResult.openFields')
             "
             side="bottom"
             shortcut-id="logsToggleSidebar"
@@ -60,7 +64,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
         <div
           v-else
-          class="text-warning flex min-w-0 flex-1 flex-wrap items-center gap-1.5 ps-2 text-left"
+          class="text-warning flex min-w-0 flex-1 flex-wrap items-center gap-1.5 ps-2 text-left max-md:min-w-32"
           data-test="logs-search-result-title"
           :data-search-state="
             searchObj.loading || searchObj.loadingCounter ? 'loading' : 'complete'
@@ -73,13 +77,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OTag type="logsResultChip" value="neutral" data-test="logs-result-records-chip">{{
                 recordsChips.records
               }}</OTag>
-              <OTag type="logsResultChip" value="info" data-test="logs-result-time-chip">{{
-                recordsChips.time
-              }}</OTag>
+              <OTag
+                type="logsResultChip"
+                value="info"
+                class="max-md:hidden"
+                data-test="logs-result-time-chip"
+                >{{ recordsChips.time }}</OTag
+              >
               <OTag
                 v-if="recordsChips.scan"
                 type="logsResultChip"
                 value="warn"
+                class="max-md:hidden"
                 data-test="logs-result-scan-chip"
                 >{{ recordsChips.scan }}</OTag
               >
@@ -99,7 +108,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OTag type="logsResultChip" value="neutral" data-test="logs-result-patterns-chip"
                 >{{ patternChips.patterns }} {{ t("logs.searchResult.patterns") }}</OTag
               >
-              <OTag type="logsResultChip" value="info" data-test="logs-result-pattern-time-chip"
+              <OTag
+                type="logsResultChip"
+                value="info"
+                class="max-md:hidden"
+                data-test="logs-result-pattern-time-chip"
                 >{{ patternChips.time }} {{ t("logs.searchResult.msUnit") }}</OTag
               >
             </template>
@@ -121,7 +134,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
         </div>
 
-        <div class="flex flex-none items-center justify-end gap-1 pe-2">
+        <div class="flex flex-none items-center justify-end gap-1 pe-2 max-md:ms-auto">
           <!-- OVERFLOW MENU (narrow): refresh + all action buttons collapse here -->
           <ODropdown v-if="shouldMoveActionsToMenu" side="bottom" align="end">
             <template #trigger>
@@ -875,6 +888,7 @@ import CellActions from "@/plugins/logs/data-table/CellActions.vue";
 import O2AIContextAddBtn from "@/components/common/O2AIContextAddBtn.vue";
 import { useLogsHighlighter } from "@/composables/useLogsHighlighter";
 import { extractStatusFromLog } from "@/utils/logs/statusParser";
+import useBreakpoint from "@/composables/useBreakpoint";
 import {
   buildPatternVolumeContext,
   fetchWindowTotal,
@@ -932,6 +946,7 @@ export default defineComponent({
     "sendToAiChat",
     "run-query",
     "jump-to-stream-data",
+    "open-mobile-fields",
   ],
   props: {
     expandedLogs: {
@@ -1139,6 +1154,7 @@ export default defineComponent({
     const { t } = useI18nTyped();
     const store = useStore();
     const { isDark } = useTheme();
+    const { isMobile } = useBreakpoint();
     const searchListContainer = ref<HTMLElement | null>(null);
 
     // Responsive: observe the outer container (reacts to splitter + window resize)
@@ -1188,7 +1204,7 @@ export default defineComponent({
       if (!parts) return null;
 
       return {
-        records: t("search.recordsChip", {
+        records: t(isMobile.value ? "search.recordsChipShort" : "search.recordsChip", {
           start: parts.start,
           end: parts.end,
           total: parts.total,
@@ -2366,6 +2382,7 @@ export default defineComponent({
     return {
       raw,
       isDark,
+      isMobile,
       t,
       store,
       config,
diff --git a/web/src/plugins/logs/SearchSchedulersList.vue b/web/src/plugins/logs/SearchSchedulersList.vue
index 3b84332da6..83d0d1c9ba 100644
--- a/web/src/plugins/logs/SearchSchedulersList.vue
+++ b/web/src/plugins/logs/SearchSchedulersList.vue
@@ -73,6 +73,7 @@
               variant="ghost"
               size="icon-sm"
               icon-left="cancel"
+              class="max-md:hidden"
               :title="t('search_scheduler_job.cancel')"
               :disabled="row.status_code !== 0 && row.status_code !== 1"
               @click="confirmCancelJob(row)"
@@ -84,6 +85,7 @@
               variant="ghost-destructive"
               size="icon-sm"
               icon-left="delete"
+              class="max-md:hidden"
               :title="t('search_scheduler_job.delete')"
               @click="confirmDeleteJob(row)"
             />
@@ -93,6 +95,7 @@
               variant="ghost"
               size="icon-sm"
               icon-left="refresh"
+              class="max-md:hidden"
               :title="t('search_scheduler_job.restart')"
               :disabled="row.status_code !== 2 && row.status_code !== 3"
               @click="retrySearchJob(row)"
@@ -103,10 +106,59 @@
               variant="ghost"
               size="icon-sm"
               icon-left="search"
+              class="max-md:hidden"
               :title="t('search_scheduler_job.explore')"
               :disabled="row.status_code == 0 || row.status_code == 3"
               @click="fetchSearchResults(row)"
             />
+            <ODropdown side="bottom" align="end">
+              <template #trigger>
+                <OButton
+                  icon-left="more-vert"
+                  variant="ghost"
+                  size="icon-xs-sq"
+                  class="md:hidden"
+                  data-test="search-scheduler-row-more-actions"
+                  @click.stop
+                />
+              </template>
+              <ODropdownItem
+                icon-left="cancel"
+                class="md:hidden"
+                :disabled="row.status_code !== 0 && row.status_code !== 1"
+                data-test="search-scheduler-cancel-btn-menu"
+                @select="confirmCancelJob(row)"
+              >
+                <span>{{ t("search_scheduler_job.cancel") }}</span>
+              </ODropdownItem>
+              <ODropdownItem
+                icon-left="delete"
+                variant="destructive"
+                class="md:hidden"
+                data-test="search-scheduler-delete-btn-menu"
+                @select="confirmDeleteJob(row)"
+              >
+                <span>{{ t("search_scheduler_job.delete") }}</span>
+              </ODropdownItem>
+              <ODropdownItem
+                icon-left="refresh"
+                class="md:hidden"
+                :disabled="row.status_code !== 2 && row.status_code !== 3"
+                data-test="search-scheduler-restart-btn-menu"
+                @select="retrySearchJob(row)"
+              >
+                <span>{{ t("search_scheduler_job.restart") }}</span>
+              </ODropdownItem>
+              <ODropdownItem
+                icon-left="search"
+                class="md:hidden"
+                :disabled="row.status_code == 0 || row.status_code == 3"
+                data-test="search-scheduler-explore-btn-menu"
+                @select="fetchSearchResults(row)"
+              >
+                <span>{{ t("search_scheduler_job.explore") }}</span>
+              </ODropdownItem>
+            </ODropdown>
           </template>
           <template #expansion="{ row }">
             <div class="app-tabs-schedule-list h-fit w-fit px-4 py-2">
@@ -230,10 +282,10 @@
           </template>
           <template #bottom>
             <div class="flex h-12 w-full items-center justify-between">
-              <div class="flex w-25 items-center text-xs font-normal">
+              <div class="flex w-25 items-center text-xs font-normal max-md:hidden">
                 {{ resultTotal }} {{ t("search_scheduler_job.results") }}
               </div>
-              <div class="ms-auto me-2">
+              <div class="ms-auto me-2 max-md:hidden">
                 {{ t("search_scheduler_job.max_limit") }} :
                 <b>1000</b>
               </div>
@@ -293,6 +345,8 @@ import AppTabs from "@/components/common/AppTabs.vue";
 import config from "@/aws-exports";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import { toast } from "@/lib/feedback/Toast/useToast";
@@ -313,6 +367,8 @@ export default defineComponent({
     AppTabs,
     OButton,
     OTooltip,
+    ODropdown,
+    ODropdownItem,
     QueryEditor: defineAsyncComponent(() => import("@/components/CodeQueryEditor.vue")),
     OIcon,
     OPageLayout,
diff --git a/web/src/plugins/metrics/explorer/MetricCard.vue b/web/src/plugins/metrics/explorer/MetricCard.vue
index 0329ed8656..30ddbf2a09 100644
--- a/web/src/plugins/metrics/explorer/MetricCard.vue
+++ b/web/src/plugins/metrics/explorer/MetricCard.vue
@@ -79,7 +79,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
              leaves the tab order, and this reveal is focus-driven too: tabbing
              into the first (invisible) action expands the row for keyboards. -->
         <div
-          class="flex w-0 flex-nowrap items-center overflow-hidden opacity-0 group-focus-within:w-auto group-focus-within:opacity-100 group-hover:w-auto group-hover:opacity-100"
+          class="flex w-0 flex-nowrap items-center overflow-hidden opacity-0 group-focus-within:w-auto group-focus-within:opacity-100 group-hover:w-auto group-hover:opacity-100 max-md:w-auto max-md:opacity-100"
           :data-test="`metrics-explorer-card-actions-${card.name}`"
         >
           <!-- Help — the SAME element the dashboard panel bar uses for its panel
@@ -180,7 +180,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :class="
             preview?.cachedDataDiffersFromTimeRange
               ? 'flex items-center'
-              : 'flex w-0 items-center overflow-hidden opacity-0 group-focus-within:w-auto group-focus-within:opacity-100 group-hover:w-auto group-hover:opacity-100'
+              : 'flex w-0 items-center overflow-hidden opacity-0 group-focus-within:w-auto group-focus-within:opacity-100 group-hover:w-auto group-hover:opacity-100 max-md:w-auto max-md:opacity-100'
           "
         >
           <OButton
diff --git a/web/src/plugins/metrics/explorer/MetricsExplorer.vue b/web/src/plugins/metrics/explorer/MetricsExplorer.vue
index 3c3bb8c366..8be138f065 100644
--- a/web/src/plugins/metrics/explorer/MetricsExplorer.vue
+++ b/web/src/plugins/metrics/explorer/MetricsExplorer.vue
@@ -31,14 +31,37 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- `p-1.5`, the SAME padding the Logs and Traces toolbars use
          (SearchBar.vue:23 / traces SearchBar.vue:19), so the toolbars share geometry. -->
     <div
-      class="border-border-default flex shrink-0 items-center gap-2 border-b p-1.5"
+      class="border-border-default flex shrink-0 items-center gap-2 border-b p-1.5 max-md:flex-wrap max-md:gap-x-1 max-md:gap-y-1"
       data-test="metrics-explorer-filter-bar"
     >
       <!-- Page mode toggle at the start of the toolbar — Explore (browse grid)
            vs Visualize (query workspace). Same OToggleGroup + icon-left pattern
            the Logs (Search/Visualize) and Traces toolbars use, so the mode
            switch reads identically across the observability pages. -->
+      <ODropdown v-if="isMobile" side="bottom" align="start">
+        <template #trigger>
+          <OButton
+            data-test="metrics-explorer-mode-dropdown-btn"
+            size="sm-toolbar"
+            variant="outline"
+            icon-right="arrow-drop-down"
+          >
+            <OIcon :name="currentModeOption.icon" size="sm" class="shrink-0" />
+            {{ currentModeOption.label }}
+          </OButton>
+        </template>
+        <ODropdownItem
+          v-for="opt in modeOptions"
+          :key="opt.value"
+          :data-test="`metrics-explorer-mode-${opt.value}-item`"
+          @select="setMode(opt.value)"
+        >
+          <template #icon-left><OIcon :name="opt.icon" size="sm" /></template>
+          {{ opt.label }}
+        </ODropdownItem>
+      </ODropdown>
       <OToggleGroup
+        v-else
         :model-value="mode"
         type="single"
         class="shrink-0"
@@ -73,15 +96,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <!-- The filter control has its own row below (see `metrics-explorer-
            filter-row`). This spacer is what pins the time cluster right. -->
-      <div class="flex-1" />
+      <div class="flex-1 max-md:hidden" />
 
-      <div class="flex shrink-0 items-center gap-2">
+      <div class="flex shrink-0 items-center gap-2 max-md:ms-auto max-md:gap-1">
         <DateTimePickerDashboard
           ref="dateTimePickerRef"
           v-model="selectedDate"
           @on:date-change="onDateChange"
         />
-        <AutoRefreshInterval v-model="refreshInterval" trigger @trigger="onRefreshTick" />
+        <AutoRefreshInterval
+          v-model="refreshInterval"
+          trigger
+          :is-compact="isMobile"
+          @trigger="onRefreshTick"
+        />
         <!-- Labeled Refresh button. In Visualize it re-runs the chart's query;
              in Explore/Workspace it refreshes the grid — so its
              disabled/loading state follows the grid only there. -->
@@ -94,7 +122,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           data-test="metrics-explorer-refresh"
           @click="() => onRefresh()"
         >
-          {{ t("metrics.explorer.refresh") }}
+          <span class="max-md:hidden">{{ t("metrics.explorer.refresh") }}</span>
           <OTooltip :content="t('metrics.explorer.refresh')" shortcut-id="metricsRefresh" />
         </OButton>
         <ShareButton
@@ -142,13 +170,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- EXPLORE + FAVOURITES — the same browse grid. Favourites is that grid
          narrowed to the metrics you ♥'d, so the body is identical bar the facet
          panel (Explore only): the right column is the search row + grid. -->
-    <div v-if="isGridMode" class="flex min-h-0 flex-1">
+    <div v-if="isGridMode" class="flex min-h-0 flex-1 max-md:flex-col">
       <!-- Facet panel — EXPLORE only. It is an editing control (filter by
            prefix/suffix/type); Workspace is a read-only lens viewer, so it shows
            just the grid (with the Views rail), no facets. -->
       <aside
         v-if="isExplore"
-        class="border-border-default flex min-h-0 w-60 flex-none flex-col border-e"
+        class="border-border-default flex min-h-0 w-60 flex-none flex-col border-e max-md:h-52 max-md:w-full max-md:border-e-0 max-md:border-b"
         :aria-label="t('metrics.explorer.railsAriaLabel')"
       >
         <!-- Panel header: the facet selector, stretched to fill the column.
@@ -284,7 +312,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
            the cards (not the full page), and the facet panel to its left runs
            the full height alongside it. -->
       <div class="flex min-h-0 min-w-0 flex-1 flex-col">
-        <div class="border-border-default flex items-center gap-2 border-b px-3 py-2">
+        <div
+          class="border-border-default flex items-center gap-2 border-b px-3 py-2 max-md:flex-wrap max-md:gap-y-1"
+        >
           <!-- The scope toggle lives INSIDE the field, the way the dashboard
                list's folder scope does: it is a property of the search — which
                metrics you are looking through — not another control beside it. -->
@@ -295,7 +325,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :debounce="200"
             :placeholder="t('metrics.explorer.searchPlaceholder')"
             data-test="metrics-explorer-search"
-            class="min-w-0 flex-1"
+            class="min-w-0 flex-1 max-md:basis-full"
           >
             <template #icon-right>
               <OToggleGroup
@@ -569,6 +599,9 @@ import type { EmptyStateAction } from "@/lib/core/EmptyState/presets";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OToggleGroup from "@/lib/core/ToggleGroup/OToggleGroup.vue";
 import OToggleGroupItem from "@/lib/core/ToggleGroup/OToggleGroupItem.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
+import useBreakpoint from "@/composables/useBreakpoint";
 
 import ShareButton from "@/components/common/ShareButton.vue";
 import MetricCard from "./MetricCard.vue";
@@ -642,6 +675,8 @@ export default defineComponent({
     OTooltip,
     OToggleGroup,
     OToggleGroupItem,
+    ODropdown,
+    ODropdownItem,
     ShareButton,
     MetricCard,
     MetricsVisualize,
@@ -772,6 +807,19 @@ export default defineComponent({
       mode.value = v;
     };
 
+    const { isMobile } = useBreakpoint();
+    const modeOptions = computed(
+      () =>
+        [
+          { value: "explore", icon: "search", label: t("metrics.explorer.modeExplore") },
+          { value: "visualize", icon: "build", label: t("metrics.explorer.modeVisualize") },
+          { value: "workspace", icon: "star-outline", label: t("metrics.explorer.modeWorkspace") },
+        ] as const,
+    );
+    const currentModeOption = computed(
+      () => modeOptions.value.find((o) => o.value === mode.value) ?? modeOptions.value[0],
+    );
+
     // The Favourites tab = only the metrics you ♥'d. So it forces the
     // favourites-only narrowing; Explore browses everything. `showFavoritesOnly`
     // is the existing narrowing mechanism — the mode drives it.
@@ -1808,6 +1856,9 @@ export default defineComponent({
       isWorkspace,
       isGridMode,
       setMode,
+      isMobile,
+      modeOptions,
+      currentModeOption,
       noDataHiddenLabel,
       noMatchDescription,
       noMatchActions,
diff --git a/web/src/plugins/pipelines/PipelineFlow.spec.ts b/web/src/plugins/pipelines/PipelineFlow.spec.ts
index 3ce51d8d02..8741ce4eaf 100644
--- a/web/src/plugins/pipelines/PipelineFlow.spec.ts
+++ b/web/src/plugins/pipelines/PipelineFlow.spec.ts
@@ -16,7 +16,13 @@
 import { mount, flushPromises } from "@vue/test-utils";
 import { describe, expect, it, beforeEach, afterEach, vi } from "vitest";
 import PipelineFlow from "./PipelineFlow.vue";
-import { nextTick } from "vue";
+import { nextTick, reactive } from "vue";
+
+const breakpoint = vi.hoisted(() => ({ lgUp: { value: true } }));
+const dnd = vi.hoisted(() => ({ pipelineObj: null as any }));
+vi.mock("@/composables/useBreakpoint", () => ({
+  default: () => ({ lgUp: breakpoint.lgUp }),
+}));
 
 // Mock dependencies
 vi.mock("@/utils/zincutils", () => ({
@@ -141,7 +147,7 @@ let mockValidateConnection: any;
 
 vi.mock("./useDnD", () => ({
   default: () => {
-    mockPipelineObj = {
+    mockPipelineObj = dnd.pipelineObj ?? {
       currentSelectedPipeline: {
         nodes: [],
         edges: [],
@@ -184,6 +190,9 @@ describe("PipelineFlow.vue", () => {
     mockZoomOut.mockClear();
     mockSetViewport.mockClear();
 
+    breakpoint.lgUp.value = true;
+    dnd.pipelineObj = null;
+
     // Reset mock pipelineObj for each test
     mockPipelineObj = {
       currentSelectedPipeline: {
@@ -535,4 +544,56 @@ describe("PipelineFlow.vue", () => {
     expect(warningText.text()).toContain("Unsaved changes detected");
     expect(warningText.find('[data-test-stub="o-icon"]').exists()).toBe(true);
   });
+
+  describe("re-fit after the mount-time fit", () => {
+    const mountAndSettle = async () => {
+      dnd.pipelineObj = reactive({
+        currentSelectedPipeline: { nodes: [], edges: [] },
+        dirtyFlag: false,
+        isDragOver: false,
+      });
+      wrapper = mountComponent();
+      wrapper.vm.vueFlowRef = { fitView: mockFitView };
+      await new Promise((resolve) => setTimeout(resolve, 150));
+      mockFitView.mockClear();
+    };
+
+    it("does not re-fit when the user adds a node below lg", async () => {
+      breakpoint.lgUp.value = false;
+      await mountAndSettle();
+
+      wrapper.vm.pipelineObj.currentSelectedPipeline.nodes.push({ id: "n1" });
+      await nextTick();
+      // The re-render re-binds the template ref, so the fitView spy goes back on after it.
+      wrapper.vm.vueFlowRef = { fitView: mockFitView };
+      await new Promise((resolve) => setTimeout(resolve, 150));
+
+      expect(mockFitView).not.toHaveBeenCalled();
+    });
+
+    it("re-fits when a saved pipeline loads below lg", async () => {
+      breakpoint.lgUp.value = false;
+      await mountAndSettle();
+
+      wrapper.vm.pipelineObj.currentSelectedPipeline = { nodes: [{ id: "n1" }], edges: [] };
+      await nextTick();
+      // The re-render re-binds the template ref, so the fitView spy goes back on after it.
+      wrapper.vm.vueFlowRef = { fitView: mockFitView };
+      await new Promise((resolve) => setTimeout(resolve, 150));
+
+      expect(mockFitView).toHaveBeenCalledWith({ padding: 1 });
+    });
+
+    it("does not re-fit a loaded pipeline on desktop", async () => {
+      await mountAndSettle();
+
+      wrapper.vm.pipelineObj.currentSelectedPipeline = { nodes: [{ id: "n1" }], edges: [] };
+      await nextTick();
+      // The re-render re-binds the template ref, so the fitView spy goes back on after it.
+      wrapper.vm.vueFlowRef = { fitView: mockFitView };
+      await new Promise((resolve) => setTimeout(resolve, 150));
+
+      expect(mockFitView).not.toHaveBeenCalled();
+    });
+  });
 });
diff --git a/web/src/plugins/pipelines/PipelineFlow.vue b/web/src/plugins/pipelines/PipelineFlow.vue
index 15926ba16b..cec8337324 100644
--- a/web/src/plugins/pipelines/PipelineFlow.vue
+++ b/web/src/plugins/pipelines/PipelineFlow.vue
@@ -164,6 +164,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script lang="ts">
 import { ref, onMounted, watch, computed } from "vue";
 import type { Ref } from "vue";
+import useBreakpoint from "@/composables/useBreakpoint";
 import { VueFlow, useVueFlow } from "@vue-flow/core";
 import type { VueFlowStore } from "@vue-flow/core";
 import { Controls, ControlButton } from "@vue-flow/controls";
@@ -271,15 +272,25 @@ export default {
         }
       },
     );
+    const fitToNodes = () => {
+      if (!vueFlowRef.value) return;
+      if (pipelineObj.currentSelectedPipeline.nodes.length > 4) {
+        vueFlowRef.value.fitView({ padding: 0.1 });
+      } else {
+        vueFlowRef.value.fitView({ padding: 1 });
+      }
+    };
     onMounted(async () => {
-      setTimeout(() => {
-        if (vueFlowRef.value && pipelineObj.currentSelectedPipeline.nodes.length > 4) {
-          vueFlowRef.value.fitView({ padding: 0.1 });
-        } else if (vueFlowRef.value) {
-          vueFlowRef.value.fitView({ padding: 1 });
-        }
-      }, 100);
+      setTimeout(fitToNodes, 100);
     });
+    // < lg a loaded pipeline (a new object, not a node pushed by the user) re-fits: desktop-saved coordinates land off-screen.
+    const { lgUp } = useBreakpoint();
+    watch(
+      () => pipelineObj.currentSelectedPipeline,
+      (pipeline) => {
+        if (!lgUp.value && pipeline?.nodes?.length) setTimeout(fitToNodes, 100);
+      },
+    );
 
     function resetTransform() {
       setViewport({ x: 0, y: 0, zoom: 1 });
diff --git a/web/src/plugins/traces/Index.vue b/web/src/plugins/traces/Index.vue
index 2cc620bca3..a6a4e700c7 100644
--- a/web/src/plugins/traces/Index.vue
+++ b/web/src/plugins/traces/Index.vue
@@ -42,7 +42,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         }"
         :before-class="
           activeTab === 'service-graph' || activeTab === 'services-catalog'
-            ? 'z-auto overflow-visible max-h-[3.125rem]!'
+            ? 'z-auto overflow-visible max-h-[3.125rem]! max-md:h-auto! max-md:max-h-none!'
             : 'z-auto overflow-visible'
         "
         @update:model-value="onSplitterUpdate"
@@ -108,7 +108,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <!-- Note: Splitter max-height to be dynamically calculated with JS -->
               <OSplitter
                 v-model="searchObj.config.splitterModel"
-                :limits="searchObj.config.splitterLimit"
+                :limits="isMobile ? [0, 0] : searchObj.config.splitterLimit"
                 separatorClass="w-px"
                 @update:model-value="onSplitterUpdate"
                 class="h-full w-full"
@@ -116,7 +116,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <template #before>
                   <div class="border-border-default bg-surface-panel h-full border-e">
                     <IndexList
-                      v-show="searchObj.meta.showFields"
+                      v-show="searchObj.meta.showFields && !isMobile"
                       ref="indexListRef"
                       :field-list="searchObj.data.stream.selectedStreamFields"
                       :active-include-field-values="activeIncludeFilterValues"
@@ -263,6 +263,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         @error-only-toggled="onErrorOnlyToggled"
                         @ask-ai="onAskAiTracing"
                         @send-to-ai-chat="sendToAiChat"
+                        @open-mobile-fields="mobileFieldsOpen = true"
                       />
                     </div>
                   </div>
@@ -274,6 +275,30 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </OSplitter>
     </div>
 
+    <ODrawer
+      v-if="isMobile"
+      v-model:open="mobileFieldsOpen"
+      side="left"
+      size="sm"
+      bleed
+      seamless
+      anchor="#tracesThirdLevel"
+      data-test="traces-mobile-fields-drawer"
+    >
+      <div class="flex h-full flex-col overflow-hidden pt-2.5">
+        <IndexList
+          :field-list="searchObj.data.stream.selectedStreamFields"
+          :active-include-field-values="activeIncludeFilterValues"
+          :active-exclude-field-values="activeExcludeFilterValues"
+          data-test="traces-search-index-list-mobile"
+          class="h-full"
+          :key="searchObj.data.stream.streamLists"
+          @update:changeStream="onChangeStream"
+          @update:selectedFields="updateFieldVisibility"
+        />
+      </div>
+    </ODrawer>
+
     <ODialog
       v-model:open="streamChangeDialog.show"
       :title="t('traces.index.changeStreamTitle')"
@@ -341,6 +366,8 @@ import { resolveTraceSearchMode, type TraceSearchMode } from "@/ts/interfaces/tr
 import { isLLMTrace } from "@/utils/llmUtils";
 import OButton from "@/lib/core/Button/OButton.vue";
 import ODialog from "@/lib/overlay/Dialog/ODialog.vue";
+import ODrawer from "@/lib/overlay/Drawer/ODrawer.vue";
+import useBreakpoint from "@/composables/useBreakpoint";
 import OSplitter from "@/lib/core/Splitter/OSplitter.vue";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import OSpinner from "@/lib/feedback/Spinner/OSpinner.vue";
@@ -408,6 +435,34 @@ const serviceGraphRef = ref<any>(null);
 const servicesCatalogRef = ref<any>(null);
 const splitterModel = ref(90);
 const fieldValues = ref({});
+
+const { isMobile, isTablet } = useBreakpoint();
+const mobileFieldsOpen = ref(false);
+watch(
+  isMobile,
+  (mobile, wasMobile) => {
+    if (mobile) {
+      searchObj.config.splitterModel = 0;
+      splitterModel.value = 150;
+    } else if (wasMobile) {
+      if (searchObj.config.splitterModel === 0 && searchObj.meta.showFields) {
+        searchObj.config.splitterModel = searchObj.config.lastSplitterPosition || 20;
+      }
+      splitterModel.value = 90;
+    }
+  },
+  { immediate: true },
+);
+// md–lg: the desktop 20% pane is ~140px, too narrow for the stream picker.
+watch(
+  isTablet,
+  (tablet) => {
+    if (tablet && searchObj.config.splitterModel > 0 && searchObj.config.splitterModel < 30) {
+      searchObj.config.splitterModel = 30;
+    }
+  },
+  { immediate: true },
+);
 const { showErrorNotification } = useNotifications();
 const disableMoreErrorDetails = ref(false);
 const toggleErrorDetails = () => {
@@ -1551,6 +1606,16 @@ const onJumpToPanelStreamData = (fromUs: number, toUs: number) => {
 };
 
 const onSelectTracesStream = () => {
+  // < md the stream selector lives in the fields drawer, so it must open before the trigger can focus.
+  if (isMobile.value) {
+    mobileFieldsOpen.value = true;
+    setTimeout(() => {
+      document
+        .querySelector<HTMLElement>('[data-test="log-search-index-list-select-stream"] button')
+        ?.click();
+    }, 300);
+    return;
+  }
   const trigger = document.querySelector<HTMLElement>(
     '[data-test="log-search-index-list-select-stream"] button',
   );
diff --git a/web/src/plugins/traces/IndexList.vue b/web/src/plugins/traces/IndexList.vue
index e695c0b993..ae1996a58c 100644
--- a/web/src/plugins/traces/IndexList.vue
+++ b/web/src/plugins/traces/IndexList.vue
@@ -689,6 +689,13 @@ export default defineComponent({
   table-layout: fixed;
 }
 
+/* Touch has no hover — keep the field quick-actions visible. */
+@media (max-width: 47.99rem) {
+  .index-menu :deep(.field_list .field_overlay) {
+    visibility: visible;
+  }
+}
+
 .index-table :deep(table .field-container:hover .field_overlay) {
   visibility: visible;
 }
diff --git a/web/src/plugins/traces/LLMInsightsDashboard.vue b/web/src/plugins/traces/LLMInsightsDashboard.vue
index 16dae7b3d8..7fffd55391 100644
--- a/web/src/plugins/traces/LLMInsightsDashboard.vue
+++ b/web/src/plugins/traces/LLMInsightsDashboard.vue
@@ -186,7 +186,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div
             v-for="card in kpiCards"
             :key="card.label"
-            class="bg-card-glass-bg rounded-default border-border-default flex flex-col gap-1 border px-3.5 py-2.5"
+            class="bg-card-glass-bg rounded-default border-border-default flex flex-col gap-1 border px-3.5 py-2.5 max-lg:shrink-0 max-lg:basis-auto max-lg:px-1.5 max-lg:py-1"
+            :title="lgUp ? undefined : card.label"
           >
             <!-- P95 rides its own (slower) query — skeleton the WHOLE card while
                it loads, matching the initial strip skeleton tile (see
@@ -200,10 +201,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OSkeleton type="text" class="h-6 w-[55%]" />
             </template>
             <template v-else>
-              <div class="flex flex-col gap-1">
-                <div class="mb-1 flex items-center justify-between gap-2">
+              <div
+                class="flex flex-col gap-1 max-lg:flex-row-reverse max-lg:items-center max-lg:gap-1.5"
+              >
+                <div class="mb-1 flex items-center justify-between gap-2 max-lg:mb-0">
                   <div
-                    class="text-2xs text-text-secondary min-w-0 truncate leading-normal font-semibold"
+                    class="text-2xs text-text-secondary min-w-0 truncate leading-normal font-semibold max-lg:hidden"
                   >
                     {{ card.label }}
                   </div>
@@ -214,7 +217,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </span>
                 </div>
                 <div class="flex items-baseline gap-[0.2rem]">
-                  <span class="text-text-secondary text-2xl leading-none font-bold">
+                  <span class="text-text-secondary text-2xl leading-none font-bold max-lg:text-lg">
                     {{ card.value }}
                   </span>
                   <span v-if="card.unit" class="text-compact text-text-secondary font-semibold">
@@ -227,7 +230,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :data="card.sparkData"
                 :color="card.sparkColor"
                 :height="32"
-                class="mt-auto"
+                class="mt-auto max-lg:hidden"
               />
             </template>
           </div>
@@ -286,6 +289,7 @@ import type { AcceptableValue } from "reka-ui";
 import { useRoute, useRouter } from "vue-router";
 import { useStore } from "vuex";
 import { raw, useI18nTyped, type I18nText } from "@/types/i18n";
+import useBreakpoint from "@/composables/useBreakpoint";
 import { useLLMInsights } from "./composables/useLLMInsights";
 import { splitNumberWithUnit, splitDuration, splitCost } from "./llmInsightsDashboard.utils";
 import KpiSparkline from "./KpiSparkline.vue";
@@ -312,6 +316,7 @@ import { useVersionCompare } from "./composables/useVersionCompare";
 import config from "@/aws-exports";
 
 const { t } = useI18nTyped();
+const { lgUp } = useBreakpoint();
 const { getStreams } = useStreams(t);
 const router = useRouter();
 const route = useRoute();
diff --git a/web/src/plugins/traces/SearchBar.vue b/web/src/plugins/traces/SearchBar.vue
index 188dbe22a1..87001987db 100644
--- a/web/src/plugins/traces/SearchBar.vue
+++ b/web/src/plugins/traces/SearchBar.vue
@@ -16,10 +16,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div class="search-bar-component flex h-full flex-col pb-px" id="searchBarComponent">
-    <div class="border-border-default m-0! flex w-full items-center justify-between border-b p-1.5">
+    <div
+      class="border-border-default m-0! flex w-full items-center justify-between border-b p-1.5 max-lg:flex-wrap max-lg:gap-y-1"
+    >
       <div
         ref="toolbarLeftRef"
-        class="flex min-w-0 flex-1 flex-row items-center gap-1.5 overflow-hidden"
+        class="flex min-w-0 flex-1 flex-row items-center gap-1.5 overflow-hidden max-lg:w-full max-lg:flex-none max-lg:flex-wrap max-lg:gap-y-1 max-lg:overflow-visible"
       >
         <!-- Unified View Toggle: Service Graph / Traces / Spans -->
         <OToggleGroup
@@ -109,6 +111,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               variant="outline"
               size="xs"
               icon-left="more-horiz"
+              class="max-lg:ms-auto"
             >
               {{ t("search.menuMore") }}
             </OButton>
@@ -122,13 +125,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </ODropdown>
       </div>
       <!-- Right toolbar — persistent wrapper so toolbarRightRef is always observable -->
-      <div ref="toolbarRightRef" class="flex flex-shrink-0 items-center">
+      <div
+        ref="toolbarRightRef"
+        class="flex flex-shrink-0 items-center max-lg:w-full max-lg:justify-end"
+      >
         <div
           v-if="
             searchObj.meta.searchMode !== 'service-graph' &&
             searchObj.meta.searchMode !== 'services-catalog'
           "
-          class="flex items-center gap-1.5"
+          class="flex items-center gap-1.5 max-lg:w-full"
         >
           <DateTime
             ref="dateTimeRef"
@@ -143,7 +149,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             data-test="logs-search-bar-date-time-dropdown"
             :queryRangeRestrictionInHour="searchObj.data.datetime.queryRangeRestrictionInHour"
             :queryRangeRestrictionMsg="searchObj.data.datetime.queryRangeRestrictionMsg"
-            class="h-8"
+            class="h-8 max-lg:me-auto"
             @on:date-change="updateDateTime"
             @on:timezone-change="updateTimezone"
           />
@@ -248,8 +254,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
 
         <!-- Service Graph right toolbar: DateTime, Refresh, Tree/Graph tabs, Layout -->
-        <div v-if="searchObj.meta.searchMode === 'service-graph'" class="ms-auto">
-          <div class="flex items-center gap-2">
+        <div v-if="searchObj.meta.searchMode === 'service-graph'" class="ms-auto max-lg:ms-0">
+          <div class="flex items-center gap-2 max-lg:w-full max-lg:justify-end max-lg:gap-1.5">
             <DateTime
               ref="dateTimeRef"
               auto-apply
@@ -281,18 +287,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <template #icon-left>
                   <OIcon name="git-branch" size="sm" />
                 </template>
-                {{ t("traces.treeView") }}
+                <span class="max-lg:hidden">{{ t("traces.treeView") }}</span>
               </OToggleGroupItem>
               <OToggleGroupItem data-test="service-graph-graph-view-btn" value="graph" size="sm">
                 <template #icon-left><OIcon name="share" size="sm" class="shrink-0" /></template>
-                {{ t("traces.graphView") }}
+                <span class="max-lg:hidden">{{ t("traces.graphView") }}</span>
               </OToggleGroupItem>
             </OToggleGroup>
             <OSelect
               v-model="searchObj.meta.serviceGraphLayoutType"
               :options="serviceGraphLayoutOptions"
               :searchable="false"
-              class="h-8! min-h-8! w-[7.5rem]"
+              class="h-8! min-h-8! w-[7.5rem] max-lg:w-24!"
               :disabled="searchObj.meta.serviceGraphVisualizationType === 'graph'"
               @update:model-value="onServiceGraphLayoutChange"
             />
diff --git a/web/src/plugins/traces/SearchResult.spec.ts b/web/src/plugins/traces/SearchResult.spec.ts
index dd8b0bd926..71b1c9ede5 100644
--- a/web/src/plugins/traces/SearchResult.spec.ts
+++ b/web/src/plugins/traces/SearchResult.spec.ts
@@ -375,6 +375,7 @@ describe("SearchResult", () => {
         "error-only-toggled",
         "ask-ai",
         "send-to-ai-chat",
+        "open-mobile-fields",
       ];
 
       expect(wrapper.vm.$options.emits).toEqual(expectedEmits);
diff --git a/web/src/plugins/traces/SearchResult.vue b/web/src/plugins/traces/SearchResult.vue
index 6c5d34ba7d..b0b15e4439 100644
--- a/web/src/plugins/traces/SearchResult.vue
+++ b/web/src/plugins/traces/SearchResult.vue
@@ -28,7 +28,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         "
         ref="sectionHeaderRef"
         data-test="traces-section-header"
-        class="border-border-default flex h-9 shrink-0 items-center border-b px-[0.4rem]!"
+        class="border-border-default flex h-9 shrink-0 items-center border-b px-[0.4rem]! max-md:h-auto max-md:min-h-9 max-md:flex-wrap max-md:gap-y-1 max-md:py-0.5"
       >
         <!-- Field panel toggle — same style as logs page -->
         <OButton
@@ -36,19 +36,25 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           size="icon-xs-sq"
           class="me-1.5 shrink-0"
           data-test="traces-search-field-list-collapse-btn"
-          @click="toggleFieldList"
+          @click="isMobile ? $emit('open-mobile-fields') : toggleFieldList()"
         >
           <OIcon
             :name="
-              searchObj.meta.showFields
-                ? 'keyboard-double-arrow-left'
-                : 'keyboard-double-arrow-right'
+              isMobile
+                ? 'menu'
+                : searchObj.meta.showFields
+                  ? 'keyboard-double-arrow-left'
+                  : 'keyboard-double-arrow-right'
             "
             size="sm"
           />
           <OTooltip
             :content="
-              searchObj.meta.showFields ? t('traces.collapseFields') : t('traces.openFields')
+              isMobile
+                ? t('traces.openFields')
+                : searchObj.meta.showFields
+                  ? t('traces.collapseFields')
+                  : t('traces.openFields')
             "
             side="bottom"
           />
@@ -234,6 +240,7 @@ import { useStore } from "vuex";
 import { useI18nTyped } from "@/types/i18n";
 
 import useTraces from "../../composables/useTraces";
+import useBreakpoint from "@/composables/useBreakpoint";
 import { useRouter } from "vue-router";
 import TracesSearchResultList from "./components/TracesSearchResultList.vue";
 import { formatLargeNumber } from "../../utils/zincutils";
@@ -294,6 +301,7 @@ export default defineComponent({
     "error-only-toggled",
     "ask-ai",
     "send-to-ai-chat",
+    "open-mobile-fields",
   ],
   methods: {
     toggleErrorOnly() {
@@ -319,6 +327,7 @@ export default defineComponent({
     const { t } = useI18nTyped();
     const store = useStore();
     const router = useRouter();
+    const { isMobile } = useBreakpoint();
 
     const { searchObj, updatedLocalLogFilterField } = useTraces();
 
@@ -469,6 +478,7 @@ export default defineComponent({
     return {
       t,
       store,
+      isMobile,
       searchObj,
       updatedLocalLogFilterField,
       metricsDashboardRef,
diff --git a/web/src/plugins/traces/ServiceGraph.vue b/web/src/plugins/traces/ServiceGraph.vue
index f5d3676504..7dd84fbc35 100644
--- a/web/src/plugins/traces/ServiceGraph.vue
+++ b/web/src/plugins/traces/ServiceGraph.vue
@@ -1,7 +1,7 @@
 <template>
   <OCard class="flex h-full flex-col">
     <!-- Top toolbar: [stream-selector] [search-input]  ···spacer···  [legends] -->
-    <div class="flex items-center gap-2 p-1.5 pb-0">
+    <div class="flex items-center gap-2 p-1.5 pb-0 max-lg:flex-wrap max-lg:gap-y-1">
       <!-- Stream selector (hidden when a parent drives selection, e.g. the
            Agent Graph page which selects by agent). -->
       <div
@@ -27,7 +27,7 @@
       <div v-if="!hideSearchInput" data-test="service-graph-search-input">
         <OSearchInput
           v-model="searchFilter"
-          class="w-56!"
+          class="w-56! max-lg:w-40!"
           :placeholder="t('traces.serviceGraph.searchPlaceholder')"
           :debounce="300"
           @update:model-value="applyFilters"
@@ -39,21 +39,29 @@
       <!-- Legends (horizontal) -->
       <div
         data-test="service-graph-legends"
-        class="rounded-default border-card-glass-border! flex flex-row items-center gap-3 border p-[0.325rem]"
+        class="rounded-default border-card-glass-border! flex flex-row items-center gap-3 border p-[0.325rem] max-lg:max-w-full max-lg:flex-wrap max-lg:gap-y-1.5"
       >
-        <div data-test="sg-legend" class="flex min-w-0 flex-row items-center gap-3">
-          <!-- Border Color -->
-          <div class="text-text-label! mb-0! text-xs font-bold whitespace-nowrap">
+        <div
+          data-test="sg-legend"
+          class="flex min-w-0 flex-row items-center gap-3 max-lg:flex-wrap max-lg:gap-y-1"
+          :title="
+            isMobile
+              ? `${t('traces.serviceGraph.borderColor')} | ${t('traces.serviceGraph.borderColorMetric')}`
+              : undefined
+          "
+        >
+          <div class="text-text-label! mb-0! text-xs font-bold whitespace-nowrap max-md:hidden">
             {{ t("traces.serviceGraph.borderColor") }}
             <span class="font-normal opacity-55"
               >| {{ t("traces.serviceGraph.borderColorMetric") }}</span
             >
           </div>
-          <div class="flex! flex-row gap-2">
+          <div class="flex! flex-row gap-2 max-lg:flex-wrap max-lg:gap-y-1">
             <div
               v-for="level in healthLevels"
               :key="level.key"
               class="flex flex-none flex-row items-center gap-1.5"
+              :title="isMobile ? `${level.label} ${level.range}` : undefined"
               :data-test="`sg-legend-${level.key}`"
             >
               <span
@@ -69,12 +77,12 @@
                 <div class="text-text-secondary! text-left text-xs font-semibold">
                   {{ level.label }}
                 </div>
-                <div class="text-3xs text-left opacity-55">{{ level.range }}</div>
+                <div class="text-3xs text-left opacity-55 max-md:hidden">{{ level.range }}</div>
               </div>
             </div>
           </div>
         </div>
-        <OSeparator vertical class="mx-1 self-stretch" />
+        <OSeparator vertical class="mx-1 self-stretch max-md:hidden" />
         <!-- Inventory chip: total entity count. Click to expand the per-kind
              distribution (read-only; the show/hide toggles live in "Show types"). -->
         <ODropdown side="bottom" align="start">
@@ -365,6 +373,7 @@ import {
 import { useStore } from "vuex";
 import useTheme from "@/composables/useTheme";
 import { raw, useI18nTyped } from "@/types/i18n";
+import useBreakpoint from "@/composables/useBreakpoint";
 import serviceGraphService from "@/services/service_graph";
 import ChartRenderer from "@/components/dashboards/panels/ChartRenderer.vue";
 import ServiceGraphSidePanel from "./ServiceGraphNodeSidePanel.vue";
@@ -502,6 +511,7 @@ export default defineComponent({
     const store = useStore();
     const { isDark } = useTheme();
     const { t } = useI18nTyped();
+    const { isMobile } = useBreakpoint();
     const { getStreams } = useStreams(t);
     const { searchObj } = useTraces();
 
@@ -1892,6 +1902,7 @@ export default defineComponent({
     });
 
     return {
+      isMobile,
       raw,
       t,
       loading,
diff --git a/web/src/plugins/traces/ServicesCatalog.vue b/web/src/plugins/traces/ServicesCatalog.vue
index 05238136ed..2da46cf93a 100644
--- a/web/src/plugins/traces/ServicesCatalog.vue
+++ b/web/src/plugins/traces/ServicesCatalog.vue
@@ -212,13 +212,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- Body: left rail (entity-type filter) + table — mirrors the Dashboards
          folder-rail + table layout (panel bg + vertical separator, 230px). -->
-    <div class="flex min-h-0 flex-1">
+    <div class="flex min-h-0 flex-1 max-md:flex-col">
       <!-- Left rail: the entity-type filter. Panel background + right border
            match FolderList.vue so the rail reads like the app's other left
            rails. The stream selector lives in the top toolbar alongside the
            search. -->
       <div
-        class="w-rail bg-surface-panel border-border-default flex h-full shrink-0 flex-col gap-2 border-e px-1.5 py-2"
+        class="w-rail bg-surface-panel border-border-default flex h-full shrink-0 flex-col gap-2 border-e px-1.5 py-2 max-md:h-auto max-md:w-full max-md:flex-row max-md:flex-wrap max-md:border-e-0 max-md:border-b"
       >
         <!-- Entity-type filter: All / Services / Datastores / Queues /
              External / RPC. A vertical nav rail — same OTabs pattern as the
@@ -227,7 +227,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
              unhealthy badge right. -->
         <div v-if="!isLoading && services.length > 0" class="catalog-type-filter overflow-y-auto">
           <OTabs
-            orientation="vertical"
+            :orientation="isMobile ? 'horizontal' : 'vertical'"
             dense
             :model-value="typeFilter"
             data-test="services-catalog-type-filter"
@@ -287,7 +287,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
            header, rows, in-frame toolbar and footer (count + "Showing X–Y of N"
            + records-per-page + pager) all match. OTable owns pagination, so we
            feed it the full sorted list and it paginates internally. -->
-      <div v-else class="h-full min-w-0 flex-1">
+      <div v-else class="h-full min-w-0 flex-1 max-md:h-auto max-md:min-h-0">
         <div class="bg-card-glass-bg h-full">
           <OTable
             ref="oTableRef"
@@ -437,6 +437,7 @@ import useExternalColumnToggle from "@/composables/useExternalColumnToggle";
 import TraceServiceCell from "./components/TraceServiceCell.vue";
 import ServiceCatalogBarCell from "./components/ServiceCatalogBarCell.vue";
 import ServiceGraphNodeSidePanel from "./ServiceGraphNodeSidePanel.vue";
+import useBreakpoint from "@/composables/useBreakpoint";
 import useTraces from "@/composables/useTraces";
 import useStreams from "@/composables/useStreams";
 import useHttpStreaming from "@/composables/useStreamingSearch";
@@ -460,6 +461,7 @@ import OTab from "@/lib/navigation/Tabs/OTab.vue";
 import ServicesCatalogNoDataState from "./ServicesCatalogNoDataState.vue";
 
 const { t } = useI18nTyped();
+const { isMobile } = useBreakpoint();
 const { columnVisibility, setColumnVisibility } = useExternalColumnToggle("services-catalog");
 const catalogContainerRef = ref<HTMLElement | null>(null);
 const { searchObj } = useTraces();
diff --git a/web/src/plugins/traces/TraceTree.vue b/web/src/plugins/traces/TraceTree.vue
index da465b9203..e0cfaba879 100644
--- a/web/src/plugins/traces/TraceTree.vue
+++ b/web/src/plugins/traces/TraceTree.vue
@@ -961,6 +961,13 @@ export default defineComponent({
   display: flex;
 }
 
+/* Touch has no row hover — keep the span quick-action visible. */
+@media (max-width: 47.99rem) {
+  .view-span-logs {
+    display: flex;
+  }
+}
+
 .span-row.span-row-selected::before {
   background-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
 }
diff --git a/web/src/test/__mocks__/global.ts b/web/src/test/__mocks__/global.ts
index e65afe5e0e..c3da2b860f 100644
--- a/web/src/test/__mocks__/global.ts
+++ b/web/src/test/__mocks__/global.ts
@@ -22,7 +22,8 @@ vi.stubGlobal("scrollTo", vi.fn());
 vi.stubGlobal(
   "matchMedia",
   vi.fn().mockImplementation((query) => ({
-    matches: false,
+    // Desktop-like default: only min-width queries match, so useBreakpoint reads md/lg as "up".
+    matches: /min-width/.test(String(query)),
     media: query,
     onchange: null,
     addListener: vi.fn(), // Deprecated
diff --git a/web/src/utils/dashboard/constants.ts b/web/src/utils/dashboard/constants.ts
index 67e0e716fb..e1af44c04f 100644
--- a/web/src/utils/dashboard/constants.ts
+++ b/web/src/utils/dashboard/constants.ts
@@ -19,7 +19,8 @@ export const PIVOT_TABLE_DEFAULT_HEADER_HEIGHT = 48;
 export const PIVOT_TABLE_TOTAL_COLUMN_WIDTH = 150;
 
 // UI constants
-export const FIELD_FUNCTION_MENU_WIDTH = "48.1875rem";
+// Capped to the viewport: on a phone the overflow (the whole Configuration pane) would be unreachable.
+export const FIELD_FUNCTION_MENU_WIDTH = "min(48.1875rem, calc(100vw - 1.5rem))";
 
 // Chart types whose queries are always hand-written (custom) rather than
 // builder-generated. Add future custom-query chart types here.
diff --git a/web/src/views/About.vue b/web/src/views/About.vue
index e7ffce41a0..0e1c96afb0 100644
--- a/web/src/views/About.vue
+++ b/web/src/views/About.vue
@@ -35,7 +35,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </OText>
 
             <!-- One-line meta bar -->
-            <div class="mt-5 inline-flex flex-wrap items-center gap-2">
+            <div
+              class="mt-5 inline-flex flex-wrap items-center gap-2 max-md:max-w-full max-md:[&>span]:max-w-full max-md:[&>span]:overflow-hidden"
+            >
               <!-- version -->
               <span
                 class="rounded-default text-status-positive border-status-positive/28 bg-card-glass-tint-positive inline-flex items-center gap-1.5 border px-3.5 py-2 text-sm font-semibold whitespace-nowrap"
@@ -52,13 +54,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </span>
               <!-- commit -->
               <span
-                class="text-text-body rounded-default border-info/28 bg-card-glass-tint-info-soft inline-flex items-center gap-1.5 border px-3.5 py-2 text-sm whitespace-nowrap"
+                class="text-text-body rounded-default border-info/28 bg-card-glass-tint-info-soft inline-flex items-center gap-1.5 border px-3.5 py-2 text-sm whitespace-nowrap max-md:min-w-0"
               >
                 <OIcon name="code" size="sm" class="text-info shrink-0" />
                 <span class="text-info text-xs font-semibold tracking-wide uppercase">{{
                   t("about.commit_lbl")
                 }}</span>
-                <OText variant="mono">{{ store.state.zoConfig.commit_hash }}</OText>
+                <OText variant="mono" class="max-md:max-w-28 max-md:truncate">{{
+                  store.state.zoConfig.commit_hash
+                }}</OText>
                 <button
                   @click="copyToClipboard(store.state.zoConfig.commit_hash)"
                   class="rounded-default text-text-muted hover:text-info inline-flex cursor-pointer items-center justify-center border-none bg-transparent p-0.5 transition-colors duration-150"
@@ -98,7 +102,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               }}</OText>
             </div>
             <div class="text-text-secondary text-sm">{{ t("about.os_libraries_msg") }}</div>
-            <div class="grid grid-cols-4 gap-2.5">
+            <div class="grid grid-cols-4 gap-2.5 max-md:grid-cols-1">
               <a
                 href="https://github.com/openobserve/openobserve/blob/main/Cargo.toml"
                 target="_blank"
@@ -296,7 +300,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </OBanner>
           </div>
 
-          <div v-else class="grid grid-cols-2 gap-4">
+          <div v-else class="grid grid-cols-2 gap-4 max-md:grid-cols-1">
             <!-- License details table -->
             <div class="border-card-glass-border rounded-default overflow-hidden border">
               <table class="w-full border-collapse">
diff --git a/web/src/views/AlertLibrary/AlertLibrary.vue b/web/src/views/AlertLibrary/AlertLibrary.vue
index 3ec9301edc..736fcde497 100644
--- a/web/src/views/AlertLibrary/AlertLibrary.vue
+++ b/web/src/views/AlertLibrary/AlertLibrary.vue
@@ -48,6 +48,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           data-test="alert-library-refresh"
           @click="refresh"
         />
+      </template>
+      <template #actions-overflow>
         <OButton
           variant="outline"
           size="sm"
@@ -60,7 +62,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </template>
 
       <div class="flex min-h-0 flex-1">
-        <div class="w-rail border-border-default h-full shrink-0 border-e">
+        <div class="w-rail border-border-default h-full shrink-0 border-e max-md:hidden">
           <LibraryRail
             :categories="categoryFacets"
             :selected-categories="selectedCategories"
@@ -72,6 +74,27 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             @update:severity="severity = $event"
           />
         </div>
+        <ODrawer
+          v-if="isMobile"
+          v-model:open="mobileFiltersOpen"
+          side="left"
+          :width="80"
+          bleed
+          :title="t('common.filters')"
+          anchor='[data-test="alert-library-toolbar"]'
+          data-test="alert-library-mobile-filters-drawer"
+        >
+          <LibraryRail
+            :categories="categoryFacets"
+            :selected-categories="selectedCategories"
+            :severities="severityFacets"
+            :severity="severity"
+            :search="railSearch"
+            @update:search="railSearch = $event"
+            @update:selected-categories="selectedCategories = $event"
+            @update:severity="severity = $event"
+          />
+        </ODrawer>
 
         <div class="flex h-full min-w-0 flex-1 flex-col">
           <!-- Load failure replaces the whole body: a toolbar over an empty grid
@@ -98,6 +121,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               class="border-border-default px-page-edge flex shrink-0 items-center gap-3 border-b py-2"
               data-test="alert-library-toolbar"
             >
+              <OButton
+                variant="outline"
+                size="icon-toolbar"
+                icon-left="filter-list"
+                class="md:hidden"
+                data-test="alert-library-mobile-filters-btn"
+                @click="mobileFiltersOpen = true"
+              >
+                <OTooltip :content="t('common.filters')" />
+              </OButton>
               <OSearchInput
                 v-model="search"
                 size="sm"
@@ -328,6 +361,9 @@ import type { AlertLibraryErrorCode } from "@/composables/alerts/useAlertLibrary
 import useStreams from "@/composables/useStreams";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OCheckbox from "@/lib/forms/Checkbox/OCheckbox.vue";
+import ODrawer from "@/lib/overlay/Drawer/ODrawer.vue";
+import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
+import useBreakpoint from "@/composables/useBreakpoint";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import ORefreshButton from "@/lib/core/RefreshButton/ORefreshButton.vue";
@@ -352,6 +388,8 @@ const { getStreams } = useStreams(t);
 const selectedCategories = ref<string[]>([]);
 /** The rail's own list filter, held here so clearFilters can reset it too. */
 const railSearch = ref("");
+const { isMobile } = useBreakpoint();
+const mobileFiltersOpen = ref(false);
 const severity = ref("all");
 /** Stat-strip facet. `null` = no availability filter; "all" never sticks. */
 const facet = ref<"ready" | "missing" | null>(null);
diff --git a/web/src/views/Dashboards/DashboardSettings.vue b/web/src/views/Dashboards/DashboardSettings.vue
index c2962229af..5d8a1b1219 100644
--- a/web/src/views/Dashboards/DashboardSettings.vue
+++ b/web/src/views/Dashboards/DashboardSettings.vue
@@ -24,10 +24,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     @update:open="$emit('update:open', $event)"
   >
     <div data-test="dashboard-settings-main-container" class="h-full [min-height:inherit] p-0">
-      <OSplitter class="h-full" v-model="splitterModel" unit="px" disabled>
+      <OSplitter class="h-full" v-model="splitterModel" unit="px" disabled :horizontal="isMobile">
         <template v-slot:before>
           <div class="functions-tabs w-full">
-            <OTabs v-model="activeTab" orientation="vertical">
+            <OTabs v-model="activeTab" :orientation="isMobile ? 'horizontal' : 'vertical'">
               <OTab
                 name="generalSettings"
                 icon="settings"
@@ -85,7 +85,7 @@ import OTab from "@/lib/navigation/Tabs/OTab.vue";
 import OTabPanels from "@/lib/navigation/Tabs/OTabPanels.vue";
 import OTabPanel from "@/lib/navigation/Tabs/OTabPanel.vue";
 import OSplitter from "@/lib/core/Splitter/OSplitter.vue";
-import { defineComponent, ref } from "vue";
+import { computed, defineComponent, ref } from "vue";
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";
 import { useI18nTyped } from "@/types/i18n";
@@ -93,6 +93,7 @@ import GeneralSettings from "../../components/dashboards/settings/GeneralSetting
 import VariableSettings from "../../components/dashboards/settings/VariableSettings.vue";
 import TabsSettings from "../../components/dashboards/settings/TabsSettings.vue";
 import { getImageURL } from "../../utils/zincutils";
+import useBreakpoint from "@/composables/useBreakpoint";
 
 export default defineComponent({
   name: "AppSettings",
@@ -120,7 +121,15 @@ export default defineComponent({
     const router = useRouter();
     const activeTab: any = ref("generalSettings");
     const templates = ref([]);
-    const splitterModel = ref(220);
+    // < md the splitter is horizontal, so its size is the tab strip's height, not the rail width.
+    const { isMobile } = useBreakpoint();
+    const splitterWidth = ref(220);
+    const splitterModel = computed({
+      get: () => (isMobile.value ? 48 : splitterWidth.value),
+      set: (v: number) => {
+        if (!isMobile.value) splitterWidth.value = v;
+      },
+    });
 
     const refreshRequired = () => {
       emit("refresh");
@@ -131,6 +140,7 @@ export default defineComponent({
       store,
       router,
       splitterModel,
+      isMobile,
       activeTab,
       templates,
       getImageURL,
@@ -159,6 +169,14 @@ export default defineComponent({
   border-right: 1px solid var(--color-border-default);
 }
 
+@media (max-width: 47.99rem) {
+  :deep(.o-splitter__before) {
+    border-right: none;
+    /* eslint-disable-next-line local/no-hardcoded-px -- hairline, same as above */
+    border-bottom: 1px solid var(--color-border-default);
+  }
+}
+
 /* Let the settings tab content fill the splitter's full height so panels with a
    sticky footer (e.g. Add Variable) can pin it to the bottom instead of leaving
    dead space when the form is shorter than the drawer. */
diff --git a/web/src/views/Dashboards/Dashboards.vue b/web/src/views/Dashboards/Dashboards.vue
index a737f6faf9..0facbc8f9d 100644
--- a/web/src/views/Dashboards/Dashboards.vue
+++ b/web/src/views/Dashboards/Dashboards.vue
@@ -18,6 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <!-- eslint-disable vue/attribute-hyphenation -->
 <template>
   <OPageLayout
+    overflow-first
     bleed
     :key="store.state.selectedOrganization.identifier"
     :title="t('dashboard.header')"
@@ -26,6 +27,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     :main-panel="false"
   >
     <template #actions>
+      <!-- new dashboard button -->
+      <OButton variant="primary" size="sm" data-test="dashboard-new" @click="addDashboard">
+        {{ t(`dashboard.add`) }}
+      </OButton>
+    </template>
+
+    <template #actions-overflow>
       <!-- Org home dashboard shortcut: shows which dashboard is pinned to
              the home page and jumps straight to it. -->
       <OButton
@@ -94,16 +102,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
         </ODropdownItem>
       </ODropdown>
-      <!-- new dashboard button -->
-      <OButton variant="primary" size="sm" data-test="dashboard-new" @click="addDashboard">
-        {{ t(`dashboard.add`) }}
-      </OButton>
     </template>
 
     <!-- Folder rail + table — matches the Alerts/Reports layout. -->
-    <div class="flex min-h-0 flex-1">
+    <div class="flex min-h-0 flex-1 max-md:flex-col">
       <!-- Left: shared folder list (same component as Alerts/Reports) -->
-      <div class="w-rail h-full shrink-0">
+      <div
+        class="w-rail max-md:border-border-default h-full shrink-0 max-md:h-auto max-md:w-full max-md:border-b"
+      >
         <div class="h-full">
           <FolderList
             type="dashboards"
@@ -113,7 +119,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </div>
       <!-- Right: dashboards table -->
-      <div class="h-full min-w-0 flex-1">
+      <div class="h-full min-w-0 flex-1 max-md:h-auto max-md:min-h-0">
         <div class="bg-card-glass-bg h-full">
           <OTable
             class="h-full w-full"
@@ -143,8 +149,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           >
             <!-- Toolbar inside the table frame: scoped search (fills the bar) + refresh -->
             <template #toolbar>
-              <div class="flex w-full items-center gap-2">
-                <div class="min-w-0 flex-1">
+              <!-- min-w-0: otherwise the wrapper can't shrink below the search's min-content and pushes controls off-edge. -->
+              <div class="flex w-full items-center gap-2 max-lg:min-w-0 max-md:contents">
+                <div class="min-w-0 flex-1 max-md:min-w-40">
                   <OInput
                     v-model="dynamicQueryModel"
                     :placeholder="
@@ -171,7 +178,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           icon-left="folder-outline"
                           data-test="dashboard-search-scope-current"
                           :title="t('dashboard.searchThisFolderTitle')"
-                          >{{ t("dashboard.searchThisFolder") }}</OToggleGroupItem
+                          ><span class="max-md:hidden">{{
+                            t("dashboard.searchThisFolder")
+                          }}</span></OToggleGroupItem
                         >
                         <OToggleGroupItem
                           value="all"
@@ -179,7 +188,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           icon-left="search"
                           data-test="dashboard-search-across-folders-toggle"
                           :title="t('dashboard.searchAllFoldersTitle')"
-                          >{{ t("dashboard.searchAllFolders") }}</OToggleGroupItem
+                          ><span class="max-md:hidden">{{
+                            t("dashboard.searchAllFolders")
+                          }}</span></OToggleGroupItem
                         >
                       </OToggleGroup>
                     </template>
@@ -276,6 +287,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :title="t('dashboard.move_to_another_folder')"
                   variant="ghost"
                   size="icon-xs-sq"
+                  class="max-md:hidden"
                   data-test="dashboard-move-to-another-folder"
                   @click.stop="showMoveDashboardPanel(row)"
                 />
@@ -285,6 +297,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :title="t('dashboard.duplicate')"
                   variant="ghost"
                   size="icon-xs-sq"
+                  class="max-md:hidden"
                   data-test="dashboard-duplicate"
                   data-row-action="duplicate"
                   @click.stop="duplicateDashboard(row.id, row.folder_id)"
@@ -295,6 +308,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :title="t('dashboard.delete')"
                   variant="ghost-destructive"
                   size="icon-xs-sq"
+                  class="max-md:hidden"
                   data-test="dashboard-delete"
                   data-row-action="delete"
                   @click.stop="showDeleteDialogFn({ row })"
@@ -313,6 +327,31 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       @click.stop
                     />
                   </template>
+                  <ODropdownItem
+                    icon-left="drive-file-move"
+                    class="md:hidden"
+                    data-test="dashboard-move-to-another-folder-menu"
+                    @select="showMoveDashboardPanel(row)"
+                  >
+                    <span>{{ t("dashboard.move_to_another_folder") }}</span>
+                  </ODropdownItem>
+                  <ODropdownItem
+                    icon-left="content-copy"
+                    class="md:hidden"
+                    data-test="dashboard-duplicate-menu"
+                    @select="duplicateDashboard(row.id, row.folder_id)"
+                  >
+                    <span>{{ t("dashboard.duplicate") }}</span>
+                  </ODropdownItem>
+                  <ODropdownItem
+                    icon-left="delete"
+                    variant="destructive"
+                    class="md:hidden"
+                    data-test="dashboard-delete-menu"
+                    @select="showDeleteDialogFn({ row })"
+                  >
+                    <span>{{ t("dashboard.delete") }}</span>
+                  </ODropdownItem>
                   <ODropdownItem
                     :icon-left="isHome(row.id) ? 'keep' : 'keep-outline'"
                     data-test="dashboard-list-set-home-btn"
@@ -351,7 +390,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </template>
             <template #bottom>
               <div class="flex w-full items-center justify-between gap-4 py-1">
-                <div class="flex shrink-0 items-center text-xs font-normal">
+                <div class="flex shrink-0 items-center text-xs font-normal max-md:hidden">
                   {{ resultTotal || 0 }} {{ t("dashboard.header") }}
                 </div>
                 <div v-if="selectedIds.length > 0" class="bulk-action-bar flex items-center gap-2">
diff --git a/web/src/views/Dashboards/ImportDashboard.vue b/web/src/views/Dashboards/ImportDashboard.vue
index 3d9fa67c5f..40b069e2a5 100644
--- a/web/src/views/Dashboards/ImportDashboard.vue
+++ b/web/src/views/Dashboards/ImportDashboard.vue
@@ -24,6 +24,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <OButton
         variant="outline"
         size="sm-action"
+        class="max-md:hidden"
         @click="goToCommunityDashboards"
         data-test="dashboard-panel-tutorial-btn"
         >{{ t("dashboard.communityDashboard") }}</OButton
@@ -48,11 +49,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </template>
     <div class="flex min-h-0 w-full flex-1">
       <div class="flex min-h-0 w-full min-w-0">
-        <OSplitter v-model="splitterModel" class="h-full min-h-0 w-full min-w-0">
+        <OSplitter
+          v-model="splitterModel"
+          :horizontal="stackPanes"
+          class="h-full min-h-0 w-full min-w-0"
+        >
           <template #before>
             <OForm id="import-dashboard-form" :form="form" class="flex h-full min-h-0 flex-col">
               <div class="flex h-full min-h-0 w-full flex-col">
-                <div class="bg-card-glass-bg px-page-edge mb-1 shrink-0 py-2.5">
+                <div
+                  class="bg-card-glass-bg px-page-edge mb-1 shrink-0 py-2.5 max-md:flex max-md:flex-wrap max-md:items-center max-md:justify-between max-md:gap-2"
+                >
                   <div class="app-tabs-container h-9 w-fit">
                     <AppTabs
                       data-test="dashboard-import-type-tabs"
@@ -62,14 +69,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       @update:active-tab="updateActiveTab"
                     />
                   </div>
+                  <OButton
+                    variant="outline"
+                    size="sm-action"
+                    class="md:hidden"
+                    @click="goToCommunityDashboards"
+                    data-test="dashboard-panel-tutorial-btn-mobile"
+                    >{{ t("dashboard.communityDashboard") }}</OButton
+                  >
                 </div>
                 <div
                   v-if="activeTab == 'import_json_url'"
                   class="editor-container-url bg-card-glass-bg flex min-h-0 flex-1 flex-col py-1"
                 >
                   <div class="mx-2 mt-1 mb-1 flex min-h-0 flex-1 flex-col">
-                    <div class="flex w-[calc(100%_-_0.625rem)] w-full shrink-0 items-center gap-2">
-                      <div data-test="dashboard-import-url-input" class="w-[69%]">
+                    <div
+                      class="flex w-[calc(100%_-_0.625rem)] w-full shrink-0 items-center gap-2 max-md:flex-wrap"
+                    >
+                      <div data-test="dashboard-import-url-input" class="w-[69%] max-md:w-full">
                         <OFormInput
                           data-test="dashboard-import-url-control"
                           name="url"
@@ -80,7 +97,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
                       <div
                         data-test="dashboard-folder-dropdown"
-                        class="import-folder-dropdown-container w-[calc(30%)]"
+                        class="import-folder-dropdown-container w-[calc(30%)] max-md:w-full"
                       >
                         <SelectFolderDropdown
                           @folder-selected="selectedFolder = $event"
@@ -104,8 +121,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   class="dashboard-import-json-container bg-card-glass-bg flex min-h-0 flex-1 flex-col py-1"
                 >
                   <div class="mx-2 mt-1 mb-1 flex min-h-0 flex-1 flex-col">
-                    <div class="flex w-[calc(100%_-_0.625rem)] w-full shrink-0 items-center gap-2">
-                      <div data-test="dashboard-import-file-input" class="w-[69%]">
+                    <div
+                      class="flex w-[calc(100%_-_0.625rem)] w-full shrink-0 items-center gap-2 max-md:flex-wrap"
+                    >
+                      <div data-test="dashboard-import-file-input" class="w-[69%] max-md:w-full">
                         <OFormFile
                           data-test="dashboard-import-file-control"
                           name="jsonFiles"
@@ -117,7 +136,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           :disabled="!!isLoading"
                         />
                       </div>
-                      <div class="import-folder-dropdown-container w-[calc(30%)]">
+                      <div class="import-folder-dropdown-container w-[calc(30%)] max-md:w-full">
                         <SelectFolderDropdown
                           @folder-selected="selectedFolder = $event"
                           :activeFolderId="selectedFolder.value"
@@ -248,7 +267,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 <script lang="ts">
 // @ts-nocheck
-import { defineComponent, ref, onMounted, reactive, watch } from "vue";
+import { computed, defineComponent, ref, onMounted, reactive, watch } from "vue";
 import { useI18nTyped } from "@/types/i18n";
 import { getAllDashboards, getFoldersList, dedupeDashboardIds } from "../../utils/commons.js";
 import { useStore } from "vuex";
@@ -272,6 +291,7 @@ import { useOForm } from "@/lib/forms/Form/useOForm";
 import { makeImportDashboardSchema, importDashboardDefaults } from "./ImportDashboard.schema";
 import OSeparator from "@/lib/core/Separator/OSeparator.vue";
 import OSplitter from "@/lib/core/Splitter/OSplitter.vue";
+import useBreakpoint from "@/composables/useBreakpoint";
 import { defineAsyncComponent } from "vue";
 const QueryEditor = defineAsyncComponent(() => import("@/components/CodeQueryEditor.vue"));
 export default defineComponent({
@@ -310,8 +330,19 @@ export default defineComponent({
     const activeTab = ref("import_json_file");
 
     const dashboardErrorsToDisplay = ref([]);
+    const { lgUp } = useBreakpoint();
+    const stackPanes = computed(() => !lgUp.value);
     const splitterModel = ref(60);
 
+    watch(
+      [stackPanes, () => dashboardErrorsToDisplay.value.length],
+      ([stacked, errCount]) => {
+        if (stacked) splitterModel.value = errCount > 0 ? 55 : 100;
+        else if (splitterModel.value === 100) splitterModel.value = 60;
+      },
+      { immediate: true },
+    );
+
     // holds the value of the loading for any of the import type
     const isLoading = ref(false);
     const queryEditorPlaceholderFlag = ref(true);
@@ -844,6 +875,7 @@ export default defineComponent({
       activeTab,
       dashboardErrorsToDisplay,
       splitterModel,
+      stackPanes,
       updateActiveTab,
       queryEditorPlaceholderFlag,
       importDashboard,
diff --git a/web/src/views/Dashboards/RenderDashboardCharts.vue b/web/src/views/Dashboards/RenderDashboardCharts.vue
index 9b5f0d5a5e..75db6bcde4 100644
--- a/web/src/views/Dashboards/RenderDashboardCharts.vue
+++ b/web/src/views/Dashboards/RenderDashboardCharts.vue
@@ -1816,6 +1816,39 @@ export default defineComponent({
   cursor: move;
 }
 
+/* CSS-only stack: GridStack's oneColumnMode stays off because the change handler would persist it. */
+@media (max-width: 47.99rem) {
+  .displayDiv :deep(.grid-stack) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    height: auto !important;
+  }
+  .displayDiv :deep(.grid-stack > .grid-stack-item) {
+    position: relative !important;
+    inset: auto !important;
+    transform: none !important;
+    width: 100% !important;
+    min-width: 100% !important;
+    height: 20rem !important;
+    min-height: 20rem !important;
+  }
+  .displayDiv :deep(.grid-stack > .grid-stack-item:has([data-panel-type="metric"])),
+  .displayDiv :deep(.grid-stack > .grid-stack-item:has([data-panel-type="gauge"])) {
+    width: calc(50% - 0.25rem) !important;
+    min-width: calc(50% - 0.25rem) !important;
+    height: 8rem !important;
+    min-height: 8rem !important;
+  }
+  .displayDiv :deep(.grid-stack > .grid-stack-item.panel-section-header) {
+    height: 2.5rem !important;
+    min-height: 2.5rem !important;
+  }
+  .displayDiv :deep(.grid-stack > .grid-stack-item > .ui-resizable-handle) {
+    display: none !important;
+  }
+}
+
 .displayDiv :deep(.grid-stack .grid-stack-item.ui-draggable-dragging) {
   opacity: 0.8;
   z-index: 1000;
diff --git a/web/src/views/Dashboards/ViewDashboard.vue b/web/src/views/Dashboards/ViewDashboard.vue
index 61d2a61cbf..844ca06fce 100644
--- a/web/src/views/Dashboards/ViewDashboard.vue
+++ b/web/src/views/Dashboards/ViewDashboard.vue
@@ -87,7 +87,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             v-if="selectedDate"
             v-show="store.state.printMode === false"
             ref="dateTimePicker"
-            class="dashboard-icons h-7.5 [transition:all_0.2s_ease]"
+            class="dashboard-icons h-7.5 [transition:all_0.2s_ease] max-md:[&_.date-time-label]:hidden"
             size="sm"
             v-model="selectedDate"
             :initialTimezone="initialTimezone"
@@ -96,6 +96,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             data-test="dashboard-global-date-time-picker"
           />
           <AutoRefreshInterval
+            v-if="!isMobile"
             v-model="refreshInterval"
             trigger
             :min-refresh-interval="store.state?.zoConfig?.min_auto_refresh_interval || 5"
@@ -134,7 +135,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               shortcut-id="dashboardRefresh"
             />
           </OButton>
+        </template>
 
+        <template #actions-overflow>
+          <AutoRefreshInterval
+            v-if="isMobile"
+            v-model="refreshInterval"
+            trigger
+            :min-refresh-interval="store.state?.zoConfig?.min_auto_refresh_interval || 5"
+            @trigger="refreshData"
+            class="dashboard-icons hideOnPrintMode h-7.5 [transition:all_0.2s_ease]"
+            size="sm"
+          />
           <ExportDashboard
             v-if="!isFullscreen"
             v-show="store.state.printMode !== true"
@@ -351,6 +363,7 @@ import { useAiDashboardEvents } from "@/composables/useAiDashboardEvents";
 import type { AiDashboardEvent } from "@/composables/useAiDashboardEvents";
 import { useShortcuts } from "@/lib/vue-shortcut-manager";
 import { isInputFocused } from "@/utils/keyboardShortcuts";
+import useBreakpoint from "@/composables/useBreakpoint";
 
 const DashboardJsonEditor = defineAsyncComponent(() => {
   return import("./DashboardJsonEditor.vue");
@@ -384,6 +397,7 @@ export default defineComponent({
   },
   setup() {
     const { t } = useI18nTyped();
+    const { isMobile } = useBreakpoint();
     const route = useRoute();
     const router = useRouter();
     const store = useStore();
@@ -1769,6 +1783,7 @@ export default defineComponent({
     ]);
 
     return {
+      isMobile,
       currentDashboardData,
       dashboardRemountKey,
       toggleFullscreen,
diff --git a/web/src/views/Dashboards/addPanel/AddJoinPopUp.vue b/web/src/views/Dashboards/addPanel/AddJoinPopUp.vue
index 98f6c9a109..d544d7af78 100644
--- a/web/src/views/Dashboards/addPanel/AddJoinPopUp.vue
+++ b/web/src/views/Dashboards/addPanel/AddJoinPopUp.vue
@@ -14,7 +14,10 @@
 -->
 
 <template>
-  <div data-test="dashboard-join-pop-up" class="flex max-h-[54vh] w-156 flex-col overflow-hidden">
+  <div
+    data-test="dashboard-join-pop-up"
+    class="flex max-h-[54vh] w-156 flex-col overflow-hidden max-lg:w-[calc(100vw-1.5rem)]"
+  >
     <div class="flex min-h-0 flex-1 flex-col p-3">
       <div class="mb-2 flex items-start justify-between gap-4">
         <div class="flex min-w-0 flex-1 flex-col gap-1">
diff --git a/web/src/views/Dashboards/addPanel/AddPanel.vue b/web/src/views/Dashboards/addPanel/AddPanel.vue
index 88392b5f5f..a3cb5fd586 100644
--- a/web/src/views/Dashboards/addPanel/AddPanel.vue
+++ b/web/src/views/Dashboards/addPanel/AddPanel.vue
@@ -51,37 +51,41 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             />
           </template>
           <template #actions>
-            <OButton
-              variant="outline"
-              size="sm"
-              @click="showTutorial"
-              data-test="dashboard-panel-tutorial-btn"
-              >{{ t("dashboard.addPanel.dashboardTutorial") }}</OButton
-            >
-            <OButton
-              v-if="!['html', 'markdown', 'custom_chart'].includes(dashboardPanelData.data.type)"
-              variant="outline"
-              size="icon-sm"
-              @click="showViewPanel = true"
-              data-test="dashboard-panel-data-view-query-inspector-btn"
-              icon-left="info-outline"
-            >
-              <OTooltip
-                side="left"
-                align="center"
-                :content="t('dashboard.addPanel.queryInspector')"
-                shortcut-id="panelEditorQueryInspector"
-              />
-            </OButton>
+            <template v-if="!isMobile">
+              <OButton
+                variant="outline"
+                size="sm"
+                @click="showTutorial"
+                data-test="dashboard-panel-tutorial-btn"
+                >{{ t("dashboard.addPanel.dashboardTutorial") }}</OButton
+              >
+              <OButton
+                v-if="!['html', 'markdown', 'custom_chart'].includes(dashboardPanelData.data.type)"
+                variant="outline"
+                size="icon-sm"
+                @click="showViewPanel = true"
+                data-test="dashboard-panel-data-view-query-inspector-btn"
+                icon-left="info-outline"
+              >
+                <OTooltip
+                  side="left"
+                  align="center"
+                  :content="t('dashboard.addPanel.queryInspector')"
+                  shortcut-id="panelEditorQueryInspector"
+                />
+              </OButton>
+            </template>
             <DateTimePickerDashboard
               v-if="selectedDate"
               v-model="selectedDate"
               ref="dateTimePickerRef"
               :disable="disable"
+              class="max-md:[&_.date-time-label]:hidden"
               @hide="setTimeForVariables"
               data-test="dashboard-global-date-time-picker"
             />
             <OButton
+              v-if="!isMobile"
               variant="outline-destructive"
               size="sm-action"
               @click="goBackToDashboardList"
@@ -140,6 +144,33 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </OButtonGroup>
             </template>
           </template>
+          <template #actions-overflow>
+            <template v-if="isMobile">
+              <OButton
+                variant="outline"
+                size="sm"
+                @click="showTutorial"
+                data-test="dashboard-panel-tutorial-btn"
+                >{{ t("dashboard.addPanel.dashboardTutorial") }}</OButton
+              >
+              <OButton
+                v-if="!['html', 'markdown', 'custom_chart'].includes(dashboardPanelData.data.type)"
+                variant="outline"
+                size="sm"
+                icon-left="info-outline"
+                @click="showViewPanel = true"
+                data-test="dashboard-panel-data-view-query-inspector-btn"
+                >{{ t("dashboard.addPanel.queryInspector") }}</OButton
+              >
+              <OButton
+                variant="outline-destructive"
+                size="sm"
+                @click="goBackToDashboardList"
+                data-test="dashboard-panel-discard"
+                >{{ t("panel.discard") }}</OButton
+              >
+            </template>
+          </template>
         </OPageHeader>
       </OForm>
     </template>
@@ -217,6 +248,7 @@ import AddSettingVariable from "../../../components/dashboards/settings/AddSetti
 import { debounce, isEqual } from "lodash-es";
 import { provide, inject } from "vue";
 import { rangesFromServerError, type SqlErrorRange } from "@/utils/query/sqlDiagnostics";
+import useBreakpoint from "@/composables/useBreakpoint";
 import useNotifications from "@/composables/useNotifications";
 import config from "@/aws-exports";
 import useCancelQuery from "@/composables/dashboard/useCancelQuery";
@@ -282,6 +314,7 @@ export default defineComponent({
     // This will deep copy the data object without reactivity and pass it on to the chart renderer
     const chartData = ref();
     const { t } = useI18nTyped();
+    const { isMobile } = useBreakpoint();
     const router = useRouter();
     const route = useRoute();
     const store = useStore();
@@ -1721,6 +1754,7 @@ export default defineComponent({
 
     return {
       t,
+      isMobile,
       updateDateTime,
       goBack,
       savePanelChangesToDashboard,
diff --git a/web/src/views/DatabaseMonitoring/ActivityPage.vue b/web/src/views/DatabaseMonitoring/ActivityPage.vue
index ba666608ab..a5c4cdf0c0 100644
--- a/web/src/views/DatabaseMonitoring/ActivityPage.vue
+++ b/web/src/views/DatabaseMonitoring/ActivityPage.vue
@@ -67,7 +67,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             search-data-test="dbm-activity-search"
           >
             <DbmScopeFilters
-              class="min-w-0 flex-1"
+              class="min-w-0 flex-1 max-lg:flex-none max-lg:basis-auto"
               :filters="dimensionFilters"
               @clear="clearScope"
             />
@@ -270,7 +270,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             class="text-text-secondary flex w-full items-center gap-2.5"
             data-test="dbm-activity-status-bar"
           >
-            <span>{{ countLine }}</span>
+            <span class="max-md:hidden">{{ countLine }}</span>
           </div>
         </template>
 
diff --git a/web/src/views/DatabaseMonitoring/BlockedQueriesPage.vue b/web/src/views/DatabaseMonitoring/BlockedQueriesPage.vue
index 0bba608262..f9602fc61d 100644
--- a/web/src/views/DatabaseMonitoring/BlockedQueriesPage.vue
+++ b/web/src/views/DatabaseMonitoring/BlockedQueriesPage.vue
@@ -63,7 +63,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             @search="load"
           >
             <DbmScopeFilters
-              class="min-w-0 flex-1"
+              class="min-w-0 flex-1 max-lg:flex-none max-lg:basis-auto"
               :filters="dimensionFilters"
               @clear="clearScope"
             />
diff --git a/web/src/views/DatabaseMonitoring/DatabasesPage.vue b/web/src/views/DatabaseMonitoring/DatabasesPage.vue
index 1e722a3beb..428d6d0ff7 100644
--- a/web/src/views/DatabaseMonitoring/DatabasesPage.vue
+++ b/web/src/views/DatabaseMonitoring/DatabasesPage.vue
@@ -87,7 +87,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             search-data-test="dbm-databases-search"
           >
             <DbmScopeFilters
-              class="min-w-0 flex-1"
+              class="min-w-0 flex-1 max-lg:flex-none max-lg:basis-auto"
               :filters="dimensionFilters"
               @clear="clearScope"
             />
diff --git a/web/src/views/DatabaseMonitoring/DeadlocksPage.vue b/web/src/views/DatabaseMonitoring/DeadlocksPage.vue
index f162fede41..a8ebc6e7e5 100644
--- a/web/src/views/DatabaseMonitoring/DeadlocksPage.vue
+++ b/web/src/views/DatabaseMonitoring/DeadlocksPage.vue
@@ -69,7 +69,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             @search="load"
           >
             <DbmScopeFilters
-              class="min-w-0 flex-1"
+              class="min-w-0 flex-1 max-lg:flex-none max-lg:basis-auto"
               :filters="dimensionFilters"
               @clear="clearScope"
             />
diff --git a/web/src/views/DatabaseMonitoring/QueriesPage.vue b/web/src/views/DatabaseMonitoring/QueriesPage.vue
index ebf20ad462..ed1147c47b 100644
--- a/web/src/views/DatabaseMonitoring/QueriesPage.vue
+++ b/web/src/views/DatabaseMonitoring/QueriesPage.vue
@@ -80,8 +80,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
            toolbar: both tables below own a toolbar and only one of them is
            mounted at a time, so a control in either would vanish with it.
            One row, above both, serving whichever table is showing. -->
-      <div class="px-page-edge flex shrink-0 items-center gap-2 py-1.5">
-        <div class="w-64 shrink-0">
+      <div class="px-page-edge flex shrink-0 items-center gap-2 py-1.5 max-lg:flex-wrap">
+        <div class="w-64 shrink-0 max-lg:order-last max-lg:w-full">
           <OSearchInput
             :model-value="search"
             :placeholder="t('dbm.queries.searchPlaceholder')"
@@ -92,7 +92,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           />
         </div>
         <DbmScopeFilters
-          class="min-w-0 flex-1"
+          class="min-w-0 flex-1 max-lg:flex-none max-lg:basis-auto"
           :filters="dimensionFilters"
           :insight-chip="activeInsightChip"
           @clear="clearScope"
diff --git a/web/src/views/DatabaseMonitoring/SamplesPage.vue b/web/src/views/DatabaseMonitoring/SamplesPage.vue
index 3e1736a0a0..42cb19ee57 100644
--- a/web/src/views/DatabaseMonitoring/SamplesPage.vue
+++ b/web/src/views/DatabaseMonitoring/SamplesPage.vue
@@ -54,8 +54,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
            toolbar: both tables below own a toolbar and only one of them is
            mounted at a time, so a control in either would vanish with it.
            One row, above both, serving whichever table is showing. -->
-      <div class="px-page-edge flex shrink-0 items-center gap-2 py-1.5">
-        <div class="w-64 shrink-0">
+      <div class="px-page-edge flex shrink-0 items-center gap-2 py-1.5 max-lg:flex-wrap">
+        <div class="w-64 shrink-0 max-lg:order-last max-lg:w-full">
           <OSearchInput
             :model-value="search"
             :placeholder="t('dbm.samples.searchPlaceholder')"
@@ -65,7 +65,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             @update:model-value="(v: unknown) => (search = typeof v === 'string' ? v : '')"
           />
         </div>
-        <DbmScopeFilters class="min-w-0 flex-1" :filters="dimensionFilters" @clear="clearScope" />
+        <DbmScopeFilters
+          class="min-w-0 flex-1 max-lg:flex-none max-lg:basis-auto"
+          :filters="dimensionFilters"
+          @clear="clearScope"
+        />
         <DbmRefreshButton
           mode="status"
           :loading="loading"
@@ -192,7 +196,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             class="text-text-secondary flex w-full items-center gap-2.5"
             data-test="dbm-samples-status-bar"
           >
-            <span>{{ countLine }}</span>
+            <span class="max-md:hidden">{{ countLine }}</span>
             <span
               v-if="streamsFailed > 0"
               class="text-status-warning-text"
diff --git a/web/src/views/DatabaseMonitoring/TableHealthPage.vue b/web/src/views/DatabaseMonitoring/TableHealthPage.vue
index 1e0254257f..81712abb32 100644
--- a/web/src/views/DatabaseMonitoring/TableHealthPage.vue
+++ b/web/src/views/DatabaseMonitoring/TableHealthPage.vue
@@ -208,7 +208,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             search-data-test="dbm-table-health-search"
           >
             <DbmScopeFilters
-              class="min-w-0 flex-1"
+              class="min-w-0 flex-1 max-lg:flex-none max-lg:basis-auto"
               :filters="dimensionFilters"
               @clear="clearScope"
             />
@@ -262,7 +262,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             class="text-text-secondary flex w-full items-center gap-2.5"
             data-test="dbm-table-health-status-bar"
           >
-            <span>{{ countLine }}</span>
+            <span class="max-md:hidden">{{ countLine }}</span>
           </div>
         </template>
 
diff --git a/web/src/views/Functions.vue b/web/src/views/Functions.vue
index f81f2ac6d0..1cfd4c4f03 100644
--- a/web/src/views/Functions.vue
+++ b/web/src/views/Functions.vue
@@ -136,7 +136,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div
             v-else-if="isDetailView"
             id="o2-page-actions"
-            class="flex items-center gap-2"
+            class="flex items-center gap-2 max-md:max-w-full max-md:flex-wrap max-md:justify-end max-md:gap-y-1"
             data-test="pipeline-detail-actions"
           />
         </template>
diff --git a/web/src/views/HomeChatHistory.vue b/web/src/views/HomeChatHistory.vue
index 36eaceba04..dffe2e36fc 100644
--- a/web/src/views/HomeChatHistory.vue
+++ b/web/src/views/HomeChatHistory.vue
@@ -177,7 +177,7 @@ function formatTime(ts: string): string {
           </div>
         </div>
         <span
-          class="inline-flex shrink-0 items-center opacity-0 transition-opacity duration-[120ms] group-hover:opacity-100"
+          class="inline-flex shrink-0 items-center opacity-0 transition-opacity duration-[120ms] group-hover:opacity-100 max-md:opacity-100"
         >
           <OButton
             variant="ghost-destructive"
diff --git a/web/src/views/HomeView.vue b/web/src/views/HomeView.vue
index 5c28bd97c3..400b9ba15e 100644
--- a/web/src/views/HomeView.vue
+++ b/web/src/views/HomeView.vue
@@ -30,6 +30,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       :tabs-below="tabOrder.length > 1"
       bleed
     >
+      <template v-if="isMobile && activeHomeTab === 'ai'" #actions>
+        <OButton
+          variant="outline"
+          size="sm"
+          data-test="home-mobile-chats-toggle"
+          @click="mobileChatsOpen = true"
+        >
+          <template #icon-left><OIcon name="menu" size="sm" /></template>
+          {{ t("chatHistory.title") }}
+        </OButton>
+      </template>
       <!-- Top-level page header: module icon + "Home" title, with the home tabs
            rendered as a full-width strip below (tabsBelow). The header owns its
            own bottom divider when tabs are present; when only a single tab
@@ -83,10 +94,37 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- O2 AI Assistant tab -->
         <div
           v-if="activeHomeTab === 'ai'"
-          class="home-ai-panel flex min-h-0 flex-1 flex-row overflow-hidden"
+          class="home-ai-panel flex min-h-0 flex-1 flex-row overflow-hidden max-md:flex-col"
         >
-          <HomeChatHistory @load-chat="onLoadChat" @new-chat="onNewChat" />
+          <HomeChatHistory class="max-md:hidden" @load-chat="onLoadChat" @new-chat="onNewChat" />
           <O2AIChat ref="homeChat" :is-open="true" :header-height="0" :centered-start="true" />
+          <ODrawer
+            v-if="isMobile"
+            v-model:open="mobileChatsOpen"
+            side="left"
+            size="sm"
+            bleed
+            seamless
+            anchor="header.app-page-header"
+            anchor-edge="bottom"
+            data-test="home-mobile-chats-drawer"
+          >
+            <HomeChatHistory
+              class="w-full!"
+              @load-chat="
+                (chat) => {
+                  onLoadChat(chat);
+                  mobileChatsOpen = false;
+                }
+              "
+              @new-chat="
+                () => {
+                  onNewChat();
+                  mobileChatsOpen = false;
+                }
+              "
+            />
+          </ODrawer>
         </div>
 
         <!-- Overview tab (no inner card-container — the outer section panel
@@ -128,6 +166,10 @@ import OTabs from "@/lib/navigation/Tabs/OTabs.vue";
 import OTab from "@/lib/navigation/Tabs/OTab.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
+import OButton from "@/lib/core/Button/OButton.vue";
+import OIcon from "@/lib/core/Icon/OIcon.vue";
+import ODrawer from "@/lib/overlay/Drawer/ODrawer.vue";
+import useBreakpoint from "@/composables/useBreakpoint";
 import PinnedDashboardTab from "@/views/PinnedDashboardTab.vue";
 import { useHomeDashboard } from "@/composables/useHomeDashboard";
 import { toast } from "@/lib/feedback/Toast/useToast";
@@ -311,10 +353,15 @@ export default defineComponent({
     onMounted(() => window.addEventListener("o2:home-switch-tab", onSwitchTab));
     onUnmounted(() => window.removeEventListener("o2:home-switch-tab", onSwitchTab));
 
+    const { isMobile } = useBreakpoint();
+    const mobileChatsOpen = ref(false);
+
     return {
       t,
       store,
       config,
+      isMobile,
+      mobileChatsOpen,
       activeHomeTab,
       tabOrder,
       onTabReorder,
@@ -337,6 +384,9 @@ export default defineComponent({
     OTab,
     OTooltip,
     OPageLayout,
+    OButton,
+    OIcon,
+    ODrawer,
     PinnedDashboardTab,
   },
 });
diff --git a/web/src/views/Ingestion.vue b/web/src/views/Ingestion.vue
index 41a12b5b58..2d98ab9216 100644
--- a/web/src/views/Ingestion.vue
+++ b/web/src/views/Ingestion.vue
@@ -26,7 +26,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     bleed
   >
     <template #actions>
-      <div class="w-50 flex-none">
+      <div class="w-50 flex-none max-md:w-auto max-md:min-w-36 max-md:flex-1">
         <OSearchInput
           v-model="globalSearchQuery"
           :placeholder="t('common.search')"
@@ -36,12 +36,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         />
       </div>
       <OSelect
-        v-if="!isRUMPage && tokenOptions.length > 0"
+        v-if="!isMobile && !isRUMPage && tokenOptions.length > 0"
         v-model="selectedTokenName"
         :options="tokenOptions"
         label-key="label"
         value-key="value"
-        class="max-w-xs"
+        class="max-w-xs max-md:order-last max-md:max-w-full max-md:min-w-0! max-md:basis-full"
         style="min-width: 13.75rem"
         @update:model-value="onTokenSelected"
       />
@@ -50,9 +50,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         variant="primary"
         size="sm"
         icon-left="key"
+        :title="isMobile ? t('ingestion.manageTokensBtnLabel') : undefined"
         @click="navigateToIngestionTokens"
       >
-        {{ t("ingestion.manageTokensBtnLabel") }}
+        <span class="max-md:hidden">{{ t("ingestion.manageTokensBtnLabel") }}</span>
       </OButton>
       <OButton
         v-if="
@@ -83,6 +84,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- Pull the strip left (cancel the header's px-4) so the first tab lines
              up with the vertical sub-nav (Kubernetes/…) in the section below. -->
       <div class="-ms-3 w-full">
+        <div v-if="isMobile && !isRUMPage && tokenOptions.length > 0" class="ms-3 pb-2">
+          <OSelect
+            v-model="selectedTokenName"
+            :options="tokenOptions"
+            label-key="label"
+            value-key="value"
+            @update:model-value="onTokenSelected"
+          />
+        </div>
         <OTabs v-model="ingestTabType" align="left">
           <ORouteTab
             name="recommended"
@@ -226,6 +236,7 @@ import { getImageURL } from "@/utils/zincutils";
 import apiKeysService from "@/services/api_keys";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
 import OSelect from "@/lib/forms/Select/OSelect.vue";
+import useBreakpoint from "@/composables/useBreakpoint";
 import OBanner from "@/lib/feedback/Banner/OBanner.vue";
 import type { SelectModelValue } from "@/lib/forms/Select/OSelect.types";
 import { searchIngestionItems } from "@/utils/ingestionSearchIndex";
@@ -245,6 +256,7 @@ export default defineComponent({
     OBanner,
   },
   setup() {
+    const { isMobile } = useBreakpoint();
     const { t } = useI18nTyped();
     const store = useStore();
     const router: any = useRouter();
@@ -626,6 +638,7 @@ export default defineComponent({
     });
 
     return {
+      isMobile,
       t,
       store,
       router,
diff --git a/web/src/views/LogStream.vue b/web/src/views/LogStream.vue
index f6a4f39031..037df528d8 100644
--- a/web/src/views/LogStream.vue
+++ b/web/src/views/LogStream.vue
@@ -78,9 +78,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >
           <!-- Toolbar inside the table frame: stream-type filter + search. -->
           <template #toolbar>
-            <div class="flex w-full items-center justify-between gap-2">
+            <div class="flex w-full items-center justify-between gap-2 max-md:contents">
               <OToggleGroup
+                mobile-dropdown
                 :model-value="streamActiveTab"
+                data-test="log-stream-type-filter"
                 @update:model-value="(v) => filterLogStreamByTab(v as string)"
               >
                 <OToggleGroupItem value="logs" size="sm">
@@ -107,7 +109,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OSearchInput
                 data-test="streams-search-stream-input"
                 v-model="filterQuery"
-                class="no-border o2-search-input w-64"
+                class="no-border o2-search-input w-64 max-md:w-auto max-md:min-w-40 max-md:flex-1"
                 :placeholder="t('logStream.search')"
                 :debounce="300"
               />
@@ -178,6 +180,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-row-action="view"
                 variant="ghost"
                 size="icon-sm"
+                class="max-md:hidden"
                 @click="exploreStream({ row })"
               />
               <OButton
@@ -187,6 +190,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-row-action="view"
                 variant="ghost"
                 size="icon-sm"
+                class="max-md:hidden"
                 @click="listSchema({ row })"
               />
               <OButton
@@ -196,8 +200,46 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-row-action="delete"
                 variant="ghost-destructive"
                 size="icon-sm"
+                class="max-md:hidden"
                 @click="confirmDeleteAction({ row })"
               />
+              <ODropdown side="bottom" align="end">
+                <template #trigger>
+                  <OButton
+                    icon-left="more-vert"
+                    variant="ghost"
+                    size="icon-xs-sq"
+                    class="md:hidden"
+                    data-test="log-stream-row-more-actions"
+                    @click.stop
+                  />
+                </template>
+                <ODropdownItem
+                  icon-left="search"
+                  class="md:hidden"
+                  data-test="log-stream-explore-btn-menu"
+                  @select="exploreStream({ row })"
+                >
+                  <span>{{ t("logStream.explore") }}</span>
+                </ODropdownItem>
+                <ODropdownItem
+                  icon-left="description"
+                  class="md:hidden"
+                  data-test="log-stream-schema-btn-menu"
+                  @select="listSchema({ row })"
+                >
+                  <span>{{ t("logStream.schemaHeader") }}</span>
+                </ODropdownItem>
+                <ODropdownItem
+                  icon-left="delete"
+                  variant="destructive"
+                  class="md:hidden"
+                  data-test="log-stream-delete-btn-menu"
+                  @select="confirmDeleteAction({ row })"
+                >
+                  <span>{{ t("logStream.delete") }}</span>
+                </ODropdownItem>
+              </ODropdown>
             </div>
           </template>
           <template #empty>
@@ -286,7 +328,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template #bottom="scope">
             <div class="flex w-full items-center justify-between py-2">
               <div class="flex w-full items-center text-xs font-normal">
-                {{ t("logStream.streamsUnit", { count: scope.totalRows }) }}
+                <span class="max-md:hidden">
+                  {{ t("logStream.streamsUnit", { count: scope.totalRows }) }}
+                </span>
                 <OButton
                   v-if="selectedIds.length > 0"
                   icon-left="delete"
@@ -403,6 +447,8 @@ import { watch } from "vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
 import ODialog from "@/lib/overlay/Dialog/ODialog.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import OToggleGroup from "@/lib/core/ToggleGroup/OToggleGroup.vue";
 import OToggleGroupItem from "@/lib/core/ToggleGroup/OToggleGroupItem.vue";
@@ -423,6 +469,8 @@ export default defineComponent({
     OButton,
     OTooltip,
     ODialog,
+    ODropdown,
+    ODropdownItem,
     OIcon,
     OToggleGroup,
     OToggleGroupItem,
diff --git a/web/src/views/OverviewTab.vue b/web/src/views/OverviewTab.vue
index b3f725a83b..d5b3b1ca47 100644
--- a/web/src/views/OverviewTab.vue
+++ b/web/src/views/OverviewTab.vue
@@ -108,7 +108,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               >{{ inc.alert_count }} {{ t("overview.alertsSuffix") }}</span
             >
           </div>
-          <span class="invisible shrink-0 whitespace-nowrap group-hover:visible">
+          <span class="invisible shrink-0 whitespace-nowrap group-hover:visible max-md:visible">
             <OButton variant="ghost-primary" size="sm" @click="goToIncident(inc)">
               {{ t("overview.investigate") }}
             </OButton>
@@ -337,7 +337,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <span class="text-text-secondary text-xs font-normal">{{ item.description }}</span>
             </div>
           </div>
-          <span class="invisible shrink-0 whitespace-nowrap group-hover:visible">
+          <span class="invisible shrink-0 whitespace-nowrap group-hover:visible max-md:visible">
             <OButton variant="ghost-primary" size="sm" @click="goToAlert(item)">
               {{ t("overview.investigate") }}
             </OButton>
diff --git a/web/src/views/RUM/AppErrors.vue b/web/src/views/RUM/AppErrors.vue
index 5e970eb597..fb29ab0b03 100644
--- a/web/src/views/RUM/AppErrors.vue
+++ b/web/src/views/RUM/AppErrors.vue
@@ -17,10 +17,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div class="sessions_page flex min-h-0 flex-1 flex-col overflow-hidden">
     <div>
-      <div class="bg-card-glass-bg border-border-default px-page-edge border-b py-1.5">
-        <div class="flex items-start gap-1">
+      <div
+        class="bg-card-glass-bg border-border-default px-page-edge border-b py-1.5"
+        data-drawer-anchor="rum-errors-toolbar"
+      >
+        <div class="flex items-start gap-1 max-md:flex-wrap">
           <!-- Query editor (flex-grow to fill available space) -->
-          <div class="relative min-w-0 flex-1">
+          <div class="relative min-w-0 flex-1 max-md:basis-full">
             <QueryEditor
               ref="errorQueryEditorRef"
               editor-id="rum-errors-query-editor"
@@ -51,7 +54,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
 
           <!-- Controls on the right -->
-          <div class="flex shrink-0 items-start gap-1">
+          <div class="flex shrink-0 items-start gap-1 max-md:w-full max-md:flex-wrap">
+            <OButton
+              variant="outline"
+              size="icon-toolbar"
+              icon-left="menu"
+              class="md:hidden"
+              data-test="rum-errors-mobile-fields-btn"
+              @click="mobileFieldsOpen = true"
+            >
+              <OTooltip :content="t('search.showFields')" />
+            </OButton>
             <SyntaxGuide />
             <DateTime
               auto-apply
@@ -103,14 +116,42 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- end bg-card-glass-bg -->
     </div>
     <!-- end toolbar wrapper -->
+    <ODrawer
+      v-if="isMobile"
+      v-model:open="mobileFieldsOpen"
+      side="left"
+      :width="80"
+      bleed
+      :title="t('search.showFields')"
+      anchor='[data-drawer-anchor="rum-errors-toolbar"]'
+      data-test="rum-errors-mobile-fields-drawer"
+    >
+      <SearchFieldList
+        :fields="streamFields"
+        :time-stamp="{
+          startTime: dateTime.startTime,
+          endTime: dateTime.endTime,
+        }"
+        :stream-name="errorTrackingState.data.stream.errorStream"
+        stream-type="logs"
+        :enable-grouping="true"
+        :query="errorTrackingState.data.editorValue"
+        :base-filter="fieldListBaseFilter"
+        @event-emitted="handleSidebarEvent"
+      />
+    </ODrawer>
     <OSplitter
       class="logs-horizontal-splitter min-h-0 flex-1"
       v-model="splitterModel"
       unit="px"
       :horizontal="false"
+      :limits="isMobile ? [0, 0] : undefined"
     >
       <template #before>
-        <div class="bg-surface-panel border-border-default h-full overflow-auto border-e py-1">
+        <div
+          v-if="!isMobile"
+          class="bg-surface-panel border-border-default h-full overflow-auto border-e py-1"
+        >
           <SearchFieldList
             :fields="streamFields"
             :time-stamp="{
@@ -129,9 +170,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <template #after>
         <div class="flex h-full min-h-0 flex-col">
           <!-- Errors-over-time chart + KPI summary -->
-          <div class="px-page-edge grid h-44 shrink-0 grid-cols-1 gap-2 pt-1.5 lg:grid-cols-5">
+          <!-- Stacked < lg the grid must size itself, or it overflows into the filter bar below. -->
+          <div
+            class="px-page-edge grid shrink-0 grid-cols-1 gap-2 pt-1.5 max-lg:auto-rows-min lg:h-44 lg:grid-cols-5"
+          >
             <ErrorsOverTimeChart
-              class="lg:col-span-3"
+              class="max-lg:min-h-40 lg:col-span-3"
               :buckets="chartSeries"
               :deploy="latestDeploy"
               :spike-factor="deploySpikeFactor"
@@ -250,6 +294,8 @@ import {
   defineAsyncComponent,
   watch,
 } from "vue";
+import ODrawer from "@/lib/overlay/Drawer/ODrawer.vue";
+import useBreakpoint from "@/composables/useBreakpoint";
 import { rangesFromServerError, type SqlErrorRange } from "@/utils/query/sqlDiagnostics";
 import { useQueryPlaceholder } from "@/components/logs/useQueryPlaceholder";
 import useSqlSuggestions from "@/composables/useSuggestions";
@@ -300,6 +346,15 @@ const dateTime = ref({
 });
 const streamFields: Ref<any[]> = ref([]);
 const splitterModel = ref(250);
+const { isMobile } = useBreakpoint();
+const mobileFieldsOpen = ref(false);
+watch(
+  isMobile,
+  (mobile) => {
+    splitterModel.value = mobile ? 0 : 250;
+  },
+  { immediate: true },
+);
 const editorFocused = ref(false);
 const errorQueryEditorRef = ref<any>(null);
 
diff --git a/web/src/views/RUM/AppSessions.vue b/web/src/views/RUM/AppSessions.vue
index 8d3144d1f6..99809b81f6 100644
--- a/web/src/views/RUM/AppSessions.vue
+++ b/web/src/views/RUM/AppSessions.vue
@@ -18,10 +18,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div class="sessions_page flex min-h-0 flex-1 flex-col overflow-hidden">
     <template v-if="isSessionReplayEnabled">
       <div>
-        <div class="bg-card-glass-bg border-border-default px-page-edge border-b py-1.5">
-          <div class="flex items-start gap-1">
+        <div
+          class="bg-card-glass-bg border-border-default px-page-edge border-b py-1.5"
+          data-drawer-anchor="rum-sessions-toolbar"
+        >
+          <div class="flex items-start gap-1 max-md:flex-wrap">
             <!-- Query editor (flex-grow to fill available space) -->
-            <div class="relative min-w-0 flex-1">
+            <div class="relative min-w-0 flex-1 max-md:basis-full">
               <QueryEditor
                 ref="sessionQueryEditorRef"
                 editor-id="session-replay-query-editor"
@@ -52,7 +55,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </div>
 
             <!-- Controls on the right -->
-            <div class="flex shrink-0 items-start gap-1">
+            <div class="flex shrink-0 items-start gap-1 max-md:w-full max-md:flex-wrap">
+              <OButton
+                variant="outline"
+                size="icon-toolbar"
+                icon-left="menu"
+                class="md:hidden"
+                data-test="rum-sessions-mobile-fields-btn"
+                @click="mobileFieldsOpen = true"
+              >
+                <OTooltip :content="t('search.showFields')" />
+              </OButton>
               <SyntaxGuide />
               <DateTime
                 auto-apply
@@ -116,14 +129,43 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
       <!-- end toolbar wrapper -->
 
+      <ODrawer
+        v-if="isMobile"
+        v-model:open="mobileFieldsOpen"
+        side="left"
+        :width="80"
+        bleed
+        :title="t('search.showFields')"
+        anchor='[data-drawer-anchor="rum-sessions-toolbar"]'
+        data-test="rum-sessions-mobile-fields-drawer"
+      >
+        <SearchFieldList
+          :fields="streamFields"
+          :time-stamp="{
+            startTime: dateTime.startTime,
+            endTime: dateTime.endTime,
+          }"
+          :stream-name="rumSessionStreamName"
+          stream-type="logs"
+          :enable-grouping="true"
+          :query="sessionState.data.editorValue"
+          :base-filter="fieldListBaseFilter"
+          :show-count="false"
+          @event-emitted="handleSidebarEvent"
+        />
+      </ODrawer>
       <OSplitter
         class="logs-horizontal-splitter min-h-0 flex-1"
         v-model="splitterModel"
         unit="px"
         :horizontal="false"
+        :limits="isMobile ? [0, 0] : undefined"
       >
         <template #before>
-          <div class="bg-surface-panel border-border-default h-full overflow-auto border-e py-1">
+          <div
+            v-if="!isMobile"
+            class="bg-surface-panel border-border-default h-full overflow-auto border-e py-1"
+          >
             <SearchFieldList
               :fields="streamFields"
               :time-stamp="{
@@ -429,7 +471,10 @@ import {
   onBeforeMount,
   defineAsyncComponent,
   computed,
+  watch,
 } from "vue";
+import ODrawer from "@/lib/overlay/Drawer/ODrawer.vue";
+import useBreakpoint from "@/composables/useBreakpoint";
 import { useQueryPlaceholder } from "@/components/logs/useQueryPlaceholder";
 import useSqlSuggestions from "@/composables/useSuggestions";
 import { useSqlEditorDiagnostics } from "@/composables/useSqlEditorDiagnostics";
@@ -1318,6 +1363,15 @@ const updateDateChange = (date: any) => {
 };
 
 const splitterModel = ref(250);
+const { isMobile } = useBreakpoint();
+const mobileFieldsOpen = ref(false);
+watch(
+  isMobile,
+  (mobile) => {
+    splitterModel.value = mobile ? 0 : 250;
+  },
+  { immediate: true },
+);
 
 const rows = ref<Session[]>([]);
 
diff --git a/web/src/views/SyntheticMonitoring.vue b/web/src/views/SyntheticMonitoring.vue
index e00b84cd57..cf4cfb3876 100644
--- a/web/src/views/SyntheticMonitoring.vue
+++ b/web/src/views/SyntheticMonitoring.vue
@@ -79,9 +79,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </OTabs>
     </template>
     <!-- CONTENT AREA: sidebar + main -->
-    <div class="flex flex-1 overflow-hidden">
+    <div class="flex flex-1 overflow-hidden max-md:flex-col">
       <!-- LEFT SIDEBAR: folder navigation (locations are org-level, no folders) -->
-      <div v-if="activeSection === 'checks'" class="w-rail shrink-0 overflow-y-auto">
+      <div
+        v-if="activeSection === 'checks'"
+        class="w-rail max-md:border-border-default shrink-0 overflow-y-auto max-md:h-auto max-md:w-full max-md:border-b"
+      >
         <FolderList
           type="synthetics"
           data-test="synthetic-monitoring-folder-list"
@@ -100,7 +103,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       />
 
       <!-- RIGHT MAIN: filter bar + table -->
-      <div v-if="activeSection === 'checks'" class="flex min-w-0 flex-1 flex-col overflow-hidden">
+      <div
+        v-if="activeSection === 'checks'"
+        class="flex min-w-0 flex-1 flex-col overflow-hidden max-md:min-h-0"
+      >
         <!-- ── CHECKS TABLE ── -->
         <MonitorTable
           :mode="monitorTableMode"
@@ -160,22 +166,32 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
           <!-- Toolbar content rendered inside OTable's toolbar bar -->
           <template #toolbar>
-            <div class="flex min-w-0 flex-1 items-center gap-2">
+            <!-- A container, not a viewport breakpoint: the folder rail squeezes this toolbar at any width. -->
+            <div
+              class="flex min-w-0 flex-1 items-center gap-2 max-lg:@container/synthetics-toolbar max-lg:flex-wrap max-lg:gap-y-1.5 max-md:contents"
+            >
               <!-- Type tabs -->
-              <OToggleGroup :model-value="activeTab" @update:model-value="onTabChange">
+              <OToggleGroup
+                mobile-dropdown
+                :model-value="activeTab"
+                data-test="synthetic-monitoring-type-tabs"
+                @update:model-value="onTabChange"
+              >
                 <OToggleGroupItem
                   v-for="tab in typeTabs"
                   :key="tab.key"
                   :value="tab.key"
                   size="sm"
                   :icon-left="tab.icon"
+                  :title="lgUp ? undefined : tab.label"
                 >
-                  {{ tab.label }}
+                  <span class="@max-[38rem]/synthetics-toolbar:hidden">{{ tab.label }}</span>
                 </OToggleGroupItem>
               </OToggleGroup>
 
               <!-- Search -->
-              <div class="min-w-0 flex-1">
+              <!-- flex-1 is basis-0, so the min-w floor is what wraps the input instead of shrinking it to nothing. -->
+              <div class="min-w-0 flex-1 md:max-lg:min-w-60">
                 <OInput
                   v-model="search"
                   :placeholder="
@@ -202,16 +218,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         size="xs"
                         icon-left="folder-outline"
                         data-test="synthetic-monitoring-search-this-folder-btn"
+                        :title="isMobile ? t('synthetics.search.thisFolder') : undefined"
                       >
-                        {{ t("synthetics.search.thisFolder") }}
+                        <span class="max-md:hidden">{{ t("synthetics.search.thisFolder") }}</span>
                       </OToggleGroupItem>
                       <OToggleGroupItem
                         value="all"
                         size="xs"
                         icon-left="search"
                         data-test="synthetic-monitoring-search-all-folders-btn"
+                        :title="isMobile ? t('synthetics.search.allFolders') : undefined"
                       >
-                        {{ t("synthetics.search.allFolders") }}
+                        <span class="max-md:hidden">{{ t("synthetics.search.allFolders") }}</span>
                       </OToggleGroupItem>
                     </OToggleGroup>
                   </template>
@@ -469,12 +487,14 @@ import {
 import { getFoldersListByType } from "@/utils/commons";
 import { toast } from "@/lib/feedback/Toast/useToast";
 import { useConfirmDialog } from "@/composables/useConfirmDialog";
+import useBreakpoint from "@/composables/useBreakpoint";
 
 const router = useRouter();
 const route = useRoute();
 const store = useStore();
 const { t } = useI18nTyped();
 const { confirm } = useConfirmDialog();
+const { isMobile, lgUp } = useBreakpoint();
 
 // ── API types ──────────────────────────────────────────────────────────
 type SyntheticsSection = "checks" | "private" | "status-pages";
diff --git a/web/src/views/UsageTab.vue b/web/src/views/UsageTab.vue
index ede8093461..ba04aae5cd 100644
--- a/web/src/views/UsageTab.vue
+++ b/web/src/views/UsageTab.vue
@@ -163,8 +163,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- Main region — a filled resources rail beside the two status charts, so
            Functions/Dashboards live somewhere purposeful and the vertical space
            is actually used. Rail carries counts + one-click access to every area. -->
+      <!-- < lg the region must scroll, or the fixed-height grid compresses its auto rows and cards overlap. -->
       <div
-        class="grid min-h-0 flex-1 grid-cols-1 gap-3 lg:grid-cols-[16rem_minmax(0,1fr)_minmax(0,1fr)]"
+        class="grid min-h-0 flex-1 grid-cols-1 gap-3 max-lg:auto-rows-min max-lg:overflow-y-auto lg:grid-cols-[16rem_minmax(0,1fr)_minmax(0,1fr)]"
       >
         <!-- Resources rail -->
         <aside
diff --git a/web/src/views/slos/SloList.vue b/web/src/views/slos/SloList.vue
index 05d9211adb..32bee7c6a2 100644
--- a/web/src/views/slos/SloList.vue
+++ b/web/src/views/slos/SloList.vue
@@ -45,7 +45,7 @@
          so `type="alerts"` is not a copy-paste slip — it is what makes a
          "payments" folder hold that team's alerts and its SLOs together. -->
     <template #sidebar>
-      <FolderList type="alerts" @update:activeFolderId="onFolderChange" />
+      <FolderList type="alerts" :drawer-on-mobile="false" @update:activeFolderId="onFolderChange" />
     </template>
 
     <OTable
@@ -70,7 +70,7 @@
       @update:current-page="onPageChange"
     >
       <template #toolbar>
-        <div class="flex w-full items-center gap-2">
+        <div class="flex w-full items-center gap-2 max-lg:min-w-0 max-md:contents">
           <OButton
             v-if="selectedIds.length"
             variant="outline"
@@ -92,7 +92,7 @@
           >
             {{ t("common.export") }}
           </OButton>
-          <OToggleGroup v-model="typeFilter" data-test="slos-slolist-type-filter">
+          <OToggleGroup v-model="typeFilter" mobile-dropdown data-test="slos-slolist-type-filter">
             <OToggleGroupItem
               v-for="opt in typeOptions"
               :key="opt.value"
@@ -110,7 +110,7 @@
                will not shrink below its content width without it, which is
                how a long placeholder pushes the toolbar wider than the table.
                Same wrapper the Alerts toolbar uses. -->
-          <div class="min-w-0 flex-1">
+          <div class="min-w-0 flex-1 max-md:min-w-40">
             <OSearchInput
               v-model="search"
               class="w-full"
@@ -251,6 +251,7 @@
             variant="ghost"
             size="icon-sm"
             icon-left="edit"
+            class="max-md:hidden"
             :title="t('slos.edit')"
             :data-test="`slos-slolist-edit-${row.name}`"
             @click="goToEdit(row)"
@@ -259,6 +260,7 @@
             variant="ghost"
             size="icon-sm"
             icon-left="drive-file-move"
+            class="max-md:hidden"
             :title="t('slos.move')"
             :data-test="`slos-slolist-move-${row.name}`"
             @click="openMove([row])"
@@ -267,6 +269,7 @@
             variant="ghost"
             size="icon-sm"
             :icon-left="row.enabled ? 'pause' : 'play-arrow'"
+            class="max-md:hidden"
             :title="row.enabled ? t('slos.pause') : t('slos.resume')"
             :data-test="`slos-slolist-toggle-${row.name}`"
             @click="toggleEnabled(row)"
@@ -275,6 +278,7 @@
             variant="ghost"
             size="icon-sm"
             icon-left="download"
+            class="max-md:hidden"
             :title="t('common.export')"
             :data-test="`slos-slolist-export-${row.name}`"
             @click="openExport([row])"
@@ -283,10 +287,64 @@
             variant="ghost"
             size="icon-sm"
             icon-left="delete"
+            class="max-md:hidden"
             :title="t('slos.delete')"
             :data-test="`slos-slolist-delete-${row.name}`"
             @click="confirmDelete(row)"
           />
+          <ODropdown side="bottom" align="end">
+            <template #trigger>
+              <OButton
+                icon-left="more-vert"
+                variant="ghost"
+                size="icon-xs-sq"
+                class="md:hidden"
+                data-test="slos-slolist-row-more-actions"
+                @click.stop
+              />
+            </template>
+            <ODropdownItem
+              icon-left="edit"
+              class="md:hidden"
+              :data-test="`slos-slolist-edit-${row.name}-menu`"
+              @select="goToEdit(row)"
+            >
+              <span>{{ t("slos.edit") }}</span>
+            </ODropdownItem>
+            <ODropdownItem
+              icon-left="drive-file-move"
+              class="md:hidden"
+              :data-test="`slos-slolist-move-${row.name}-menu`"
+              @select="openMove([row])"
+            >
+              <span>{{ t("slos.move") }}</span>
+            </ODropdownItem>
+            <ODropdownItem
+              :icon-left="row.enabled ? 'pause' : 'play-arrow'"
+              class="md:hidden"
+              :data-test="`slos-slolist-toggle-${row.name}-menu`"
+              @select="toggleEnabled(row)"
+            >
+              <span>{{ row.enabled ? t("slos.pause") : t("slos.resume") }}</span>
+            </ODropdownItem>
+            <ODropdownItem
+              icon-left="download"
+              class="md:hidden"
+              :data-test="`slos-slolist-export-${row.name}-menu`"
+              @select="openExport([row])"
+            >
+              <span>{{ t("common.export") }}</span>
+            </ODropdownItem>
+            <ODropdownItem
+              icon-left="delete"
+              variant="destructive"
+              class="md:hidden"
+              :data-test="`slos-slolist-delete-${row.name}-menu`"
+              @select="confirmDelete(row)"
+            >
+              <span>{{ t("slos.delete") }}</span>
+            </ODropdownItem>
+          </ODropdown>
         </div>
       </template>
 
@@ -413,6 +471,8 @@ import SelectFolderDropDown from "@/components/common/sidebar/SelectFolderDropDo
 import OBanner from "@/lib/feedback/Banner/OBanner.vue";
 import OButton from "@/lib/core/Button/OButton.vue";
 import ODialog from "@/lib/overlay/Dialog/ODialog.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import OPageLayout from "@/lib/core/PageLayout/OPageLayout.vue";
 import OProgressBar from "@/lib/data/ProgressBar/OProgressBar.vue";
diff --git a/web/src/views/synthetics/PrivateLocations.vue b/web/src/views/synthetics/PrivateLocations.vue
index eb8d65c75e..09dc7e966e 100644
--- a/web/src/views/synthetics/PrivateLocations.vue
+++ b/web/src/views/synthetics/PrivateLocations.vue
@@ -137,6 +137,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             variant="ghost"
             size="icon-sm"
             icon-left="content-copy"
+            class="max-md:hidden"
             :title="t('synthetics.privateLocations.copySetupCmd')"
             :data-test="`synthetics-private-locations-copy-btn-${(row as any).id}`"
             @click="emit('copy-setup', row as any)"
@@ -145,6 +146,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             variant="ghost-destructive"
             size="icon-sm"
             icon-left="delete"
+            class="max-md:hidden"
             :disabled="checksUsing(row) > 0"
             :title="
               checksUsing(row) > 0
@@ -156,6 +158,42 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :data-test="`synthetics-private-locations-delete-btn-${(row as any).id}`"
             @click="emit('delete', row as any)"
           />
+          <ODropdown side="bottom" align="end">
+            <template #trigger>
+              <OButton
+                icon-left="more-vert"
+                variant="ghost"
+                size="icon-xs-sq"
+                class="md:hidden"
+                data-test="synthetics-private-locations-row-more-actions"
+                @click.stop
+              />
+            </template>
+            <ODropdownItem
+              icon-left="content-copy"
+              class="md:hidden"
+              :data-test="`synthetics-private-locations-copy-btn-${(row as any).id}-menu`"
+              @select="emit('copy-setup', row as any)"
+            >
+              <span>{{ t("synthetics.privateLocations.copySetupCmd") }}</span>
+            </ODropdownItem>
+            <ODropdownItem
+              icon-left="delete"
+              variant="destructive"
+              class="md:hidden"
+              :disabled="checksUsing(row) > 0"
+              :data-test="`synthetics-private-locations-delete-btn-${(row as any).id}-menu`"
+              @select="emit('delete', row as any)"
+            >
+              <span>{{
+                checksUsing(row) > 0
+                  ? t("synthetics.privateLocations.deleteBlocked", {
+                      count: checksUsing(row),
+                    })
+                  : t("synthetics.table.delete")
+              }}</span>
+            </ODropdownItem>
+          </ODropdown>
         </div>
       </template>
 
@@ -186,6 +224,8 @@ import OInput from "@/lib/forms/Input/OInput.vue";
 import OBadge from "@/lib/core/Badge/OBadge.vue";
 import OTag from "@/lib/core/Badge/OTag.vue";
 import OTooltip from "@/lib/overlay/Tooltip/OTooltip.vue";
+import ODropdown from "@/lib/overlay/Dropdown/ODropdown.vue";
+import ODropdownItem from "@/lib/overlay/Dropdown/ODropdownItem.vue";
 import OEmptyState from "@/lib/core/EmptyState/OEmptyState.vue";
 import type { SyntheticLocation } from "@/types/synthetics";
 import { formatTimeAgoUs } from "@/utils/synthetics/format";
diff --git a/web/src/views/synthetics/RunDetail.vue b/web/src/views/synthetics/RunDetail.vue
index e0f0577029..3bd021790f 100644
--- a/web/src/views/synthetics/RunDetail.vue
+++ b/web/src/views/synthetics/RunDetail.vue
@@ -386,7 +386,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                                     />
                                   </OButton>
                                   <div
-                                    class="rounded-default bg-surface-base/80 pointer-events-none absolute top-2 right-2 flex h-7 w-7 items-center justify-center opacity-0 transition-opacity group-hover:opacity-100"
+                                    class="rounded-default bg-surface-base/80 pointer-events-none absolute top-2 right-2 flex h-7 w-7 items-center justify-center opacity-0 transition-opacity group-hover:opacity-100 max-md:opacity-100"
                                     aria-hidden="true"
                                   >
                                     <OIcon name="fullscreen" size="sm" class="text-text-body" />
diff --git a/web/src/views/synthetics/status-pages/StatusPagesList.vue b/web/src/views/synthetics/status-pages/StatusPagesList.vue
index 6b14c09a16..b04671152f 100644
--- a/web/src/views/synthetics/status-pages/StatusPagesList.vue
+++ b/web/src/views/synthetics/status-pages/StatusPagesList.vue
@@ -134,6 +134,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             variant="ghost"
             size="icon-sm"
             icon-left="edit"
+            class="max-md:hidden"
             :data-test="`status-pages-edit-btn-${(row as any).id}`"
             @click.stop="emit('edit', row)"
           >
@@ -153,6 +154,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </OButton>
             </template>
 
+            <ODropdownItem
+              class="md:hidden"
+              :data-test="`status-pages-edit-btn-${(row as any).id}-menu`"
+              @select="emit('edit', row)"
+            >
+              <template #icon-left>
+                <OIcon name="edit" size="sm" />
+              </template>
+              {{ t("common.edit") }}
+            </ODropdownItem>
+
             <ODropdownItem
               :disabled="!advancedEnabled"
               :data-test="`status-pages-post-update-item-${(row as any).id}`"