updating font size of import card based on title

src/frontend/src/modals/importModal/buttonBox/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode, useEffect } from "react";
 import { DocumentDuplicateIcon } from "@heroicons/react/solid";
 import { classNames } from "../../../utils";
 import Tooltip from "../../../components/TooltipComponent";
@@ -30,6 +30,8 @@ export default function ButtonBox({
 	let marginTop: string;
 	let height: string;
 	let width: string;
+	let textHeight: number;
+	let textWidth: number;
 	switch (size) {
 		case "small":
 			bigCircle = "h-12 w-12";
@@ -39,6 +41,8 @@ export default function ButtonBox({
 			padding = "p-2 py-3";
 			marginTop = "mt-2";
 			height = "h-36";
+			textHeight=70;
+			textWidth=80;
 			width = "w-32";
 			break;
 		case "medium":
@@ -48,6 +52,8 @@ export default function ButtonBox({
 			descriptionFontSize = "text-sm";
 			padding = "p-4 py-5";
 			marginTop = "mt-3";
+			textHeight=112;
+			textWidth=162;
 			height = "h-44";
 			width = "w-36";
 			break;
@@ -72,6 +78,46 @@ export default function ButtonBox({
 			width = "w-44";
 			break;
 	}
+
+	const titleRef = React.useRef<HTMLHeadingElement>(null);
+
+	useEffect(() => {
+		const resizeFont = () => {
+			const titleElement = titleRef.current;
+			if (titleElement) {
+			  const containerWidth = titleElement.offsetWidth;
+			  const containerHeight = titleElement.offsetHeight;
+		  
+			  const titleComputedStyle = window.getComputedStyle(titleElement);
+			  const titleWidth = titleElement.getBoundingClientRect().width;
+		  
+			  const currentFontSize = parseFloat(titleComputedStyle.fontSize);
+		  
+			  const desiredWidth = textWidth - 10; // Subtracting the desired padding
+		  
+			  // Calculate the desired font size based on the adjusted width
+			  let desiredFontSize = currentFontSize * (desiredWidth / titleWidth);
+		  
+			  // Adjust the desired font size to fit within the container height, if needed
+			  const maxHeight = containerHeight - 10; // Subtracting the desired top padding
+			  const maxHeightFontSize = maxHeight * 0.8; // Adjust the scaling factor as needed
+			  desiredFontSize = Math.min(desiredFontSize, maxHeightFontSize);
+		  
+			  // Apply the desired font size and padding to the title element
+			  titleElement.style.fontSize = `${desiredFontSize}px`;
+			  titleElement.style.paddingLeft = '5px';
+			  titleElement.style.paddingRight = '5px';
+			}
+		  };
+		  
+	  
+		resizeFont();
+		window.addEventListener("resize", resizeFont);
+		return () => {
+		  window.removeEventListener("resize", resizeFont);
+		};
+	  }, []);
+	  
 	return (
 		<button disabled={deactivate} onClick={onClick}>
 				<div
@@ -92,17 +138,16 @@ export default function ButtonBox({
 								<div className={textColor}>{icon}</div>
 							</div>
 						</div>
-						<div className="mt-auto mb-auto">
 						<h3
+						 ref={titleRef}
 							className={classNames(
-								"font-semibold text-white dark:text-white/80",
+								" font-semibold text-white dark:text-white/80",
-								titleFontSize,
+
 								marginTop
 							)}
 						>
 							{title}
 						</h3>
-						</div>
 				</div>
 		</button>
 	);