Repository: Mintplex-Labs/anything-llm
File: frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Citation/index.jsx (JavaScript)

Code before:
  const { references, title, text } = source;
  const dialogRef = useRef(null);

  useEffect(() => {
    if (source && dialogRef.current) {
      dialogRef.current.showModal();
    }
  }, [source]);

  const handleModalClose = () => {
    if (dialogRef.current) {
      dialogRef.current.close();
    }
    onClose();
  };

  return (
    <dialog
      ref={dialogRef}
      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, 45)}
            </h3>
            {references > 1 && (
              <p className="text-xs text-gray-400 mt-2">
                Referenced {references} times.
              </p>
            )}
          </div>
          <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"
          >
            <X className="text-gray-300 text-lg" />
          </button>
        </div>
        <div
          className="h-full w-full overflow-y-auto"
          style={{ maxHeight: "calc(100vh - 200px)" }}
        >
          <div className="p-6 space-y-2 flex-col">
            {[...Array(3)].map((_, idx) => (
              <SkeletonLine key={idx} />
            ))}
            <p className="text-white whitespace-pre-line">{HTMLDecode(text)}</p>
            <div className="mb-6">

Review comment (bug):
We should truncate shorter since that does appear to be an issue, however this does not work for all screen sizes. If possible we should _also_ be absolutely positioning the exit button since that will ensure even if we overflow on small screens - the button is at least still present.

Code after:
  const { references, title, text } = source;
  const dialogRef = useRef(null);

  useEffect(() => {
    if (source && dialogRef.current) {
      dialogRef.current.showModal();
    }
  }, [source]);

  const handleModalClose = () => {
    if (dialogRef.current) {
      dialogRef.current.close();
    }
    onClose();
  };

  return (
    <dialog
      ref={dialogRef}
      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="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="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>
        </div>
        <div
          className="h-full w-full overflow-y-auto"
          style={{ maxHeight: "calc(100vh - 200px)" }}
        >
          <div className="p-6 space-y-2 flex-col">
            {[...Array(3)].map((_, idx) => (
              <SkeletonLine key={idx} />
            ))}
            <p className="text-white whitespace-pre-line">{HTMLDecode(text)}</p>
            <div className="mb-6">
              {[...Array(3)].map((_, idx) => (
                <SkeletonLine key={idx} />