@snapdragonsnursery/react-components 1.1.8 → 1.1.9

package/package.json

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

package/src/ChildSearchModal.jsx

@@ -98,14 +98,22 @@ const ChildSearchModal = ({
     if (isOpen && modalRef.current) {
       const modal = modalRef.current;
       const rect = modal.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const expectedHeight = viewportHeight * 0.9;
+      const expectedContentHeight = expectedHeight - 300;
+      
       console.log('🔍 Modal Debug:', {
         modalHeight: rect.height,
         modalTop: rect.top,
         modalBottom: rect.bottom,
-        viewportHeight: window.innerHeight,
+        viewportHeight: viewportHeight,
+        expectedHeight: expectedHeight,
+        expectedContentHeight: expectedContentHeight,
         childrenCount: children.length,
         loading,
-        error
+        error,
+        modalStyle: modal.style,
+        modalComputedStyle: window.getComputedStyle(modal)
       });
       
       // Check if modal is overflowing
@@ -342,12 +350,13 @@ 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 overflow-hidden ${className}`}
+        className={`bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full flex flex-col overflow-hidden ${className}`}
         style={{
           maxHeight: '90vh',
           height: '90vh',
           display: 'flex',
-          flexDirection: 'column'
+          flexDirection: 'column',
+          position: 'relative'
         }}
       >
         {/* Header */}
@@ -648,10 +657,11 @@ const ChildSearchModal = ({
         <div 
           className="overflow-hidden"
           style={{ 
-            height: 'calc(90vh - 200px)',
-            maxHeight: 'calc(90vh - 200px)',
+            height: 'calc(90vh - 300px)',
+            maxHeight: 'calc(90vh - 300px)',
             overflow: 'hidden',
-            flex: 'none'
+            flex: 'none',
+            position: 'relative'
           }}
           ref={(el) => {
             if (el) {