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">