idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-23 16:59:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(web/filters): truncate too long name (#545)

Browse source 
* 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.
This commit is contained in:
xoaaC 2022-12-03 15:45:18 +01:00 • committed by GitHub
parent 25a165b764
commit 2ae237015d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

4
web/src/components/modals/index.tsx
View file

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

2
web/src/screens/filters/details.tsx
View file

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