@abcagency/hc-ui-components 1.3.82 → 1.3.84

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState } from 'react';
 import * as Tabs from '@radix-ui/react-tabs';
 import Button from '~/components/modules/buttons/default';
 import { useMapList } from '~/contexts/mapListContext';
@@ -13,51 +13,22 @@ const MapTabs = ({
 	const tabButtonClasses =
     "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);
-
-	// Listen for changes in the content height
-	useEffect(() => {
-		if (!contentRef.current) return;
-
-		// 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);
-				}
-			}
-		});
-
-		resizeObserver.observe(contentRef.current);
-		return () => resizeObserver.disconnect();
-	}, [containerStyle, mobileTab]);
 
 	return (
 		<div
-			style={adjustedStyle}
+			style={containerStyle}
 			className={`
-        hc-relative hc-overflow-auto
+        hc-relative hc-flex hc-flex-col
         ${className ?? ""}
       `}
 		>
 			<Tabs.Root
-				className="hc-flex hc-flex-col hc-h-[100%] hc-min-h-[100%]"
+				className="hc-flex hc-flex-col hc-h-full"
 				value={mobileTab}
 			>
+				{/* Fixed tab header */}
 				<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-bg-white"
 					aria-label="Review positions"
 				>
 					<Tabs.Trigger value="listTab" asChild onClick={() => setMobileTab("listTab")}>
@@ -91,21 +62,37 @@ const MapTabs = ({
 						</Button.Btn>
 					</Tabs.Trigger>
 				</Tabs.List>
-				<Tabs.Content
-					ref={mobileTab === "listTab" ? contentRef : null}
-					className="hc-grow hc-bg-white hc-outline-none hc-h-[100%]"
-					value="listTab"
-				>
-					{list}
-				</Tabs.Content>
-				{showMap && (
-					<Tabs.Content className="hc-grow hc-bg-white hc-outline-none" value="mapTab">
-						{map}
+
+				{/* Scrollable content area */}
+				<div className="hc-flex-grow hc-overflow-auto">
+					{/* List Tab Content */}
+					<Tabs.Content
+						className="hc-h-full hc-bg-white hc-outline-none"
+						value="listTab"
+					>
+						<div className="hc-min-h-full">
+							{list}
+						</div>
+					</Tabs.Content>
+
+					{/* Map Tab Content */}
+					{showMap && (
+						<Tabs.Content
+							className="hc-h-full hc-bg-white hc-outline-none"
+							value="mapTab"
+						>
+							{map}
+						</Tabs.Content>
+					)}
+
+					{/* Filter Tab Content */}
+					<Tabs.Content
+						className="hc-h-full hc-bg-white hc-outline-none"
+						value="filterTab"
+					>
+						{filter}
 					</Tabs.Content>
-				)}
-				<Tabs.Content className="hc-grow hc-bg-white hc-outline-none hc-p-2" value="filterTab">
-					{filter}
-				</Tabs.Content>
+				</div>
 			</Tabs.Root>
 		</div>
 	);