From b53eb683bf63e0874ed13ccb29d82940f5fd40b2 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 25 May 2023 18:29:00 -0300
Subject: [PATCH] Hotfix for Import Flows modal

---
 .../modals/importModal/buttonBox/index.tsx    | 150 +++++++-----------
 src/frontend/src/modals/importModal/index.tsx |   2 +-
 src/frontend/tailwind.config.js               |   8 +
 3 files changed, 64 insertions(+), 96 deletions(-)

diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx
index 2e8978597..b8e51e388 100644
--- a/src/frontend/src/modals/importModal/buttonBox/index.tsx
+++ b/src/frontend/src/modals/importModal/buttonBox/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect } from "react";
+import React, { ReactNode, useEffect, useRef, useState } from "react";
 import { DocumentDuplicateIcon } from "@heroicons/react/solid";
 import { classNames } from "../../../utils";
 import Tooltip from "../../../components/TooltipComponent";
@@ -33,89 +33,48 @@ export default function ButtonBox({
   let textHeight: number;
   let textWidth: number;
   switch (size) {
-    case "small":
-      bigCircle = "h-12 w-12";
-      smallCircle = "h-8 w-8";
-      titleFontSize = "text-sm";
-      descriptionFontSize = "text-xs";
-      padding = "p-2 py-3";
-      marginTop = "mt-2";
-      height = "h-36";
-      textHeight = 70;
-      textWidth = 80;
-      width = "w-32";
-      break;
-    case "medium":
-      bigCircle = "h-16 w-16";
-      smallCircle = "h-12 w-12";
-      titleFontSize = "text-base";
-      descriptionFontSize = "text-sm";
-      padding = "p-4 py-5";
-      marginTop = "mt-3";
-      textHeight = 112;
-      textWidth = 162;
-      height = "h-44";
-      width = "w-36";
-      break;
-    case "big":
-      bigCircle = "h-20 w-20";
-      smallCircle = "h-16 w-16";
-      titleFontSize = "text-lg";
-      descriptionFontSize = "text-sm";
-      padding = "p-8 py-10";
-      marginTop = "mt-6";
-      height = "h-56";
-      width = "w-44";
-      break;
-    default:
-      bigCircle = "h-20 w-20";
-      smallCircle = "h-16 w-16";
-      titleFontSize = "text-lg";
-      descriptionFontSize = "text-sm";
-      padding = "p-8 py-10";
-      marginTop = "mt-6";
-      height = "h-56";
-      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);
-    };
-  }, []);
+		case "small":
+			bigCircle = "h-12 w-12";
+			smallCircle = "h-8 w-8";
+			titleFontSize = "text-sm";
+			descriptionFontSize = "text-xs";
+			padding = "p-2 py-3";
+			marginTop = "mt-2";
+			height = "h-36";
+			width = "w-32";
+			break;
+		case "medium":
+			bigCircle = "h-16 w-16";
+			smallCircle = "h-12 w-12";
+			titleFontSize = "text-base";
+			descriptionFontSize = "text-sm";
+			padding = "p-4 py-5";
+			marginTop = "mt-3";
+			height = "h-44";
+			width = "w-36";
+			break;
+		case "big":
+			bigCircle = "h-20 w-20";
+			smallCircle = "h-16 w-16";
+			titleFontSize = "text-lg";
+			descriptionFontSize = "text-sm";
+			padding = "p-8 py-10";
+			marginTop = "mt-6";
+			height = "h-56";
+			width = "w-44";
+			break;
+		default:
+			bigCircle = "h-20 w-20";
+			smallCircle = "h-16 w-16";
+			titleFontSize = "text-lg";
+			descriptionFontSize = "text-sm";
+			padding = "p-8 py-10";
+			marginTop = "mt-6";
+			height = "h-56";
+			width = "w-44";
+			break;
+	}
+  
 
   return (
     <button disabled={deactivate} onClick={onClick}>
@@ -129,7 +88,7 @@ export default function ButtonBox({
         )}
       >
         <div
-          className={`flex items-center justify-center ${bigCircle} bg-white/30 dark:bg-white/30 rounded-full`}
+          className={`flex items-center justify-center ${bigCircle} bg-white/30 dark:bg-white/30 rounded-full mb-1`}
         >
           <div
             className={`flex items-center justify-center ${smallCircle} bg-white dark:bg-white/80 rounded-full`}
@@ -137,16 +96,17 @@ export default function ButtonBox({
             <div className={textColor}>{icon}</div>
           </div>
         </div>
-        <h3
-          ref={titleRef}
-          className={classNames(
-            " font-semibold text-white dark:text-white/80",
-
-            marginTop
-          )}
-        >
-          {title}
-        </h3>
+        <div className="w-full mt-auto mb-auto">
+						<h3
+							className={classNames(
+								"w-full font-semibold break-words text-white dark:text-white/80 truncate-multiline",
+								titleFontSize,
+								marginTop
+							)}
+						>
+							{title}
+						</h3>
+						</div>
       </div>
     </button>
   );
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index ba7136bd1..2d3ef979a 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -177,7 +177,7 @@ export default function ImportModal() {
 											!loadingExamples &&
 											examples.map((example, index) => {
 												return (
-													<div id="index">
+													<div key={index}>
 														{" "}
 														<ButtonBox
 															size="small"
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index fd641afa4..5bef54616 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -42,6 +42,14 @@ module.exports = {
             display: "none",
           },
         },
+        ".truncate-multiline": {
+          "display": "-webkit-box",
+          "-webkit-line-clamp": "3", /* Change this number to the number of lines you want to show */
+          "-webkit-box-orient": "vertical",
+          "overflow": "hidden",
+          "text-overflow": "ellipsis",
+        },
+
         ".arrow-hide": {
           "&::-webkit-inner-spin-button": {
             "-webkit-appearance": "none",