@abcagency/hc-ui-components 1.3.82 → 1.3.83

package/src/components/modules/maps/tabs.js

@@ -14,33 +14,49 @@ const MapTabs = ({
     "hc-flex hc-items-center hc-gap-2 hc-rounded-none hc-border-x-0 data-[state=active]:hc-bg-primary data-[state=active]:hc-text-white";
 	const { mobileTab, setMobileTab, containerStyle } = useMapList();
 	const [adjustedStyle, setAdjustedStyle] = useState(containerStyle);
-	const contentRef = useRef(null);
+	const listContentRef = useRef(null);
+	const filterContentRef = useRef(null);
 
 	// Listen for changes in the content height
 	useEffect(() => {
-		if (!contentRef.current) return;
+		// Determine which content ref to observe based on active tab
+		const activeRef = mobileTab === "listTab"
+			? listContentRef.current
+			: mobileTab === "filterTab"
+				? filterContentRef.current
+				: null;
+
+		if (!activeRef) return;
+
+		// Function to adjust container height based on content
+		const adjustHeight = contentHeight => {
+			const viewportHeight = window.innerHeight;
+
+			// If content is taller than the container, adjust the height
+			if (contentHeight > viewportHeight * 0.86 - 50) { // Subtract 50px for tab buttons
+				setAdjustedStyle({
+					...containerStyle,
+					height: 'auto',
+					maxHeight: `${Math.min(contentHeight + 100, viewportHeight * 0.95)}px`,
+					overflowY: 'auto'
+				});
+			} else {
+				setAdjustedStyle(containerStyle);
+			}
+		};
 
 		// Create a ResizeObserver to detect content size changes
 		const resizeObserver = new ResizeObserver(entries => {
 			for (let entry of entries) {
-				// Check if content exceeds container
-				const contentHeight = entry.contentRect.height;
-				const viewportHeight = window.innerHeight;
-
-				// If content is taller than 86vh, adjust the container style
-				if (contentHeight > viewportHeight * 0.86) {
-					setAdjustedStyle({
-						...containerStyle,
-						height: 'auto',
-						maxHeight: `${Math.min(contentHeight + 100, viewportHeight * 0.95)}px`
-					});
-				} else {
-					setAdjustedStyle(containerStyle);
-				}
+				adjustHeight(entry.contentRect.height);
 			}
 		});
 
-		resizeObserver.observe(contentRef.current);
+		resizeObserver.observe(activeRef);
+
+		// Initial height check
+		adjustHeight(activeRef.scrollHeight);
+
 		return () => resizeObserver.disconnect();
 	}, [containerStyle, mobileTab]);
 
@@ -57,7 +73,7 @@ const MapTabs = ({
 				value={mobileTab}
 			>
 				<Tabs.List
-					className="hc-w-full hc-shrink-0 hc-flex hc-divide-x hc-divide-primary"
+					className="hc-w-full hc-shrink-0 hc-flex hc-divide-x hc-divide-primary hc-sticky hc-top-0 hc-z-10 hc-bg-white"
 					aria-label="Review positions"
 				>
 					<Tabs.Trigger value="listTab" asChild onClick={() => setMobileTab("listTab")}>
@@ -91,20 +107,37 @@ const MapTabs = ({
 						</Button.Btn>
 					</Tabs.Trigger>
 				</Tabs.List>
+
+				{/* List Tab Content */}
 				<Tabs.Content
-					ref={mobileTab === "listTab" ? contentRef : null}
-					className="hc-grow hc-bg-white hc-outline-none hc-h-[100%]"
+					ref={listContentRef}
+					className="hc-grow hc-bg-white hc-outline-none hc-overflow-auto"
 					value="listTab"
 				>
-					{list}
+					<div className="hc-min-h-full hc-pb-20">
+						{list}
+					</div>
 				</Tabs.Content>
+
+				{/* Map Tab Content */}
 				{showMap && (
-					<Tabs.Content className="hc-grow hc-bg-white hc-outline-none" value="mapTab">
+					<Tabs.Content
+						className="hc-grow hc-bg-white hc-outline-none"
+						value="mapTab"
+					>
 						{map}
 					</Tabs.Content>
 				)}
-				<Tabs.Content className="hc-grow hc-bg-white hc-outline-none hc-p-2" value="filterTab">
-					{filter}
+
+				{/* Filter Tab Content */}
+				<Tabs.Content
+					ref={filterContentRef}
+					className="hc-grow hc-bg-white hc-outline-none hc-overflow-auto"
+					value="filterTab"
+				>
+					<div className="hc-min-h-full hc-p-2 hc-pb-20">
+						{filter}
+					</div>
 				</Tabs.Content>
 			</Tabs.Root>
 		</div>