truncate title to shorter length so x button is not hidden for longer… (#603)

* truncate title to shorter length so x button is not hidden for longer title names in the citation modal

* absolutely position x button on citation modal
This commit is contained in:
Sean Hatfield 2024-01-16 13:43:32 -08:00 committed by GitHub
parent d0a3f1e3e1
commit 8b11288764
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -119,21 +119,19 @@ function CitationDetailModal({ source, onClose }) {
className="bg-transparent outline-none fixed top-0 left-0 w-full h-full flex items-center justify-center z-10"
>
<div className="relative w-full max-w-2xl bg-main-gradient rounded-lg shadow border border-white/10 overflow-hidden">
<div className="flex items-start justify-between p-6 border-b rounded-t border-gray-500/50">
<div className="flex flex-col flex-grow mr-4">
<h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
{truncate(title, 52)}
</h3>
{references > 1 && (
<p className="text-xs text-gray-400 mt-2">
Referenced {references} times.
</p>
)}
</div>
<div className="relative p-6 border-b rounded-t border-gray-500/50">
<h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
{truncate(title, 45)}
</h3>
{references > 1 && (
<p className="text-xs text-gray-400 mt-2">
Referenced {references} times.
</p>
)}
<button
onClick={handleModalClose}
type="button"
className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
className="absolute top-6 right-6 transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
>
<X className="text-gray-300 text-lg" />
</button>
@ -159,6 +157,7 @@ function CitationDetailModal({ source, onClose }) {
);
}
function truncateMiddle(title) {
if (title.length <= 18) return title;