From 83f9e965d8f7125f71b04f0832b735df02c9d63a Mon Sep 17 00:00:00 2001
From: NamH <NamNh0122@gmail.com>
Date: Wed, 17 Apr 2024 15:57:19 +0700
Subject: [PATCH] fix: user cannot click on copy icon of model id (#2744)

Signed-off-by: James <james@jan.ai>
Co-authored-by: James <james@jan.ai>
---
 web/containers/DropdownListSidebar/index.tsx | 38 +++++++++++---------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/web/containers/DropdownListSidebar/index.tsx b/web/containers/DropdownListSidebar/index.tsx
index 892535717..5bb3d29cb 100644
--- a/web/containers/DropdownListSidebar/index.tsx
+++ b/web/containers/DropdownListSidebar/index.tsx
@@ -202,7 +202,7 @@ const DropdownListSidebar = ({
         <SelectPortal>
           <SelectContent
             className={twMerge(
-              'right-2  block w-full min-w-[450px] pr-0',
+              'right-2 block w-full min-w-[450px] pr-0',
               isTabActive === 1 && '[&_.select-scroll-down-button]:hidden'
             )}
           >
@@ -278,21 +278,6 @@ const DropdownListSidebar = ({
                               )}
                             >
                               <p className="line-clamp-2 text-xs">{x.id}</p>
-                              {clipboard.copied && copyId === x.id ? (
-                                <CheckIcon
-                                  size={16}
-                                  className="flex-shrink-0 text-green-600"
-                                />
-                              ) : (
-                                <CopyIcon
-                                  size={16}
-                                  className="z-20 flex-shrink-0 cursor-pointer"
-                                  onClick={() => {
-                                    clipboard.copy(x.id)
-                                    setCopyId(x.id)
-                                  }}
-                                />
-                              )}
                             </div>
                           </div>
                           <div className="flex-shrink-0 space-x-2">
@@ -305,6 +290,27 @@ const DropdownListSidebar = ({
                           </div>
                         </div>
                       </SelectItem>
+                      <div
+                        className={twMerge(
+                          'absolute -mt-6 ml-4 flex max-w-[200px] items-center space-x-2 text-muted-foreground'
+                        )}
+                      >
+                        <p className="line-clamp-1 flex-1 text-xs text-transparent">
+                          {x.id}
+                        </p>
+                        {clipboard.copied && copyId === x.id ? (
+                          <CheckIcon size={16} className="text-green-600" />
+                        ) : (
+                          <CopyIcon
+                            size={16}
+                            className="z-20 cursor-pointer"
+                            onClick={() => {
+                              clipboard.copy(x.id)
+                              setCopyId(x.id)
+                            }}
+                          />
+                        )}
+                      </div>
                     </div>
                   ))
                 )}