@snapdragonsnursery/react-components 1.1.6 → 1.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/ChildSearchModal.jsx +35 -6
package/package.json
CHANGED
package/src/ChildSearchModal.jsx
CHANGED
|
@@ -343,6 +343,12 @@ const ChildSearchModal = ({
|
|
|
343
343
|
<div
|
|
344
344
|
ref={modalRef}
|
|
345
345
|
className={`bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full h-[90vh] flex flex-col overflow-hidden ${className}`}
|
|
346
|
+
style={{
|
|
347
|
+
maxHeight: '90vh',
|
|
348
|
+
height: '90vh',
|
|
349
|
+
display: 'flex',
|
|
350
|
+
flexDirection: 'column'
|
|
351
|
+
}}
|
|
346
352
|
>
|
|
347
353
|
{/* Header */}
|
|
348
354
|
<div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
|
|
@@ -640,18 +646,29 @@ const ChildSearchModal = ({
|
|
|
640
646
|
|
|
641
647
|
{/* Content */}
|
|
642
648
|
<div
|
|
643
|
-
className="
|
|
649
|
+
className="overflow-hidden"
|
|
650
|
+
style={{
|
|
651
|
+
height: 'calc(90vh - 200px)',
|
|
652
|
+
maxHeight: 'calc(90vh - 200px)',
|
|
653
|
+
overflow: 'hidden',
|
|
654
|
+
flex: 'none'
|
|
655
|
+
}}
|
|
644
656
|
ref={(el) => {
|
|
645
657
|
if (el) {
|
|
646
658
|
const rect = el.getBoundingClientRect();
|
|
659
|
+
const computedStyle = window.getComputedStyle(el);
|
|
647
660
|
console.log('📦 Content Area Debug:', {
|
|
648
661
|
contentHeight: rect.height,
|
|
649
662
|
contentTop: rect.top,
|
|
650
663
|
contentBottom: rect.bottom,
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
664
|
+
flexGrow: computedStyle.flexGrow,
|
|
665
|
+
flexShrink: computedStyle.flexShrink,
|
|
666
|
+
minHeight: computedStyle.minHeight,
|
|
667
|
+
maxHeight: computedStyle.maxHeight,
|
|
668
|
+
height: computedStyle.height,
|
|
669
|
+
overflow: computedStyle.overflow,
|
|
670
|
+
styleMaxHeight: el.style.maxHeight,
|
|
671
|
+
styleHeight: el.style.height
|
|
655
672
|
});
|
|
656
673
|
}
|
|
657
674
|
}}
|
|
@@ -673,15 +690,27 @@ const ChildSearchModal = ({
|
|
|
673
690
|
{!loading && !error && (
|
|
674
691
|
<div
|
|
675
692
|
className="overflow-y-auto h-full max-h-full"
|
|
693
|
+
style={{
|
|
694
|
+
maxHeight: '100% !important',
|
|
695
|
+
height: '100% !important',
|
|
696
|
+
overflowY: 'auto !important'
|
|
697
|
+
}}
|
|
676
698
|
ref={(el) => {
|
|
677
699
|
if (el) {
|
|
678
700
|
const rect = el.getBoundingClientRect();
|
|
701
|
+
const computedStyle = window.getComputedStyle(el);
|
|
679
702
|
console.log('📜 Scrollable Content Debug:', {
|
|
680
703
|
scrollHeight: el.scrollHeight,
|
|
681
704
|
clientHeight: el.clientHeight,
|
|
682
705
|
scrollTop: el.scrollTop,
|
|
683
706
|
contentHeight: rect.height,
|
|
684
|
-
hasOverflow: el.scrollHeight > el.clientHeight
|
|
707
|
+
hasOverflow: el.scrollHeight > el.clientHeight,
|
|
708
|
+
parentHeight: el.parentElement?.offsetHeight,
|
|
709
|
+
maxHeight: computedStyle.maxHeight,
|
|
710
|
+
height: computedStyle.height,
|
|
711
|
+
overflowY: computedStyle.overflowY,
|
|
712
|
+
styleMaxHeight: el.style.maxHeight,
|
|
713
|
+
styleHeight: el.style.height
|
|
685
714
|
});
|
|
686
715
|
}
|
|
687
716
|
}}
|