From 08702a53813f61f327331471ad54e65ffbf97368 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Tue, 8 Apr 2025 18:05:14 +0530
Subject: [PATCH] [WEB-3766] fix: user avatar in description version history
 dropdown item (#6888)

* fix: avatar url

* chore: update version modal width
---
 .../core/description-versions/dropdown-item.tsx       |  4 ++--
 .../components/core/description-versions/modal.tsx    | 11 ++++++++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/web/core/components/core/description-versions/dropdown-item.tsx b/web/core/components/core/description-versions/dropdown-item.tsx
index aafa59cdc..693219883 100644
--- a/web/core/components/core/description-versions/dropdown-item.tsx
+++ b/web/core/components/core/description-versions/dropdown-item.tsx
@@ -2,7 +2,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { TDescriptionVersion } from "@plane/types";
 import { Avatar, CustomMenu } from "@plane/ui";
-import { calculateTimeAgo } from "@plane/utils";
+import { calculateTimeAgo, getFileURL } from "@plane/utils";
 // hooks
 import { useMember } from "@/hooks/store";
 
@@ -21,7 +21,7 @@ export const DescriptionVersionsDropdownItem: React.FC<Props> = observer((props)
   return (
     <CustomMenu.MenuItem key={version.id} className="flex items-center gap-1" onClick={() => onClick(version.id)}>
       <span className="flex-shrink-0">
-        <Avatar name={versionCreator?.display_name} size="sm" src={versionCreator?.avatar_url} />
+        <Avatar name={versionCreator?.display_name} size="sm" src={getFileURL(versionCreator?.avatar_url ?? "")} />
       </span>
       <p className="text-xs text-custom-text-200 flex items-center gap-1.5">
         <span className="font-medium">{versionCreator?.display_name}</span>
diff --git a/web/core/components/core/description-versions/modal.tsx b/web/core/components/core/description-versions/modal.tsx
index 46308ca34..bd1b6ae94 100644
--- a/web/core/components/core/description-versions/modal.tsx
+++ b/web/core/components/core/description-versions/modal.tsx
@@ -9,6 +9,7 @@ import {
   Avatar,
   Button,
   EModalPosition,
+  EModalWidth,
   getButtonStyling,
   Loader,
   ModalCore,
@@ -16,7 +17,7 @@ import {
   TOAST_TYPE,
   Tooltip,
 } from "@plane/ui";
-import { calculateTimeAgo, cn, copyTextToClipboard } from "@plane/utils";
+import { calculateTimeAgo, cn, copyTextToClipboard, getFileURL } from "@plane/utils";
 // components
 import { RichTextReadOnlyEditor } from "@/components/editor";
 // hooks
@@ -76,7 +77,7 @@ export const DescriptionVersionsModal: React.FC<Props> = observer((props) => {
   if (!workspaceId) return null;
 
   return (
-    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.TOP}>
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.TOP} width={EModalWidth.XXXXL}>
       <div className="p-4" data-prevent-outside-click>
         {/* Header */}
         <div className="flex items-center justify-between gap-2 py-0.5">
@@ -84,7 +85,11 @@ export const DescriptionVersionsModal: React.FC<Props> = observer((props) => {
             <p className="flex items-center gap-1">
               {t("description_versions.edited_by")}
               <span className="flex-shrink-0">
-                <Avatar size="sm" src={versionCreator?.avatar_url} name={versionCreator?.display_name} />
+                <Avatar
+                  size="sm"
+                  src={getFileURL(versionCreator?.avatar_url ?? "")}
+                  name={versionCreator?.display_name}
+                />
               </span>
             </p>
             <p className="flex-shrink-0 text-custom-text-200">