From c0c031ea604934fe899990696c7a0a7551ba0aa0 Mon Sep 17 00:00:00 2001
From: Suresh Chaudhary <hello@suresh.im>
Date: Thu, 16 Apr 2026 20:25:38 +0530
Subject: [PATCH] feat: responsive design

---
 ui/app/clientLayout.tsx                       |   6 +-
 ui/app/workspace/config/logging/page.tsx      |   2 +-
 ui/app/workspace/config/views/loggingView.tsx |  12 +-
 ui/app/workspace/dashboard/page.tsx           |  76 ++++++++-----
 ui/app/workspace/logs/page.tsx                |  36 +++---
 .../workspace/logs/views/logsHeaderView.tsx   | 104 +++++++++++-------
 ui/app/workspace/mcp-logs/page.tsx            |  22 ++--
 .../mcp-logs/views/mcpHeaderView.tsx          |  63 ++++++++---
 .../fragments/maximFormFragment.tsx           |   7 +-
 .../fragments/otelFormFragment.tsx            |   9 +-
 .../fragments/prometheusFormFragment.tsx      |  11 +-
 ui/app/workspace/observability/page.tsx       |   2 +-
 .../observability/views/observabilityView.tsx |  42 ++++++-
 ui/components/filters/logsFilterSidebar.tsx   |  20 ++--
 ui/components/filters/mcpFilterSidebar.tsx    |  20 ++--
 ui/components/header.tsx                      |  42 +++++--
 ui/components/sidebar.tsx                     |   4 +-
 ui/components/ui/datePickerWithRange.tsx      |  40 ++++++-
 ui/components/ui/sidebar.tsx                  |   7 +-
 19 files changed, 356 insertions(+), 169 deletions(-)

diff --git a/ui/app/clientLayout.tsx b/ui/app/clientLayout.tsx
index aff8903566..eacabe3394 100644
--- a/ui/app/clientLayout.tsx
+++ b/ui/app/clientLayout.tsx
@@ -1,4 +1,5 @@
 import FullPageLoader from "@/components/fullPageLoader";
+import Header from "@/components/header";
 import NotAvailableBanner from "@/components/notAvailableBanner";
 import ProgressProvider from "@/components/progressBar";
 import Sidebar from "@/components/sidebar";
