Fix overflow

Author: eqrion

src/Bugzilla.tsx

@@ -48,6 +48,7 @@ interface GraphProps {
 
 export function Graph(props: GraphProps) {
   const containerRef = useRef<HTMLDivElement>(null);
+  const graphContainerRef = useRef<HTMLDivElement>(null);
   const [scale, setScale] = useState(1);
   const [position, setPosition] = useState({ x: 0, y: 0 });
   const [isDragging, setIsDragging] = useState(false);
@@ -207,12 +208,24 @@ export function Graph(props: GraphProps) {
     highlightSelectedNode();
   }, [highlightSelectedNode]);
 
-  const handleWheel = useCallback((e: React.WheelEvent) => {
+  const handleWheel = useCallback((e: WheelEvent) => {
     e.preventDefault();
     const delta = e.deltaY > 0 ? 0.9 : 1.1;
     setScale((prev) => Math.max(0.1, Math.min(3, prev * delta)));
   }, []);
 
+  // Add wheel event listener with ref
+  useEffect(() => {
+    const element = graphContainerRef.current;
+    if (!element) return;
+
+    element.addEventListener("wheel", handleWheel, { passive: false });
+
+    return () => {
+      element.removeEventListener("wheel", handleWheel);
+    };
+  }, [handleWheel]);
+
   const handleMouseDown = useCallback(
     (e: React.MouseEvent) => {
       if (e.button === 0) {
@@ -273,8 +286,8 @@ export function Graph(props: GraphProps) {
 
       {/* Graph Container */}
       <div
+        ref={graphContainerRef}
         className={`w-full h-full cursor-grab active:cursor-grabbing ${props.selectedNodeId ? "pr-80" : ""}`}
-        onWheel={handleWheel}
         onMouseDown={handleMouseDown}
         onMouseMove={handleMouseMove}
         onMouseUp={handleMouseUp}

src/Graph.tsx

@@ -95,7 +95,7 @@ export const Splitter: React.FC<SplitterProps> = ({
   return (
     <div
       ref={containerRef}
-      className={`flex ${isHorizontal ? "flex-row" : "flex-col"} h-full w-full ${className}`}
+      className={`flex ${isHorizontal ? "flex-row" : "flex-col"} ${className}`}
     >
       {/* First Panel */}
       <div style={firstPanelStyle} className="overflow-hidden">

src/Splitter.tsx

@@ -308,7 +308,11 @@ export function TechTreeViewer(props: TechTreeViewerProps) {
             rel="noopener noreferrer"
             onClick={(e) => {
               if (treeIndex !== 0) {
-                if (!confirm("You have unsaved changes. Are you sure you want to go back?")) {
+                if (
+                  !confirm(
+                    "You have unsaved changes. Are you sure you want to go back?",
+                  )
+                ) {
                   return;
                 }
               }
@@ -390,7 +394,11 @@ export function TechTreeViewer(props: TechTreeViewerProps) {
           <Hamburger menuItems={menuItems} />
         </div>
       </div>
-      <Splitter direction="horizontal" initialSplit={66} className="flex-1">
+      <Splitter
+        direction="horizontal"
+        initialSplit={66}
+        className="flex-1 w-full overflow-hidden"
+      >
         <div className="bg-gray-50 w-full h-full">
           {!rootNodeId && (
             <NodePicker