@cryptiklemur/lattice 1.11.1 → 1.11.3

package/client/src/components/analytics/ChartCard.tsx

@@ -8,31 +8,14 @@ export function useChartFullscreen(): number | false {
   return useContext(ChartFullscreenContext);
 }
 
-function FullscreenChartArea(props: { children: ReactNode }) {
-  var containerRef = useRef<HTMLDivElement>(null);
-  var [height, setHeight] = useState(400);
-
+function useViewportChartHeight(): number {
+  var [h, setH] = useState(Math.round(window.innerHeight * 0.5));
   useEffect(function () {
-    if (!containerRef.current) return;
-    var observer = new ResizeObserver(function (entries) {
-      for (var i = 0; i < entries.length; i++) {
-        var h = entries[i].contentRect.height;
-        if (h > 0) setHeight(h);
-      }
-    });
-    observer.observe(containerRef.current);
-    var h = containerRef.current.clientHeight;
-    if (h > 0) setHeight(h);
-    return function () { observer.disconnect(); };
+    function onResize() { setH(Math.round(window.innerHeight * 0.5)); }
+    window.addEventListener("resize", onResize);
+    return function () { window.removeEventListener("resize", onResize); };
   }, []);
-
-  return (
-    <div ref={containerRef} className="flex-1 p-6 overflow-auto min-h-0">
-      <ChartFullscreenContext.Provider value={height - 48}>
-        {props.children}
-      </ChartFullscreenContext.Provider>
-    </div>
-  );
+  return h;
 }
 
 interface ChartCardProps {
@@ -44,6 +27,7 @@ interface ChartCardProps {
 
 export function ChartCard(props: ChartCardProps) {
   var [isFullscreen, setIsFullscreen] = useState(false);
+  var chartHeight = useViewportChartHeight();
   var cardRef = useRef<HTMLDivElement>(null);
   var [originRect, setOriginRect] = useState<DOMRect | null>(null);
   var [animating, setAnimating] = useState(false);
@@ -177,9 +161,13 @@ export function ChartCard(props: ChartCardProps) {
                 </button>
               </div>
             </div>
-            <FullscreenChartArea>
-              {props.children}
-            </FullscreenChartArea>
+            <div className="flex-1 p-6 overflow-auto min-h-0">
+              <ChartFullscreenContext.Provider value={chartHeight}>
+                <div style={{ height: chartHeight + "px" }}>
+                  {props.children}
+                </div>
+              </ChartFullscreenContext.Provider>
+            </div>
           </div>
         </div>
       </>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptiklemur/lattice",
-  "version": "1.11.1",
+  "version": "1.11.3",
   "description": "Multi-machine agentic dashboard for Claude Code. Monitor sessions, manage MCP servers and skills, orchestrate across mesh-networked nodes.",
   "license": "MIT",
   "author": "Aaron Scherer <me@aaronscherer.me>",