From 8b11288764ac9ce407283717daa819cbab3caa57 Mon Sep 17 00:00:00 2001
From: Sean Hatfield <seanhatfield5@gmail.com>
Date: Tue, 16 Jan 2024 13:43:32 -0800
Subject: [PATCH] =?UTF-8?q?truncate=20title=20to=20shorter=20length=20so?=
 =?UTF-8?q?=20x=20button=20is=20not=20hidden=20for=20longer=E2=80=A6=20(#6?=
 =?UTF-8?q?03)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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
---
 .../ChatHistory/Citation/index.jsx            | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Citation/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Citation/index.jsx
index 1146639a..c4bda294 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Citation/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Citation/index.jsx
@@ -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;