fix(responsive): audit and fix FlowPilot + analytics components for mobile/tablet

Add responsive Tailwind classes across 11 FlowPilot-related components:
- FlowPilotSession: collapsible mobile sidebar summary, responsive padding
- FlowPilotActionBar: stacked buttons on mobile, responsive resolve modal
- FlowPilotIntake: responsive submit area, padding, heading sizes
- FlowPilotStepCard: responsive padding (p-3/p-4/p-5), stacked action buttons
- FlowPilotOptions: responsive padding, 44px touch targets
- SessionDocView: responsive card padding, touch-friendly star ratings
- EscalateModal: stacked buttons on mobile with min touch targets
- EscalationQueue: responsive card padding, touch targets
- InSessionScriptGenerator: responsive padding, stacked continue buttons
- ReviewQueuePage: responsive two-panel layout (stacked on mobile)
- FlowPilotAnalyticsPage: responsive header, chart card padding

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-19 20:19:52 +00:00
parent 967a2b2c59
commit 1f4a8a6389
11 changed files with 143 additions and 76 deletions

View File

@@ -65,12 +65,12 @@ export default function FlowPilotAnalyticsPage() {
return (
<div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8 space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div className="flex items-center gap-3">
<span title="FlowPilot Analytics">
<BarChart3 size={24} className="text-foreground" />
</span>
<h1 className="text-2xl font-bold font-heading text-foreground">FlowPilot Analytics</h1>
<h1 className="text-xl sm:text-2xl font-bold font-heading text-foreground">FlowPilot Analytics</h1>
</div>
<div className="flex items-center gap-3">
<Link
@@ -128,7 +128,7 @@ export default function FlowPilotAnalyticsPage() {
{/* Second row — Charts */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
{/* MTTR Trend */}
<div className="glass-card-static p-5">
<div className="glass-card-static p-3 sm:p-5">
<h3 className="font-heading text-sm font-semibold text-foreground mb-4">
MTTR Trend
</h3>
@@ -173,7 +173,7 @@ export default function FlowPilotAnalyticsPage() {
</div>
{/* Domain Breakdown */}
<div className="glass-card-static p-5">
<div className="glass-card-static p-3 sm:p-5">
<h3 className="font-heading text-sm font-semibold text-foreground mb-4">
Sessions by Domain
</h3>
@@ -207,7 +207,7 @@ export default function FlowPilotAnalyticsPage() {
{/* Third row — Confidence + Knowledge Coverage */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
{/* Confidence Breakdown */}
<div className="glass-card-static p-5">
<div className="glass-card-static p-3 sm:p-5">
<h3 className="font-heading text-sm font-semibold text-foreground mb-4">
Confidence Tiers
</h3>
@@ -237,7 +237,7 @@ export default function FlowPilotAnalyticsPage() {
</div>
{/* Knowledge Coverage */}
<div className="glass-card-static p-5">
<div className="glass-card-static p-3 sm:p-5">
<h3 className="font-heading text-sm font-semibold text-foreground mb-4">
Knowledge Coverage
</h3>
@@ -305,10 +305,10 @@ function MetricCard({
iconColor: string
}) {
return (
<div className="glass-card-static p-4">
<div className="glass-card-static p-3 sm:p-4">
<div className="flex items-center gap-3">
<span
className="flex h-8 w-8 items-center justify-center rounded-lg"
className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg"
style={{ background: `${iconColor}15` }}
>
<Icon size={16} style={{ color: iconColor }} />

View File

@@ -85,11 +85,11 @@ export default function ReviewQueuePage() {
}
return (
<div className="flex h-full">
<div className="flex h-full flex-col lg:flex-row overflow-hidden">
{/* Left panel — Proposal list */}
<div className="w-[380px] shrink-0 border-r overflow-y-auto" style={{ borderColor: 'var(--glass-border)' }}>
<div className="w-full shrink-0 border-b lg:border-b-0 lg:border-r lg:w-[380px] overflow-y-auto" style={{ borderColor: 'var(--glass-border)' }}>
{/* Header */}
<div className="sticky top-0 z-10 p-4 space-y-3" style={{ background: 'rgba(16, 17, 20, 0.95)', backdropFilter: 'blur(12px)' }}>
<div className="sticky top-0 z-10 p-3 sm:p-4 space-y-3" style={{ background: 'rgba(16, 17, 20, 0.95)', backdropFilter: 'blur(12px)' }}>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Lightbulb size={16} className="text-amber-400" />
@@ -119,12 +119,12 @@ export default function ReviewQueuePage() {
)}
{/* Tabs */}
<div className="flex gap-1">
<div className="flex gap-1 overflow-x-auto">
{STATUS_TABS.map((tab) => (
<button
key={tab.key}
onClick={() => setActiveTab(tab.key)}
className={`rounded-lg px-2.5 py-1 text-xs font-medium transition-colors ${
className={`shrink-0 rounded-lg px-2.5 py-1 text-xs font-medium transition-colors ${
activeTab === tab.key
? 'bg-primary/10 text-primary'
: 'text-muted-foreground hover:text-foreground'
@@ -177,7 +177,7 @@ export default function ReviewQueuePage() {
</div>
{/* Right panel — Detail */}
<div className="flex-1 overflow-y-auto">
<div className={`flex-1 overflow-y-auto ${!detail && !isLoadingDetail ? 'hidden lg:flex' : ''}`}>
{isLoadingDetail ? (
<div className="flex items-center justify-center h-full">
<Loader2 size={20} className="animate-spin text-muted-foreground" />