@snapdragonsnursery/react-components 1.1.7 → 1.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.1.7",
+  "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,7 +350,14 @@ 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',
+          position: 'relative'
+        }}
       >
         {/* Header */}
         <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
@@ -640,20 +655,30 @@ const ChildSearchModal = ({
 
         {/* Content */}
         <div 
-          className="flex-1 overflow-hidden min-h-0 max-h-0"
-          style={{ maxHeight: 'calc(90vh - 200px)' }}
+          className="overflow-hidden"
+          style={{ 
+            height: 'calc(90vh - 300px)',
+            maxHeight: 'calc(90vh - 300px)',
+            overflow: 'hidden',
+            flex: 'none',
+            position: 'relative'
+          }}
           ref={(el) => {
             if (el) {
               const rect = el.getBoundingClientRect();
+              const computedStyle = window.getComputedStyle(el);
               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,
-                maxHeight: window.getComputedStyle(el).maxHeight
+                flexGrow: computedStyle.flexGrow,
+                flexShrink: computedStyle.flexShrink,
+                minHeight: computedStyle.minHeight,
+                maxHeight: computedStyle.maxHeight,
+                height: computedStyle.height,
+                overflow: computedStyle.overflow,
+                styleMaxHeight: el.style.maxHeight,
+                styleHeight: el.style.height
               });
             }
           }}
@@ -675,17 +700,27 @@ const ChildSearchModal = ({
           {!loading && !error && (
             <div 
               className="overflow-y-auto h-full max-h-full"
-              style={{ maxHeight: '100%' }}
+              style={{ 
+                maxHeight: '100% !important',
+                height: '100% !important',
+                overflowY: 'auto !important'
+              }}
               ref={(el) => {
                 if (el) {
                   const rect = el.getBoundingClientRect();
+                  const computedStyle = window.getComputedStyle(el);
                   console.log('📜 Scrollable Content Debug:', {
                     scrollHeight: el.scrollHeight,
                     clientHeight: el.clientHeight,
                     scrollTop: el.scrollTop,
                     contentHeight: rect.height,
                     hasOverflow: el.scrollHeight > el.clientHeight,
-                    parentHeight: el.parentElement?.offsetHeight
+                    parentHeight: el.parentElement?.offsetHeight,
+                    maxHeight: computedStyle.maxHeight,
+                    height: computedStyle.height,
+                    overflowY: computedStyle.overflowY,
+                    styleMaxHeight: el.style.maxHeight,
+                    styleHeight: el.style.height
                   });
                 }
               }}