From 2ae237015dd0fd3a1b4423280bd8995f82e4d1a4 Mon Sep 17 00:00:00 2001
From: xoaaC <35452459+xoaaC@users.noreply.github.com>
Date: Sat, 3 Dec 2022 15:45:18 +0100
Subject: [PATCH] fix(web/filters): truncate too long name (#545)

* Fixed an issue where the div containing the filter name in the delete modal would overflow if the filter name is too long. Text inside the div is now contained and will word-break when too long.
* Fixed an issue where the filter name headline would break into a second line if the filter name is too long. In case the filter name is too long the filter name headline will now truncate and show it's full value at mouseover.
---
 web/src/components/modals/index.tsx | 4 ++--
 web/src/screens/filters/details.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/components/modals/index.tsx b/web/src/components/modals/index.tsx
index c40628d..40623ee 100644
--- a/web/src/components/modals/index.tsx
+++ b/web/src/components/modals/index.tsx
@@ -50,8 +50,8 @@ export const DeleteModal: FC<DeleteModalProps> = ({ isOpen, buttonRef, toggle, d
             <div className="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
               <div className="sm:flex sm:items-start">
                 <ExclamationTriangleIcon className="h-16 w-16 text-red-500 dark:text-red-500" aria-hidden="true" />
-                <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                  <Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
+                <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:pr-8 sm:text-left max-w-full">
+                  <Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900 dark:text-white break-words">
                     {title}
                   </Dialog.Title>
                   <div className="mt-2">
diff --git a/web/src/screens/filters/details.tsx b/web/src/screens/filters/details.tsx
index 34a0a08..0690b4f 100644
--- a/web/src/screens/filters/details.tsx
+++ b/web/src/screens/filters/details.tsx
@@ -213,7 +213,7 @@ export default function FilterDetails() {
             </NavLink>
           </h1>
           <ChevronRightIcon className="h-6 w-6 text-gray-500" aria-hidden="true" />
-          <h1 className="text-3xl font-bold text-black dark:text-white">{filter.name}</h1>
+          <h1 className="text-3xl font-bold text-black dark:text-white truncate" title={filter.name}>{filter.name}</h1>
         </div>
       </header>
       <div className="max-w-screen-xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">