@@ -43,8 +44,9 @@ function AppContent({ children }: { children: React.ReactNode }) {
 				<StoreSyncInitializer />
 				<SidebarProvider>
 					<Sidebar />
-					<div className="dark:bg-card custom-scrollbar content-container my-[0.5rem] mr-[0.5rem] h-[calc(100dvh-1rem)] w-full min-w-xl overflow-auto rounded-md border border-gray-200 bg-white px-10 dark:border-zinc-800">
-						<main className="custom-scrollbar content-container-inner relative mx-auto flex flex-col overflow-y-hidden p-4">
+					<div className="dark:bg-card custom-scrollbar content-container h-[100dvh] w-full overflow-auto bg-white md:my-[0.5rem] md:mr-[0.5rem] md:h-[calc(100dvh-1rem)] md:min-w-xl md:rounded-md md:border md:border-gray-200 md:px-10 dark:border-zinc-800 dark:md:border-zinc-800">
+						<Header />
+						<main className="custom-scrollbar content-container-inner relative mx-auto flex flex-col overflow-y-hidden p-3 md:p-4">
 							{isLoading ? <FullPageLoader /> : <FullPage config={bifrostConfig}>{children}</FullPage>}
 						</main>
 					</div>
diff --git a/ui/app/workspace/config/logging/page.tsx b/ui/app/workspace/config/logging/page.tsx
index 01476f218e..c08c8062fe 100644
--- a/ui/app/workspace/config/logging/page.tsx
+++ b/ui/app/workspace/config/logging/page.tsx
@@ -2,7 +2,7 @@ import LoggingView from "../views/loggingView";
 
 export default function LoggingPage() {
 	return (
-		<div className="mx-auto flex w-full max-w-7xl">
+		<div className="mx-auto flex w-full max-w-7xl px-3 sm:px-0">
 			<LoggingView />
 		</div>
 	);
diff --git a/ui/app/workspace/config/views/loggingView.tsx b/ui/app/workspace/config/views/loggingView.tsx
index bb78edc733..03af5eb901 100644
--- a/ui/app/workspace/config/views/loggingView.tsx
+++ b/ui/app/workspace/config/views/loggingView.tsx
@@ -79,7 +79,7 @@ export default function LoggingView() {
 			<div className="space-y-4">
 				{/* Enable Logs */}
 				<div>
-					<div className="flex items-center justify-between space-x-2 rounded-lg border p-4">
+					<div className="flex flex-col gap-3 rounded-lg border p-4 sm:flex-row sm:items-center sm:justify-between sm:gap-0 sm:space-x-2">
 						<div className="space-y-0.5">
 							<label htmlFor="enable-logging" className="text-sm font-medium">
 								Enable Logs
@@ -109,7 +109,7 @@ export default function LoggingView() {
 				{/* Disable Content Logging - Only show when logging is enabled */}
 				{localConfig.enable_logging && bifrostConfig?.is_logs_connected && (
 					<div>
-						<div className="flex items-center justify-between space-x-2 rounded-lg border p-4">
+						<div className="flex flex-col gap-3 rounded-lg border p-4 sm:flex-row sm:items-center sm:justify-between sm:gap-0 sm:space-x-2">
 							<div className="space-y-0.5">
 								<label htmlFor="disable-content-logging" className="text-sm font-medium">
 									Disable Content Logging
@@ -132,7 +132,7 @@ export default function LoggingView() {
 
 				{/* Log Retention Days */}
 				{localConfig.enable_logging && bifrostConfig?.is_logs_connected && (
-					<div className="flex items-center justify-between space-x-2 rounded-lg border p-4">
+					<div className="flex flex-col gap-3 rounded-lg border p-4 sm:flex-row sm:items-center sm:justify-between sm:gap-0 sm:space-x-2">
 						<div className="space-y-0.5">
 							<Label htmlFor="log-retention-days" className="text-sm font-medium">
 								Log Retention Days
@@ -150,12 +150,12 @@ export default function LoggingView() {
 								const value = parseInt(e.target.value) || 1;
 								handleConfigChange("log_retention_days", Math.max(1, value));
 							}}
-							className="w-24"
+							className="w-full sm:w-24"
 						/>
 					</div>
 				)}
 
-				<div className="flex items-center justify-between space-x-2 rounded-lg border p-4">
+				<div className="flex flex-col gap-3 rounded-lg border p-4 sm:flex-row sm:items-center sm:justify-between sm:gap-0 sm:space-x-2">
 					<div className="space-y-0.5">
 						<label htmlFor="hide-deleted-virtual-keys-in-filters" className="text-sm font-medium">
 							Do Not Show Deleted VirtualKeys In Filters
@@ -197,7 +197,7 @@ export default function LoggingView() {
 			</div>
 
 			<div className="flex justify-end pt-2">
-				<Button onClick={handleSave} disabled={!hasChanges || isLoading || !hasSettingsUpdateAccess}>
+				<Button onClick={handleSave} disabled={!hasChanges || isLoading || !hasSettingsUpdateAccess} className="w-full sm:w-auto">
 					{isLoading ? "Saving..." : "Save Changes"}
 				</Button>
 			</div>
diff --git a/ui/app/workspace/dashboard/page.tsx b/ui/app/workspace/dashboard/page.tsx
index 0a4584cc0d..c7ac442f23 100644
--- a/ui/app/workspace/dashboard/page.tsx
+++ b/ui/app/workspace/dashboard/page.tsx
@@ -1,6 +1,8 @@
 import { LogsFilterSidebar } from "@/components/filters/logsFilterSidebar";
+import { Button } from "@/components/ui/button";
 import { DateTimePickerWithRange } from "@/components/ui/datePickerWithRange";
 import { ScrollArea } from "@/components/ui/scrollArea";
+import { Sheet, SheetContent, SheetDescription, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
 	useGetMCPAvailableFilterDataQuery,
@@ -35,6 +37,7 @@ import type {
 } from "@/lib/types/logs";
 import { dateUtils } from "@/lib/types/logs";
 import UserRankingsTab from "@enterprise/components/user-rankings/userRankingsTab";
+import { Filter } from "lucide-react";
 import { parseAsInteger, parseAsString, useQueryStates } from "nuqs";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { type ChartType } from "./components/charts/chartTypeToggle";
@@ -708,18 +711,39 @@ export default function DashboardPage() {
 	}, []);
 
 	return (
-		<div id="dashboard-root" className="no-padding-parent no-border-parent bg-background flex h-[calc(100vh_-_16px)] w-full gap-3">
-			{/* Sidebar Filters */}
-			<LogsFilterSidebar filters={filters} onFiltersChange={setFilters} />
+		<div
+			id="dashboard-root"
+			className="no-padding-parent no-border-parent bg-background flex h-full min-h-[calc(100dvh_-_5rem)] w-full gap-3 md:h-[calc(100vh_-_16px)] md:min-h-0"
+		>
+			{/* Sidebar Filters — hidden on mobile, use date picker + tab-level filters for filtering */}
+			<div className="hidden md:block">
+				<LogsFilterSidebar filters={filters} onFiltersChange={setFilters} />
+			</div>
 
 			{/* Main Content */}
-			<ScrollArea className="bg-card flex min-w-0 flex-1 flex-col gap-4 rounded-l-md">
+			<ScrollArea
+				className="bg-card flex min-w-0 flex-1 flex-col gap-4 rounded-md md:rounded-l-md md:rounded-r-none"
+				viewportClassName="[&>div]:[display:block!important]"
+			>
 				{/* Header */}
-				<div className="flex items-center justify-between p-4">
+				<div className="flex flex-col gap-3 p-3 md:flex-row md:items-center md:justify-between md:p-4">
 					<div className="flex items-center gap-2">
 						<h1 className="text-lg font-semibold">Dashboard</h1>
 					</div>
-					<div className="flex items-center gap-2">
+					<div className="flex flex-wrap items-center gap-2">
+						{/* Mobile-only filter trigger — opens the sidebar in a Sheet (desktop shows the persistent sidebar) */}
+						<Sheet>
+							<SheetTrigger asChild>
+								<Button variant="outline" size="sm" className="h-7.5 shrink-0 md:hidden" aria-label="Open filters">
+									<Filter className="size-4" />
+								</Button>
+							</SheetTrigger>
+							<SheetContent side="left" className="w-[85vw] max-w-sm border-r p-0">
+								<SheetTitle className="sr-only">Filters</SheetTitle>
+								<SheetDescription className="sr-only">Filter dashboard data by providers, models, status, and metadata.</SheetDescription>
+								<LogsFilterSidebar filters={filters} onFiltersChange={setFilters} disableCollapse className="w-full rounded-none" />
+							</SheetContent>
+						</Sheet>
 						<ExportPopover
 							getData={getDashboardData}
 							onPreloadData={handlePreloadData}
@@ -727,7 +751,7 @@ export default function DashboardPage() {
 							onPdfExportDone={handlePdfExportDone}
 						/>
 						{urlState.tab === "mcp" && mcpFilterData && (
-							<div className="flex items-center gap-1">
+							<div className="flex flex-wrap items-center gap-1">
 								{mcpFilterData.tool_names?.length > 0 && (
 									<ModelFilterSelect
 										models={mcpFilterData.tool_names}
@@ -772,26 +796,28 @@ export default function DashboardPage() {
 					</div>
 				</div>
 
-				<div className="p-4">
+				<div className="p-3 md:p-4">
 					{/* Tabs */}
 					<Tabs value={urlState.tab} onValueChange={handleTabChange}>
-						<TabsList className="mb-2">
-							<TabsTrigger value="overview" data-testid="dashboard-tab-overview">
-								Overview
-							</TabsTrigger>
-							<TabsTrigger value="provider-usage" data-testid="dashboard-tab-provider-usage">
-								Provider Usage
-							</TabsTrigger>
-							<TabsTrigger value="rankings" data-testid="dashboard-tab-rankings">
-								Model Rankings
-							</TabsTrigger>
-							<TabsTrigger value="mcp" data-testid="dashboard-tab-mcp">
-								MCP usage
-							</TabsTrigger>
-							<TabsTrigger value="user-rankings" data-testid="dashboard-tab-user-rankings">
-								User Rankings
-							</TabsTrigger>
-						</TabsList>
+						<div className="-mx-3 mb-2 overflow-x-auto px-3 [scrollbar-width:none] md:-mx-4 md:px-4 [&::-webkit-scrollbar]:hidden">
+							<TabsList className="flex max-w-[calc(100vw-26px)] gap-1 overflow-x-auto rounded-sm">
+								<TabsTrigger value="overview" data-testid="dashboard-tab-overview">
+									Overview
+								</TabsTrigger>
+								<TabsTrigger value="provider-usage" data-testid="dashboard-tab-provider-usage">
+									Provider Usage
+								</TabsTrigger>
+								<TabsTrigger value="rankings" data-testid="dashboard-tab-rankings">
+									Model Rankings
+								</TabsTrigger>
+								<TabsTrigger value="mcp" data-testid="dashboard-tab-mcp">
+									MCP usage
+								</TabsTrigger>
+								<TabsTrigger value="user-rankings" data-testid="dashboard-tab-user-rankings">
+									User Rankings
+								</TabsTrigger>
+							</TabsList>
+						</div>
 
 						{/* Overview Tab */}
 						<TabsContent value="overview" {...(pdfMode && { forceMount: true })}>
diff --git a/ui/app/workspace/logs/page.tsx b/ui/app/workspace/logs/page.tsx
index af26b87b39..2262093bc6 100644
--- a/ui/app/workspace/logs/page.tsx
+++ b/ui/app/workspace/logs/page.tsx
@@ -10,7 +10,6 @@ import FullPageLoader from "@/components/fullPageLoader";
 import { useColumnConfig } from "@/components/table";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Card, CardContent } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useWebSocket } from "@/hooks/useWebSocket";
 import {
@@ -835,7 +834,13 @@ export default function LogsPage() {
 			},
 			{
 				title: "User Success Rate",
-				value: fetchingStats ? <Skeleton className="h-8 w-16" /> : stats ? `${(stats.user_facing_success_rate ?? 0).toFixed(2)}%` : "-",
+				value: (
+					<NumberFlow
+						value={stats?.user_facing_success_rate ?? 0}
+						format={{ minimumFractionDigits: 2, maximumFractionDigits: 2 }}
+						suffix="%"
+					/>
+				),
 				icon: <CheckCircle className="size-4" />,
 				description: "Success rate as perceived by the end user. It includes fallback chains as one request.",
 			},
@@ -868,10 +873,7 @@ export default function LogsPage() {
 		return Object.keys(filterData.metadata_keys).sort();
 	}, [filterData?.metadata_keys]);
 
-	const columns = useMemo(
-		() => createColumns(handleDelete, hasDeleteAccess, metadataKeys),
-		[handleDelete, hasDeleteAccess, metadataKeys],
-	);
+	const columns = useMemo(() => createColumns(handleDelete, hasDeleteAccess, metadataKeys), [handleDelete, hasDeleteAccess, metadataKeys]);
 
 	const columnIds = useMemo(
 		() => columns.map((col) => ("id" in col && col.id ? col.id : "accessorKey" in col ? String(col.accessorKey) : "")).filter(Boolean),
@@ -959,18 +961,20 @@ export default function LogsPage() {
 	);
 
 	return (
-		<div className="dark:bg-card no-padding-parent no-border-parent h-[calc(100vh_-_16px)]">
+		<div className="dark:bg-card no-padding-parent no-border-parent h-[calc(100dvh_-_16px)]">
 			{initialLoading ? (
 				<FullPageLoader />
 			) : showEmptyState ? (
 				<EmptyState isSocketConnected={isSocketConnected} error={error} />
 			) : (
-				<div className="bg-background flex h-full w-full grow gap-3">
-					{/* Sidebar Filters */}
-					<LogsFilterSidebar filters={filters} onFiltersChange={setFilters} />
+				<div className="bg-background flex h-full w-full grow gap-2 md:gap-3">
+					{/* Sidebar Filters — hidden on small screens to free up width for the table */}
+					<div className="hidden h-full md:flex">
+						<LogsFilterSidebar filters={filters} onFiltersChange={setFilters} />
+					</div>
 
 					{/* Main Content */}
-					<div className="bg-card flex min-w-0 flex-1 flex-col gap-2 overflow-hidden rounded-l-md p-4 pb-2">
+					<div className="bg-card flex min-w-0 flex-1 flex-col gap-2 overflow-hidden rounded-md p-2 pb-2 sm:rounded-l-md sm:p-4 sm:pb-2">
 						<div className="shrink-0">
 							<LogsHeaderView
 								filters={filters}
@@ -985,15 +989,15 @@ export default function LogsPage() {
 								onResetColumns={resetColumns}
 							/>
 						</div>
-						<div className="grid shrink-0 grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
+						<div className="grid shrink-0 grid-cols-2 gap-2 sm:gap-3 md:grid-cols-3 md:gap-4 lg:grid-cols-6">
 							{statCards.map((card) => (
-								<Card key={card.title} className="py-4 shadow-none">
+								<Card key={card.title} className="py-3 shadow-none sm:py-4">
 									<CardContent
-										className={`flex items-center justify-between px-4 transition-opacity duration-200 ${fetchingStats ? "opacity-50" : "opacity-100"}`}
+										className={`flex items-center justify-between px-3 transition-opacity duration-200 sm:px-4 ${fetchingStats ? "opacity-50" : "opacity-100"}`}
 									>
 										<div className="w-full min-w-0">
 											<div className="text-muted-foreground flex items-center gap-1 text-xs">
-												{card.title}
+												<span className="truncate">{card.title}</span>
 												{"description" in card && card.description && (
 													<Tooltip>
 														<TooltipTrigger asChild>
@@ -1010,7 +1014,7 @@ export default function LogsPage() {
 													</Tooltip>
 												)}
 											</div>
-											<div className="truncate font-mono text-xl font-medium sm:text-2xl">{card.value}</div>
+											<div className="truncate font-mono text-lg font-medium sm:text-xl lg:text-2xl">{card.value}</div>
 										</div>
 									</CardContent>
 								</Card>
diff --git a/ui/app/workspace/logs/views/logsHeaderView.tsx b/ui/app/workspace/logs/views/logsHeaderView.tsx
index 848c49e342..8e5458e645 100644
--- a/ui/app/workspace/logs/views/logsHeaderView.tsx
+++ b/ui/app/workspace/logs/views/logsHeaderView.tsx
@@ -1,12 +1,14 @@
+import { LogsFilterSidebar } from "@/components/filters/logsFilterSidebar";
 import { ColumnConfigDropdown, type ColumnConfigEntry } from "@/components/table";
 import { Button } from "@/components/ui/button";
 import { Command, CommandItem, CommandList } from "@/components/ui/command";
 import { DateTimePickerWithRange } from "@/components/ui/datePickerWithRange";
 import { Input } from "@/components/ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Sheet, SheetContent, SheetDescription, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
 import { getErrorMessage, useRecalculateLogCostsMutation } from "@/lib/store";
 import type { LogFilters as LogFiltersType } from "@/lib/types/logs";
-import { Calculator, MoreVertical, Pause, Play, Search } from "lucide-react";
+import { Calculator, Filter, MoreVertical, Pause, Play, Search } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 
@@ -134,22 +136,64 @@ export function LogsHeaderView({
 	);
 
 	return (
-		<div className="flex grow items-center justify-between space-x-2">
-			<Button variant={"outline"} size="sm" className="h-7.5" onClick={() => onLiveToggle(!liveEnabled)}>
-				{liveEnabled ? (
-					<>
-						<Pause className="h-4 w-4" />
-						Live updates
-					</>
-				) : (
-					<>
-						<Play className="h-4 w-4" />
-						Live updates
-					</>
-				)}
-			</Button>
-			<div className="border-input flex h-7.5 flex-1 items-center gap-2 rounded-sm border">
-				<Search className="mr-0.5 ml-2 size-4" />
+		<div className="flex grow flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
+			{/* Mobile row 1: icon buttons (filter, live) on the left + (more, columns) right-aligned.
+			    On sm+ this wrapper becomes display:contents so its children flow inline with the rest. */}
+			<div className="flex items-center gap-2 sm:contents">
+				{/* Filter sheet trigger — mobile only */}
+				<Sheet>
+					<SheetTrigger asChild>
+						<Button variant="outline" size="sm" className="h-7.5 shrink-0 md:hidden" aria-label="Open filters">
+							<Filter className="size-4" />
+						</Button>
+					</SheetTrigger>
+					<SheetContent side="left" className="w-[85vw] max-w-sm border-r p-0">
+						<SheetTitle className="sr-only">Filters</SheetTitle>
+						<SheetDescription className="sr-only">Filter logs by status, providers, models, and metadata.</SheetDescription>
+						<LogsFilterSidebar filters={filters} onFiltersChange={onFiltersChange} disableCollapse className="w-full rounded-none" />
+					</SheetContent>
+				</Sheet>
+
+				<Button variant={"outline"} size="sm" className="h-7.5 shrink-0 sm:order-1" onClick={() => onLiveToggle(!liveEnabled)}>
+					{liveEnabled ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
+					<span className="hidden sm:inline">Live updates</span>
+				</Button>
+
+				<div className="ml-auto flex items-center gap-2 sm:contents">
+					<Popover open={openMoreActionsPopover} onOpenChange={setOpenMoreActionsPopover}>
+						<PopoverTrigger asChild>
+							<Button variant="outline" size="sm" className="h-7.5 w-7.5 sm:order-4">
+								<MoreVertical className="h-4 w-4" />
+							</Button>
+						</PopoverTrigger>
+						<PopoverContent className="bg-accent w-[250px] p-2" align="end">
+							<Command>
+								<CommandList>
+									<CommandItem className="hover:bg-accent/50 cursor-pointer" onSelect={handleRecalculateCosts}>
+										<Calculator className="text-muted-foreground size-4" />
+										<div className="flex flex-col">
+											<span className="text-sm">Recalculate costs</span>
+											<span className="text-muted-foreground text-xs">For all logs that don't have a cost</span>
+										</div>
+									</CommandItem>
+								</CommandList>
+							</Command>
+						</PopoverContent>
+					</Popover>
+					<div className="sm:order-5">
+						<ColumnConfigDropdown
+							entries={columnEntries}
+							labels={columnLabels}
+							onToggleVisibility={onToggleColumnVisibility}
+							onReset={onResetColumns}
+						/>
+					</div>
+				</div>
+			</div>
+
+			{/* Search — mobile row 2 (full width); on desktop, slides between Live and Date as flex-1 */}
+			<div className="border-input flex h-7.5 w-full items-center gap-2 rounded-sm border sm:order-2 sm:w-auto sm:flex-1">
+				<Search className="mr-0.5 ml-2 size-4 shrink-0" />
 				<Input
 					type="text"
 					className="!h-7 rounded-tl-none rounded-tr-sm rounded-br-sm rounded-bl-none border-none bg-slate-50 shadow-none outline-none focus-visible:ring-0"
@@ -159,8 +203,11 @@ export function LogsHeaderView({
 				/>
 			</div>
 
+			{/* Date picker — mobile row 3 (full width); auto width on desktop */}
 			<DateTimePickerWithRange
 				triggerTestId="filter-date-range"
+				className="w-full sm:order-3 sm:w-auto"
+				buttonClassName="w-full justify-start sm:w-auto"
 				dateTime={{ from: startTime, to: endTime }}
 				onDateTimeUpdate={(p) => {
 					setStartTime(p.from);
@@ -184,27 +231,6 @@ export function LogsHeaderView({
 					});
 				}}
 			/>
-			<Popover open={openMoreActionsPopover} onOpenChange={setOpenMoreActionsPopover}>
-				<PopoverTrigger asChild>
-					<Button variant="outline" size="sm" className="h-7.5 w-7.5">
-						<MoreVertical className="h-4 w-4" />
-					</Button>
-				</PopoverTrigger>
-				<PopoverContent className="bg-accent w-[250px] p-2" align="end">
-					<Command>
-						<CommandList>
-							<CommandItem className="hover:bg-accent/50 cursor-pointer" onSelect={handleRecalculateCosts}>
-								<Calculator className="text-muted-foreground size-4" />
-								<div className="flex flex-col">
-									<span className="text-sm">Recalculate costs</span>
-									<span className="text-muted-foreground text-xs">For all logs that don't have a cost</span>
-								</div>
-							</CommandItem>
-						</CommandList>
-					</Command>
-				</PopoverContent>
-			</Popover>
-			<ColumnConfigDropdown entries={columnEntries} labels={columnLabels} onToggleVisibility={onToggleColumnVisibility} onReset={onResetColumns} />
 		</div>
 	);
-}
+}
\ No newline at end of file
diff --git a/ui/app/workspace/mcp-logs/page.tsx b/ui/app/workspace/mcp-logs/page.tsx
index 3dcf993ded..e9041608ff 100644
--- a/ui/app/workspace/mcp-logs/page.tsx
+++ b/ui/app/workspace/mcp-logs/page.tsx
@@ -549,13 +549,15 @@ export default function MCPLogsPage() {
 					}
 				/>
 			) : (
-				<div className="no-padding-parent no-border-parent bg-background flex h-[calc(100vh_-_16px)] w-full gap-3">
-					{/* Sidebar Filters */}
-					<MCPFilterSidebar filters={filters} onFiltersChange={setFilters} />
+				<div className="no-padding-parent no-border-parent bg-background flex h-[calc(100dvh_-_16px)] w-full gap-2 md:gap-3">
+					{/* Sidebar Filters — hidden on small screens; mobile access is via the Sheet trigger in the header */}
+					<div className="hidden h-full md:flex">
+						<MCPFilterSidebar filters={filters} onFiltersChange={setFilters} />
+					</div>
 
 					{/* Main Content */}
-					<div className="bg-card flex min-w-0 flex-1 flex-col gap-2 overflow-hidden rounded-l-md">
-						<div className="p-4 pb-0">
+					<div className="bg-card flex min-w-0 flex-1 flex-col gap-2 overflow-hidden rounded-md sm:rounded-l-md">
+						<div className="p-2 pb-0 sm:p-4 sm:pb-0">
 							<McpHeaderView
 								filters={filters}
 								onFiltersChange={setFilters}
@@ -568,16 +570,16 @@ export default function MCPLogsPage() {
 							/>
 						</div>
 						{/* Quick Stats */}
-						<div className="px-4">
-							<div className="grid shrink-0 grid-cols-1 gap-4 md:grid-cols-4">
+						<div className="px-2 sm:px-4">
+							<div className="grid shrink-0 grid-cols-2 gap-2 sm:gap-3 md:grid-cols-4 md:gap-4">
 								{statCards.map((card) => (
-									<Card key={card.title} className="py-4 shadow-none">
+									<Card key={card.title} className="py-3 shadow-none sm:py-4">
 										<CardContent
-											className={`flex items-center justify-between px-4 transition-opacity duration-200 ${fetchingStats ? "opacity-50" : "opacity-100"}`}
+											className={`flex items-center justify-between px-3 transition-opacity duration-200 sm:px-4 ${fetchingStats ? "opacity-50" : "opacity-100"}`}
 										>
 											<div className="w-full min-w-0">
 												<div className="text-muted-foreground text-xs">{card.title}</div>
-												<div className="truncate font-mono text-xl font-medium sm:text-2xl">{card.value}</div>
+												<div className="truncate font-mono text-lg font-medium sm:text-xl lg:text-2xl">{card.value}</div>
 											</div>
 										</CardContent>
 									</Card>
diff --git a/ui/app/workspace/mcp-logs/views/mcpHeaderView.tsx b/ui/app/workspace/mcp-logs/views/mcpHeaderView.tsx
index 4888e5afe3..67c53a1323 100644
--- a/ui/app/workspace/mcp-logs/views/mcpHeaderView.tsx
+++ b/ui/app/workspace/mcp-logs/views/mcpHeaderView.tsx
@@ -1,9 +1,11 @@
+import { MCPFilterSidebar } from "@/components/filters/mcpFilterSidebar";
 import { ColumnConfigDropdown, type ColumnConfigEntry } from "@/components/table";
 import { Button } from "@/components/ui/button";
 import { DateTimePickerWithRange } from "@/components/ui/datePickerWithRange";
 import { Input } from "@/components/ui/input";
+import { Sheet, SheetContent, SheetDescription, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
 import type { MCPToolLogFilters } from "@/lib/types/logs";
-import { Pause, Play, Search } from "lucide-react";
+import { Filter, Pause, Play, Search } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 
 const LOG_TIME_PERIODS = [
@@ -107,22 +109,44 @@ export function McpHeaderView({
 	);
 
 	return (
-		<div className="flex grow items-center justify-between space-x-2">
-			<Button variant={"outline"} size="sm" className="h-7.5" onClick={() => onLiveToggle(!liveEnabled)}>
-				{liveEnabled ? (
-					<>
-						<Pause className="h-4 w-4" />
-						Live updates
-					</>
-				) : (
-					<>
-						<Play className="h-4 w-4" />
-						Live updates
-					</>
-				)}
-			</Button>
-			<div className="border-input flex h-7.5 flex-1 items-center gap-2 rounded-sm border">
-				<Search className="mr-0.5 ml-2 size-4" />
+		<div className="flex grow flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
+			{/* Mobile row 1: filter + live on the left, column-config right-aligned.
+			    On sm+ this wrapper becomes display:contents so its children flow inline with the rest. */}
+			<div className="flex items-center gap-2 sm:contents">
+				{/* Filter sheet trigger — mobile only */}
+				<Sheet>
+					<SheetTrigger asChild>
+						<Button variant="outline" size="sm" className="h-7.5 shrink-0 md:hidden" aria-label="Open filters">
+							<Filter className="size-4" />
+						</Button>
+					</SheetTrigger>
+					<SheetContent side="left" className="w-[85vw] max-w-sm border-r p-0">
+						<SheetTitle className="sr-only">Filters</SheetTitle>
+						<SheetDescription className="sr-only">Filter MCP logs by tool, server, status, and virtual key.</SheetDescription>
+						<MCPFilterSidebar filters={filters} onFiltersChange={onFiltersChange} disableCollapse className="w-full rounded-none" />
+					</SheetContent>
+				</Sheet>
+
+				<Button variant={"outline"} size="sm" className="h-7.5 shrink-0 sm:order-1" onClick={() => onLiveToggle(!liveEnabled)}>
+					{liveEnabled ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
+					<span className="hidden sm:inline">Live updates</span>
+				</Button>
+
+				<div className="ml-auto flex items-center gap-2 sm:contents">
+					<div className="sm:order-4">
+						<ColumnConfigDropdown
+							entries={columnEntries}
+							labels={columnLabels}
+							onToggleVisibility={onToggleColumnVisibility}
+							onReset={onResetColumns}
+						/>
+					</div>
+				</div>
+			</div>
+
+			{/* Search — mobile row 2 (full width); on desktop, slides between Live and Date as flex-1 */}
+			<div className="border-input flex h-7.5 w-full items-center gap-2 rounded-sm border sm:w-auto sm:flex-1 sm:order-2">
+				<Search className="mr-0.5 ml-2 size-4 shrink-0" />
 				<Input
 					type="text"
 					className="!h-7 rounded-tl-none rounded-tr-sm rounded-br-sm rounded-bl-none border-none bg-slate-50 shadow-none outline-none focus-visible:ring-0 dark:bg-zinc-900"
@@ -131,7 +155,11 @@ export function McpHeaderView({
 					onChange={(e) => handleSearchChange(e.target.value)}
 				/>
 			</div>
+
+			{/* Date picker — mobile row 3 (full width); auto width on desktop */}
 			<DateTimePickerWithRange
+				className="w-full sm:w-auto sm:order-3"
+				buttonClassName="w-full justify-start sm:w-auto"
 				dateTime={{ from: startTime, to: endTime }}
 				onDateTimeUpdate={(p) => {
 					setStartTime(p.from);
@@ -155,7 +183,6 @@ export function McpHeaderView({
 					});
 				}}
 			/>
-			<ColumnConfigDropdown entries={columnEntries} labels={columnLabels} onToggleVisibility={onToggleColumnVisibility} onReset={onResetColumns} />
 		</div>
 	);
 }
diff --git a/ui/app/workspace/observability/fragments/maximFormFragment.tsx b/ui/app/workspace/observability/fragments/maximFormFragment.tsx
index 93f00d70fe..987ed211ce 100644
--- a/ui/app/workspace/observability/fragments/maximFormFragment.tsx
+++ b/ui/app/workspace/observability/fragments/maximFormFragment.tsx
@@ -110,7 +110,7 @@ export function MaximFormFragment({ initialConfig, onSave, onDelete, isDeleting
 				</div>
 
 				{/* Form Actions */}
-				<div className="flex w-full flex-row items-center">
+				<div className="flex w-full flex-col gap-3 sm:flex-row sm:items-center sm:gap-0">
 					<FormField
 						control={form.control}
 						name="enabled"
@@ -128,7 +128,7 @@ export function MaximFormFragment({ initialConfig, onSave, onDelete, isDeleting
 							</FormItem>
 						)}
 					/>
-					<div className="ml-auto flex justify-end space-x-2 py-2">
+					<div className="flex w-full flex-col gap-2 py-2 sm:ml-auto sm:w-auto sm:flex-row sm:justify-end sm:gap-2">
 						{onDelete && (
 							<Button
 								type="button"
@@ -137,6 +137,7 @@ export function MaximFormFragment({ initialConfig, onSave, onDelete, isDeleting
 								disabled={isDeleting}
 								title="Delete connector"
 								aria-label="Delete connector"
+								className="w-full sm:w-auto"
 							>
 								<Trash2 className="size-4" />
 							</Button>
@@ -144,6 +145,7 @@ export function MaximFormFragment({ initialConfig, onSave, onDelete, isDeleting
 						<Button
 							type="button"
 							variant="outline"
+							className="w-full sm:w-auto"
 							onClick={() => {
 								form.reset({
 									enabled: initialConfig?.enabled ?? true,
@@ -162,6 +164,7 @@ export function MaximFormFragment({ initialConfig, onSave, onDelete, isDeleting
 								<TooltipTrigger asChild>
 									<Button
 										type="submit"
+										className="w-full sm:w-auto"
 										disabled={!hasMaximAccess || !form.formState.isDirty || !form.formState.isValid}
 										isLoading={isSaving}
 									>
diff --git a/ui/app/workspace/observability/fragments/otelFormFragment.tsx b/ui/app/workspace/observability/fragments/otelFormFragment.tsx
index f27438fb54..96eefcaec6 100644
--- a/ui/app/workspace/observability/fragments/otelFormFragment.tsx
+++ b/ui/app/workspace/observability/fragments/otelFormFragment.tsx
@@ -175,7 +175,7 @@ export function OtelFormFragment({
 								</FormItem>
 							)}
 						/>
-						<div className="flex flex-row gap-4">
+						<div className="flex flex-col gap-4 sm:flex-row">
 							<FormField
 								control={form.control}
 								name="otel_config.trace_type"
@@ -370,7 +370,7 @@ export function OtelFormFragment({
 				</div>
 
 				{/* Form Actions */}
-				<div className="flex w-full flex-row items-center">
+				<div className="flex w-full flex-col gap-3 sm:flex-row sm:items-center sm:gap-0">
 					<FormField
 						control={form.control}
 						name="enabled"
@@ -388,7 +388,7 @@ export function OtelFormFragment({
 							</FormItem>
 						)}
 					/>
-					<div className="ml-auto flex justify-end space-x-2 py-2">
+					<div className="flex w-full flex-col gap-2 py-2 sm:ml-auto sm:w-auto sm:flex-row sm:justify-end sm:gap-2">
 						{onDelete && (
 							<Button
 								type="button"
@@ -398,6 +398,7 @@ export function OtelFormFragment({
 								data-testid="otel-connector-delete-btn"
 								title="Delete connector"
 								aria-label="Delete connector"
+								className="w-full sm:w-auto"
 							>
 								<Trash2 className="size-4" />
 							</Button>
@@ -405,6 +406,7 @@ export function OtelFormFragment({
 						<Button
 							type="button"
 							variant="outline"
+							className="w-full sm:w-auto"
 							onClick={() => {
 								form.reset({
 									enabled: initialConfig?.enabled ?? true,
@@ -431,6 +433,7 @@ export function OtelFormFragment({
 								<TooltipTrigger asChild>
 									<Button
 										type="submit"
+										className="w-full sm:w-auto"
 										disabled={!hasOtelAccess || !form.formState.isDirty || !form.formState.isValid}
 										isLoading={isSaving}
 									>
diff --git a/ui/app/workspace/observability/fragments/prometheusFormFragment.tsx b/ui/app/workspace/observability/fragments/prometheusFormFragment.tsx
index 04ec5ca5b4..7086ad3072 100644
--- a/ui/app/workspace/observability/fragments/prometheusFormFragment.tsx
+++ b/ui/app/workspace/observability/fragments/prometheusFormFragment.tsx
@@ -160,7 +160,7 @@ export function PrometheusFormFragment({
 							)}
 						/>
 
-						<div className="grid grid-cols-2 gap-4">
+						<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
 							<FormField
 								control={form.control}
 								name="prometheus_config.job_name"
@@ -254,7 +254,7 @@ export function PrometheusFormFragment({
 											<Trash className="h-4 w-4" />
 										</Button>
 									</div>
-									<div className="border-muted grid grid-cols-2 gap-4">
+									<div className="border-muted grid grid-cols-1 gap-4 sm:grid-cols-2">
 										<FormField
 											control={form.control}
 											name="prometheus_config.basic_auth_username"
@@ -308,7 +308,7 @@ export function PrometheusFormFragment({
 				</div>
 
 				{/* Form Actions */}
-				<div className="flex w-full flex-row items-center">
+				<div className="flex w-full flex-col gap-3 sm:flex-row sm:items-center sm:gap-0">
 					<FormField
 						control={form.control}
 						name="enabled"
@@ -326,7 +326,7 @@ export function PrometheusFormFragment({
 							</FormItem>
 						)}
 					/>
-					<div className="ml-auto flex justify-end space-x-2 py-2">
+					<div className="flex w-full flex-col gap-2 py-2 sm:ml-auto sm:w-auto sm:flex-row sm:justify-end sm:gap-2">
 						{onDelete && (
 							<Button
 								type="button"
@@ -336,6 +336,7 @@ export function PrometheusFormFragment({
 								data-testid="prometheus-connector-delete-btn"
 								title="Delete connector"
 								aria-label="Delete connector"
+								className="w-full sm:w-auto"
 							>
 								<Trash2 className="size-4" />
 							</Button>
@@ -343,6 +344,7 @@ export function PrometheusFormFragment({
 						<Button
 							type="button"
 							variant="outline"
+							className="w-full sm:w-auto"
 							onClick={() => {
 								form.reset({
 									enabled: initialConfig?.enabled ?? true,
@@ -366,6 +368,7 @@ export function PrometheusFormFragment({
 								<TooltipTrigger asChild>
 									<Button
 										type="submit"
+										className="w-full sm:w-auto"
 										disabled={!hasPrometheusAccess || !form.formState.isDirty || !form.formState.isValid}
 										isLoading={isSaving}
 									>
diff --git a/ui/app/workspace/observability/page.tsx b/ui/app/workspace/observability/page.tsx
index fdace2035c..00ab72f0a6 100644
--- a/ui/app/workspace/observability/page.tsx
+++ b/ui/app/workspace/observability/page.tsx
@@ -2,7 +2,7 @@ import ObservabilityView from "./views/observabilityView";
 
 export default function ObservabilityPage() {
 	return (
-		<div className="mx-auto w-full max-w-7xl">
+		<div className="mx-auto w-full max-w-7xl px-2 sm:px-0">
 			<ObservabilityView />
 		</div>
 	);
diff --git a/ui/app/workspace/observability/views/observabilityView.tsx b/ui/app/workspace/observability/views/observabilityView.tsx
index 2919f9b0fd..a03e0cb556 100644
--- a/ui/app/workspace/observability/views/observabilityView.tsx
+++ b/ui/app/workspace/observability/views/observabilityView.tsx
@@ -121,8 +121,43 @@ export default function ObservabilityView() {
 	}
 
 	return (
-		<div className="flex h-full flex-row gap-4">
-			<div className="flex flex-col">
+		<div className="flex h-full flex-col gap-3 md:flex-row md:gap-4">
+			{/* Mobile: horizontal scroll of provider pills */}
+			<div className="md:hidden">
+				<div className="text-muted-foreground mb-2 text-xs font-medium">Providers</div>
+				<div className="-mx-2 flex gap-2 overflow-x-auto px-2 pb-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+					{supportedPlatforms.map((tab) => (
+						<button
+							type="button"
+							key={tab.id}
+							disabled={!!tab.disabled}
+							data-testid={`observability-provider-btn-mobile-${tab.id}`}
+							aria-disabled={tab.disabled ? true : undefined}
+							aria-current={selectedPluginId === tab.id ? "page" : undefined}
+							className={cn(
+								"flex h-9 shrink-0 items-center gap-2 rounded-md border px-3 text-sm whitespace-nowrap",
+								tab.disabled && "opacity-50",
+								selectedPluginId === tab.id ? "bg-secondary border-border" : "border-transparent bg-zinc-100/20 dark:bg-zinc-800/30",
+							)}
+							onClick={() => {
+								if (tab.disabled) return;
+								setSelectedPluginId(tab.id ?? supportedPlatforms[0].id);
+							}}
+						>
+							<div className="flex w-[21px] shrink-0 items-center justify-center">{tab.icon}</div>
+							<span>{tab.name}</span>
+							{tab.disabled && (
+								<Badge variant="secondary" className="text-muted-foreground text-[10px] font-medium">
+									SOON
+								</Badge>
+							)}
+						</button>
+					))}
+				</div>
+			</div>
+
+			{/* Desktop: left sidebar of providers */}
+			<div className="hidden md:flex md:flex-col">
 				<div className="flex w-[270px] flex-col gap-2 pb-10">
 					<div className="rounded-md bg-zinc-100/10 p-4 dark:bg-zinc-800/20">
 						<div className="flex flex-col gap-1">
@@ -168,7 +203,8 @@ export default function ObservabilityView() {
 					</div>
 				</div>
 			</div>
-			<div className="w-full pt-4">
+
+			<div className="w-full min-w-0 md:pt-4">
 				{selectedPluginId === "prometheus" && <PrometheusView />}
 				{selectedPluginId === "otel" && <OtelView />}
 				{selectedPluginId === "maxim" && <MaximView />}
diff --git a/ui/components/filters/logsFilterSidebar.tsx b/ui/components/filters/logsFilterSidebar.tsx
index 84784a59d9..a620e1138a 100644
--- a/ui/components/filters/logsFilterSidebar.tsx
+++ b/ui/components/filters/logsFilterSidebar.tsx
@@ -20,17 +20,21 @@ const COLLAPSE_STORAGE_KEY = "logs-filter-sidebar-collapsed";
 interface LogsSidebarProps {
 	filters: LogFilters;
 	onFiltersChange: (filters: LogFilters) => void;
+	/** When true, hide the collapse rail and always render expanded. Used inside the mobile Sheet. */
+	disableCollapse?: boolean;
+	className?: string;
 }
 
-export function LogsFilterSidebar({ filters, onFiltersChange }: LogsSidebarProps) {
+export function LogsFilterSidebar({ filters, onFiltersChange, disableCollapse = false, className }: LogsSidebarProps) {
 	const [collapsed, setCollapsed] = useState(false);
 
 	// Load persisted collapsed state on mount
 	useEffect(() => {
+		if (disableCollapse) return;
 		if (typeof window === "undefined") return;
 		const stored = window.localStorage.getItem(COLLAPSE_STORAGE_KEY);
 		if (stored === "true") setCollapsed(true);
-	}, []);
+	}, [disableCollapse]);
 
 	const toggleCollapsed = useCallback(() => {
 		setCollapsed((prev) => {
@@ -63,7 +67,7 @@ export function LogsFilterSidebar({ filters, onFiltersChange }: LogsSidebarProps
 	}, [filters.start_time, filters.end_time, onFiltersChange]);
 
 	// Collapsed: thin rail with vertical "Filters" label — whole rail is clickable to expand
-	if (collapsed) {
+	if (collapsed && !disableCollapse) {
 		return (
 			<button
 				type="button"
@@ -84,7 +88,7 @@ export function LogsFilterSidebar({ filters, onFiltersChange }: LogsSidebarProps
 	}
 
 	return (
-		<div className="bg-card flex h-full w-64 shrink-0 flex-col rounded-r-md">
+		<div className={cn("bg-card flex h-full w-64 shrink-0 flex-col rounded-r-md", className)}>
 			{/* Header */}
 			<div className="flex h-11 items-center justify-between border-b pr-2 pl-5">
 				<span className="text-sm font-semibold">Filters</span>
@@ -95,9 +99,11 @@ export function LogsFilterSidebar({ filters, onFiltersChange }: LogsSidebarProps
 							Reset
 						</Button>
 					)}
-					<Button variant="ghost" size="icon" className="size-7" onClick={toggleCollapsed} title="Hide filters" aria-label="Hide filters">
-						<PanelLeftClose className="size-4" />
-					</Button>
+					{!disableCollapse && (
+						<Button variant="ghost" size="icon" className="size-7" onClick={toggleCollapsed} title="Hide filters" aria-label="Hide filters">
+							<PanelLeftClose className="size-4" />
+						</Button>
+					)}
 				</div>
 			</div>
 
diff --git a/ui/components/filters/mcpFilterSidebar.tsx b/ui/components/filters/mcpFilterSidebar.tsx
index 3da3178578..583a383938 100644
--- a/ui/components/filters/mcpFilterSidebar.tsx
+++ b/ui/components/filters/mcpFilterSidebar.tsx
@@ -20,17 +20,21 @@ const COLLAPSE_STORAGE_KEY = "mcp-filter-sidebar-collapsed";
 interface MCPFilterSidebarProps {
 	filters: MCPToolLogFilters;
 	onFiltersChange: (filters: MCPToolLogFilters) => void;
+	/** When true, hide the collapse rail and always render expanded. Used inside the mobile Sheet. */
+	disableCollapse?: boolean;
+	className?: string;
 }
 
-export function MCPFilterSidebar({ filters, onFiltersChange }: MCPFilterSidebarProps) {
+export function MCPFilterSidebar({ filters, onFiltersChange, disableCollapse = false, className }: MCPFilterSidebarProps) {
 	const [collapsed, setCollapsed] = useState(false);
 
 	// Load persisted collapsed state on mount
 	useEffect(() => {
+		if (disableCollapse) return;
 		if (typeof window === "undefined") return;
 		const stored = window.localStorage.getItem(COLLAPSE_STORAGE_KEY);
 		if (stored === "true") setCollapsed(true);
-	}, []);
+	}, [disableCollapse]);
 
 	const toggleCollapsed = useCallback(() => {
 		setCollapsed((prev) => {
@@ -60,7 +64,7 @@ export function MCPFilterSidebar({ filters, onFiltersChange }: MCPFilterSidebarP
 	}, [filters.start_time, filters.end_time, onFiltersChange]);
 
 	// Collapsed: thin rail with vertical "Filters" label — whole rail is clickable to expand
-	if (collapsed) {
+	if (collapsed && !disableCollapse) {
 		return (
 			<button
 				type="button"
@@ -81,7 +85,7 @@ export function MCPFilterSidebar({ filters, onFiltersChange }: MCPFilterSidebarP
 	}
 
 	return (
-		<div className="bg-card flex h-full w-64 shrink-0 flex-col rounded-r-md">
+		<div className={cn("bg-card flex h-full w-64 shrink-0 flex-col rounded-r-md", className)}>
 			{/* Header */}
 			<div className="flex h-11 items-center justify-between border-b pr-2 pl-5">
 				<span className="text-sm font-semibold">Filters</span>
@@ -92,9 +96,11 @@ export function MCPFilterSidebar({ filters, onFiltersChange }: MCPFilterSidebarP
 							Reset
 						</Button>
 					)}
-					<Button variant="ghost" size="icon" className="size-7" onClick={toggleCollapsed} title="Hide filters" aria-label="Hide filters">
-						<PanelLeftClose className="size-4" />
-					</Button>
+					{!disableCollapse && (
+						<Button variant="ghost" size="icon" className="size-7" onClick={toggleCollapsed} title="Hide filters" aria-label="Hide filters">
+							<PanelLeftClose className="size-4" />
+						</Button>
+					)}
 				</div>
 			</div>
 
diff --git a/ui/components/header.tsx b/ui/components/header.tsx
index 4dc2790d60..eeb666604f 100644
--- a/ui/components/header.tsx
+++ b/ui/components/header.tsx
@@ -1,14 +1,34 @@
-import { ThemeToggle } from "./themeToggle";
-import { Separator } from "./ui/separator";
+import { useSidebar } from "@/components/ui/sidebar";
+import { Link } from "@tanstack/react-router";
+import { Menu, X } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+export default function Header() {
+	const { toggleSidebar, openMobile } = useSidebar();
+	const { resolvedTheme } = useTheme();
+	const [mounted, setMounted] = useState(false);
+
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+
+	const logoSrc = mounted && resolvedTheme === "dark" ? "/bifrost-logo-dark.webp" : "/bifrost-logo.webp";
 
-export default function Header({ title }: { title: string }) {
 	return (
-		<div className="bg-background fixed top-0 right-0 left-(--sidebar-width) z-10">
-			<div className="flex items-center justify-between px-3">
-				<div className="p-3 font-semibold">{title}</div>
-				<ThemeToggle />
-			</div>
-			<Separator className="w-full" />
-		</div>
+		<header className="bg-background sticky top-0 z-[60] flex h-12 items-center justify-between border-b px-3 md:hidden">
+			<Link to="/workspace/logs" className="flex items-center pl-1">
+				<img src={logoSrc} alt="Bifrost" className="h-[22px] w-auto" />
+			</Link>
+			<button
+				type="button"
+				onClick={toggleSidebar}
+				className="text-muted-foreground hover:text-foreground hover:bg-accent -mr-1 inline-flex h-9 w-9 items-center justify-center rounded-md transition-colors active:scale-95"
+				aria-label={openMobile ? "Close navigation menu" : "Open navigation menu"}
+				aria-expanded={openMobile}
+			>
+				{openMobile ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+			</button>
+		</header>
 	);
-}
\ No newline at end of file
+}
diff --git a/ui/components/sidebar.tsx b/ui/components/sidebar.tsx
index b9c4cef00b..1dc5afd73e 100644
--- a/ui/components/sidebar.tsx
+++ b/ui/components/sidebar.tsx
@@ -1087,7 +1087,7 @@ export default function AppSidebar() {
 
 	return (
 		<Sidebar collapsible="icon" className="overflow-y-clip border-none bg-transparent">
-			<SidebarHeader className="mt-1 ml-2 flex justify-between px-0 group-data-[collapsible=icon]:ml-0 group-data-[collapsible=icon]:h-auto">
+			<SidebarHeader className="mt-1 ml-2 flex justify-between px-0 max-md:hidden group-data-[collapsible=icon]:ml-0 group-data-[collapsible=icon]:h-auto">
 				{/* Expanded state: horizontal layout */}
 				<div className="flex h-10 w-full items-center justify-between px-1.5 group-data-[collapsible=icon]:hidden">
 					<Link to="/workspace/logs" className="group flex items-center gap-2 pl-2">
@@ -1109,7 +1109,7 @@ export default function AppSidebar() {
 					<img className="h-[22px] w-auto" src={iconSrc} alt="Bifrost" width={22} height={22} />
 				</div>
 			</SidebarHeader>
-			<div className="mx-2 pb-1 group-data-[collapsible=icon]:hidden">
+			<div className="mx-2 pb-1 max-md:hidden group-data-[collapsible=icon]:hidden">
 				<div className="relative">
 					<Search className="text-muted-foreground absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2" />
 					<input
diff --git a/ui/components/ui/datePickerWithRange.tsx b/ui/components/ui/datePickerWithRange.tsx
index 3f81d3952f..b35eb223b3 100644
--- a/ui/components/ui/datePickerWithRange.tsx
+++ b/ui/components/ui/datePickerWithRange.tsx
@@ -1,3 +1,4 @@
+import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
 import { format } from "date-fns";
 import { Calendar as CalendarIcon } from "lucide-react";
@@ -43,6 +44,7 @@ interface DateTimePickerWithRangeProps extends DatePickerWithRangeProps {
 
 export function DateTimePickerWithRange(props: DateTimePickerWithRangeProps) {
 	const { className, buttonClassName, triggerLabel, onTrigger, dateTime } = props;
+	const isMobile = useIsMobile();
 	const [date, setDate] = React.useState<DateRange | undefined>(dateTime);
 	const [timeValue, setTimeValue] = React.useState<TimeRange>({
 		from: dateTime?.from ? { hour: dateTime.from.getHours(), minute: dateTime.from.getMinutes() } : { hour: 0, minute: 0 },
@@ -144,9 +146,35 @@ export function DateTimePickerWithRange(props: DateTimePickerWithRangeProps) {
 						)}
 					</Button>
 				</PopoverTrigger>
-				<PopoverContent className="w-auto p-0" align={props.popupAlignment ? props.popupAlignment : "start"}>
-					<div className="flex flex-row gap-2">
-						<div>
+				<PopoverContent
+					className="max-h-[85dvh] w-auto max-w-[calc(100vw_-_1rem)] overflow-y-auto p-0 sm:max-w-none"
+					align={props.popupAlignment ? props.popupAlignment : "start"}
+				>
+					<div className="flex flex-col gap-2 sm:flex-row">
+						{props.preDefinedPeriods && isMobile && (
+							<div className="flex flex-row flex-wrap gap-1 border-b p-2">
+								{props.preDefinedPeriods.map((period) => (
+									<Button
+										className={cn(
+											"h-7 px-2 text-xs",
+											predefinedPeriod === period.value && "bg-primary text-primary-foreground",
+										)}
+										variant="ghost"
+										size="sm"
+										key={period.value}
+										onClick={(e) => {
+											e.preventDefault();
+											e.stopPropagation();
+											setPredefinedPeriod(period.value);
+											props.onPredefinedPeriodChange && props.onPredefinedPeriodChange(period.value);
+										}}
+									>
+										{period.label}
+									</Button>
+								))}
+							</div>
+						)}
+						<div className="min-w-0">
 							<Calendar
 								autoFocus
 								mode="range"
@@ -175,9 +203,9 @@ export function DateTimePickerWithRange(props: DateTimePickerWithRangeProps) {
 											});
 									}
 								}}
-								numberOfMonths={2}
+								numberOfMonths={isMobile ? 1 : 2}
 							/>
-							<div className="-mt-1 flex flex-row items-center px-2 pb-1">
+							<div className="-mt-1 flex flex-row flex-wrap items-center px-2 pb-1">
 								<div className="m-1 flex flex-1 flex-col gap-1">
 									<Label className="ml-0.5">From Time</Label>
 									<TimePicker
@@ -225,7 +253,7 @@ export function DateTimePickerWithRange(props: DateTimePickerWithRangeProps) {
 								</div>
 							</div>
 						</div>
-						{props.preDefinedPeriods && (
+						{props.preDefinedPeriods && !isMobile && (
 							<div className="flex w-[150px] flex-col gap-1 border-l py-2 pr-3 pl-2">
 								{props.preDefinedPeriods.map((period) => (
 									<Button
diff --git a/ui/components/ui/sidebar.tsx b/ui/components/ui/sidebar.tsx
index aa14aa181d..eaf4cf64ea 100644
--- a/ui/components/ui/sidebar.tsx
+++ b/ui/components/ui/sidebar.tsx
@@ -174,12 +174,7 @@ function Sidebar({
 					data-sidebar="sidebar"
 					data-slot="sidebar"
 					data-mobile="true"
-					className="bg-card text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
-					style={
-						{
-							"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-						} as React.CSSProperties
-					}
+					className="bg-card text-sidebar-foreground top-12 bottom-0 w-full max-w-full rounded-none border-none p-0 [&>button]:hidden"
 					side={side}
 				>
 					<div className="flex h-full w-full flex-col">{children}</div>