@prmichaelsen/acp-visualizer 0.10.0 → 0.10.2

package/package.json

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

package/src/components/DependencyGraph.tsx

@@ -127,8 +127,17 @@ export function DependencyGraph({ data }: DependencyGraphProps) {
   }
 
   return (
-    <div className="border border-gray-800 rounded-lg overflow-auto bg-gray-950/50">
-      <svg width={width} height={height} className="min-w-full">
+    <div className="border border-gray-800 rounded-lg bg-gray-950/50">
+      {/* Mobile hint */}
+      <div className="lg:hidden bg-blue-900/20 border-b border-blue-800/30 px-4 py-3 text-sm text-blue-300">
+        <p className="font-medium mb-1">Complex visualization</p>
+        <p className="text-xs text-blue-400/80">
+          This dependency graph is optimized for desktop. Scroll to explore or switch to Table/Tree view for better mobile experience.
+        </p>
+      </div>
+
+      <div className="overflow-auto">
+        <svg width={width} height={height} className="min-w-full">
         <defs>
           <marker
             id="arrowhead"
@@ -192,6 +201,7 @@ export function DependencyGraph({ data }: DependencyGraphProps) {
           )
         })}
       </svg>
+      </div>
     </div>
   )
 }

package/src/components/EstimateChart.tsx

@@ -52,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
@@ -59,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} />
@@ -81,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/MilestoneGantt.tsx

@@ -91,21 +91,29 @@ export function MilestoneGantt({ milestones, tasks }: MilestoneGanttProps) {
 
   return (
     <div className="border border-gray-800 rounded-lg overflow-hidden">
-      {/* Timeline header */}
-      <div className="relative h-8 bg-gray-900/50 border-b border-gray-800">
-        {monthLabels.map((m, i) => (
-          <div
-            key={i}
-            className="absolute top-0 h-full border-l border-gray-800 flex items-center"
-            style={{ left: `${Math.max(0, m.left)}%` }}
-          >
-            <span className="text-[10px] text-gray-500 pl-1.5">{m.label}</span>
-          </div>
-        ))}
+      {/* Mobile hint */}
+      <div className="lg:hidden bg-gray-900/30 border-b border-gray-800 px-3 py-2 text-xs text-gray-500">
+        ← Scroll horizontally to view timeline →
       </div>
 
-      {/* Bars */}
-      <div className="divide-y divide-gray-800/50">
+      {/* Scrollable container */}
+      <div className="overflow-x-auto">
+        <div className="min-w-[800px]">
+          {/* Timeline header */}
+          <div className="relative h-8 bg-gray-900/50 border-b border-gray-800">
+            {monthLabels.map((m, i) => (
+              <div
+                key={i}
+                className="absolute top-0 h-full border-l border-gray-800 flex items-center"
+                style={{ left: `${Math.max(0, m.left)}%` }}
+              >
+                <span className="text-xs lg:text-[10px] text-gray-500 pl-1.5">{m.label}</span>
+              </div>
+            ))}
+          </div>
+
+          {/* Bars */}
+          <div className="divide-y divide-gray-800/50">
         {bars.map(({ milestone, start, end }) => {
           const barStart = start ? (daysBetween(minDate, start) / totalDays) * 100 : 0
           const barEnd = end ? (daysBetween(minDate, end) / totalDays) * 100 : barStart + 5
@@ -121,7 +129,7 @@ export function MilestoneGantt({ milestones, tasks }: MilestoneGanttProps) {
           return (
             <div key={milestone.id} className="flex items-center h-12 px-3 hover:bg-gray-200/20 dark:hover:bg-gray-800/20">
               {/* Label */}
-              <div className="w-48 shrink-0 flex items-center gap-2">
+              <div className="w-32 lg:w-48 shrink-0 flex items-center gap-2">
                 <span className="text-xs text-gray-700 dark:text-gray-300 truncate">{formatMilestoneName(milestone)}</span>
               </div>
               {/* Bar area */}
@@ -145,6 +153,8 @@ export function MilestoneGantt({ milestones, tasks }: MilestoneGanttProps) {
             </div>
           )
         })}
+        </div>
+      </div>
       </div>
     </div>
   )