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:
@@ -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" />
|
||||
|
||||
Reference in New Issue
Block a user