@snapdragonsnursery/react-components 1.1.7 → 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 +34 -9
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,20 +646,29 @@ const ChildSearchModal = ({
|
|
|
640
646
|
|
|
641
647
|
{/* Content */}
|
|
642
648
|
<div
|
|
643
|
-
className="
|
|
644
|
-
style={{
|
|
649
|
+
className="overflow-hidden"
|
|
650
|
+
style={{
|
|
651
|
+
height: 'calc(90vh - 200px)',
|
|
652
|
+
maxHeight: 'calc(90vh - 200px)',
|
|
653
|
+
overflow: 'hidden',
|
|
654
|
+
flex: 'none'
|
|
655
|
+
}}
|
|
645
656
|
ref={(el) => {
|
|
646
657
|
if (el) {
|
|
647
658
|
const rect = el.getBoundingClientRect();
|
|
659
|
+
const computedStyle = window.getComputedStyle(el);
|
|
648
660
|
console.log('📦 Content Area Debug:', {
|
|
649
661
|
contentHeight: rect.height,
|
|
650
662
|
contentTop: rect.top,
|
|
651
663
|
contentBottom: rect.bottom,
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
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
|
|
657
672
|
});
|
|
658
673
|
}
|
|
659
674
|
}}
|
|
@@ -675,17 +690,27 @@ const ChildSearchModal = ({
|
|
|
675
690
|
{!loading && !error && (
|
|
676
691
|
<div
|
|
677
692
|
className="overflow-y-auto h-full max-h-full"
|
|
678
|
-
style={{
|
|
693
|
+
style={{
|
|
694
|
+
maxHeight: '100% !important',
|
|
695
|
+
height: '100% !important',
|
|
696
|
+
overflowY: 'auto !important'
|
|
697
|
+
}}
|
|
679
698
|
ref={(el) => {
|
|
680
699
|
if (el) {
|
|
681
700
|
const rect = el.getBoundingClientRect();
|
|
701
|
+
const computedStyle = window.getComputedStyle(el);
|
|
682
702
|
console.log('📜 Scrollable Content Debug:', {
|
|
683
703
|
scrollHeight: el.scrollHeight,
|
|
684
704
|
clientHeight: el.clientHeight,
|
|
685
705
|
scrollTop: el.scrollTop,
|
|
686
706
|
contentHeight: rect.height,
|
|
687
707
|
hasOverflow: el.scrollHeight > el.clientHeight,
|
|
688
|
-
parentHeight: el.parentElement?.offsetHeight
|
|
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
|
|
689
714
|
});
|
|
690
715
|
}
|
|
691
716
|
}}
|