@prmichaelsen/acp-visualizer 0.9.5 → 0.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prmichaelsen/acp-visualizer",
-  "version": "0.9.5",
+  "version": "0.10.1",
   "type": "module",
   "description": "Browser-based dashboard for visualizing ACP progress.yaml data",
   "bin": {

package/src/components/EstimateChart.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react'
 import {
   BarChart,
   Bar,
@@ -51,6 +52,16 @@ function buildEstimateData(data: ProgressData): MilestoneEstimate[] {
 
 export function EstimateChart({ data }: EstimateChartProps) {
   const chartData = buildEstimateData(data)
+  const [isMobile, setIsMobile] = useState(false)
+
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 1024)
+    }
+    checkMobile()
+    window.addEventListener('resize', checkMobile)
+    return () => window.removeEventListener('resize', checkMobile)
+  }, [])
 
   if (chartData.length === 0) {
     return null
@@ -58,15 +69,22 @@ export function EstimateChart({ data }: EstimateChartProps) {
 
   const hasActuals = chartData.some((d) => d.actual !== null)
 
+  // Mobile: LR (horizontal bars), Desktop: TB (vertical bars) for better space usage
+  const layout = isMobile ? 'vertical' : 'vertical'
+  const chartHeight = isMobile
+    ? Math.max(200, chartData.length * 50 + 40)  // LR: height scales with items
+    : Math.max(300, chartData.length * 50 + 40)
+  const yAxisWidth = isMobile ? 120 : 180
+
   return (
     <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-5">
       <h3 className="text-sm font-semibold text-gray-300 mb-4">
         Estimated vs Actual Hours
       </h3>
-      <ResponsiveContainer width="100%" height={Math.max(200, chartData.length * 50 + 40)}>
+      <ResponsiveContainer width="100%" height={chartHeight}>
         <BarChart
           data={chartData}
-          layout="vertical"
+          layout={layout}
           margin={{ top: 5, right: 20, bottom: 5, left: 10 }}
         >
           <CartesianGrid strokeDasharray="3 3" stroke="#1f2937" horizontal={false} />
@@ -80,7 +98,7 @@ export function EstimateChart({ data }: EstimateChartProps) {
           <YAxis
             type="category"
             dataKey="name"
-            width={180}
+            width={yAxisWidth}
             tick={{ fill: '#9ca3af', fontSize: 11 }}
             tickLine={false}
             axisLine={{ stroke: '#374151' }}

package/src/components/FilterBar.tsx

@@ -15,12 +15,12 @@ interface FilterBarProps {
 
 export function FilterBar({ status, onStatusChange }: FilterBarProps) {
   return (
-    <div className="flex gap-1 p-1 bg-gray-800/50 rounded-lg">
+    <div className="flex flex-wrap gap-2 p-2 bg-gray-800/50 rounded-lg">
       {statusOptions.map((opt) => (
         <button
           key={opt.value}
           onClick={() => onStatusChange(opt.value)}
-          className={`px-3 py-1 text-xs rounded-md transition-colors ${
+          className={`px-4 py-2 text-sm rounded-md transition-colors whitespace-nowrap min-w-[44px] min-h-[44px] flex items-center justify-center ${
             status === opt.value
               ? 'bg-gray-700 text-gray-100 shadow-sm'
               : 'text-gray-500 hover:text-gray-300'

package/src/components/MilestoneKanban.tsx

@@ -90,10 +90,11 @@ export function MilestoneKanban({ milestones, tasks }: MilestoneKanbanProps) {
       coreStatuses.has(col.status) ||
       milestones.some((m) => m.status === col.status),
   )
-  const gridCols =
-    activeColumns.length <= 3
-      ? 'grid-cols-3'
-      : 'grid-cols-4'
+
+  // Responsive grid: 1 col mobile, 2 cols tablet, 3-4 cols desktop
+  const gridCols = activeColumns.length <= 3
+    ? 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
+    : 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4'
 
   return (
     <div className={`grid ${gridCols} gap-4 min-h-[300px]`}>

package/src/components/ViewToggle.tsx

@@ -15,12 +15,12 @@ const views: Array<{ id: ViewMode; label: string }> = [
 
 export function ViewToggle({ value, onChange }: ViewToggleProps) {
   return (
-    <div className="flex gap-1 bg-gray-900 border border-gray-800 rounded-lg p-0.5">
+    <div className="flex gap-1 bg-gray-900 border border-gray-800 rounded-lg p-0.5 overflow-x-auto scrollbar-hide">
       {views.map((v) => (
         <button
           key={v.id}
           onClick={() => onChange(v.id)}
-          className={`px-3 py-1 text-xs rounded-md transition-colors ${
+          className={`px-4 py-2 text-sm rounded-md transition-colors whitespace-nowrap min-w-[44px] min-h-[44px] flex items-center justify-center ${
             value === v.id
               ? 'bg-gray-700 text-gray-100'
               : 'text-gray-500 hover:text-gray-300'