@snapdragonsnursery/react-components 1.1.4 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/ChildSearchModal.jsx

@@ -93,6 +93,31 @@ const ChildSearchModal = ({
     };
   }, [isOpen, onClose]);
 
+  // Debug modal dimensions
+  useEffect(() => {
+    if (isOpen && modalRef.current) {
+      const modal = modalRef.current;
+      const rect = modal.getBoundingClientRect();
+      console.log('🔍 Modal Debug:', {
+        modalHeight: rect.height,
+        modalTop: rect.top,
+        modalBottom: rect.bottom,
+        viewportHeight: window.innerHeight,
+        childrenCount: children.length,
+        loading,
+        error
+      });
+      
+      // Check if modal is overflowing
+      if (rect.bottom > window.innerHeight) {
+        console.warn('⚠️ Modal is overflowing bottom of viewport!');
+      }
+      if (rect.top < 0) {
+        console.warn('⚠️ Modal is overflowing top of viewport!');
+      }
+    }
+  }, [isOpen, children.length, loading, error]);
+
   // Search children
   const searchChildren = useCallback(async () => {
     if (!instance || !accounts[0]) {
@@ -317,7 +342,7 @@ const ChildSearchModal = ({
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 overflow-hidden">
       <div
         ref={modalRef}
-        className={`bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full h-[90vh] flex flex-col ${className}`}
+        className={`bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full h-[90vh] flex flex-col overflow-hidden ${className}`}
       >
         {/* Header */}
         <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
@@ -614,7 +639,23 @@ const ChildSearchModal = ({
         </div>
 
         {/* Content */}
-        <div className="flex-1 overflow-hidden">
+        <div 
+          className="flex-1 overflow-hidden min-h-0"
+          ref={(el) => {
+            if (el) {
+              const rect = el.getBoundingClientRect();
+              console.log('📦 Content Area Debug:', {
+                contentHeight: rect.height,
+                contentTop: rect.top,
+                contentBottom: rect.bottom,
+                computedStyle: window.getComputedStyle(el),
+                flexGrow: window.getComputedStyle(el).flexGrow,
+                flexShrink: window.getComputedStyle(el).flexShrink,
+                minHeight: window.getComputedStyle(el).minHeight
+              });
+            }
+          }}
+        >
           {loading && (
             <div className="flex items-center justify-center p-8">
               <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
@@ -630,7 +671,21 @@ const ChildSearchModal = ({
           )}
 
           {!loading && !error && (
-            <div className="overflow-y-auto h-full">
+            <div 
+              className="overflow-y-auto h-full max-h-full"
+              ref={(el) => {
+                if (el) {
+                  const rect = el.getBoundingClientRect();
+                  console.log('📜 Scrollable Content Debug:', {
+                    scrollHeight: el.scrollHeight,
+                    clientHeight: el.clientHeight,
+                    scrollTop: el.scrollTop,
+                    contentHeight: rect.height,
+                    hasOverflow: el.scrollHeight > el.clientHeight
+                  });
+                }
+              }}
+            >
               {children.length === 0 ? (
                 <div className="p-6 text-center text-gray-500 dark:text-gray-400">
                   {debouncedSearchTerm