From bd4c42a11905b2ed74ea16703f4ff844474eb5d2 Mon Sep 17 00:00:00 2001
From: Adem ilter <ademilter@gmail.com>
Date: Thu, 7 Nov 2024 16:15:17 +0300
Subject: [PATCH] style remove button

---
 .../display/delete-alert-dialog.tsx           |  1 +
 .../components/display/display-list.tsx       | 19 +++++++------------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/packages/react-databrowser/src/components/databrowser/components/display/delete-alert-dialog.tsx b/packages/react-databrowser/src/components/databrowser/components/display/delete-alert-dialog.tsx
index a12ccd2..d10f767 100644
--- a/packages/react-databrowser/src/components/databrowser/components/display/delete-alert-dialog.tsx
+++ b/packages/react-databrowser/src/components/databrowser/components/display/delete-alert-dialog.tsx
@@ -19,6 +19,7 @@ export function DeleteAlertDialog({
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
+
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>Irreversible Action!</AlertDialogTitle>
diff --git a/packages/react-databrowser/src/components/databrowser/components/display/display-list.tsx b/packages/react-databrowser/src/components/databrowser/components/display/display-list.tsx
index b3e91f9..0f1ebf5 100644
--- a/packages/react-databrowser/src/components/databrowser/components/display/display-list.tsx
+++ b/packages/react-databrowser/src/components/databrowser/components/display/display-list.tsx
@@ -77,28 +77,23 @@ export const ListItems = ({
           onClick={() => {
             setSelectedListItem({ key, value })
           }}
-          className="h-10 border-b border-b-zinc-100 "
+          className="h-10 border-b border-b-zinc-100 hover:bg-zinc-50"
         >
           <td
             className={cn(
-              "cursor-pointer truncate px-3 py-2 hover:bg-zinc-50",
-              type === "list" || type === "stream" ? "w-10 text-center" : "max-w-0"
+              "cursor-pointer truncate px-3",
+              type === "list" || type === "stream" ? "w-24" : ""
             )}
           >
             {key}
           </td>
           {value !== undefined && (
-            <td
-              className={cn(
-                "max-w-0 cursor-pointer truncate px-3 py-2 hover:bg-zinc-50",
-                type === "zset" ? "w-10 text-center" : "max-w-0"
-              )}
-            >
+            <td className={cn("cursor-pointer truncate px-3", type === "zset" ? "w-24" : "")}>
               {value}
             </td>
           )}
           {type !== "stream" && (
-            <td width={20}>
+            <td width={20} className="px-3">
               <DeleteAlertDialog
                 onDeleteConfirm={(e) => {
                   e.stopPropagation()
@@ -111,8 +106,8 @@ export const ListItems = ({
                   })
                 }}
               >
-                <Button onClick={(e) => e.stopPropagation()}>
-                  <IconTrash size={16} />
+                <Button size="icon-sm" variant="secondary" onClick={(e) => e.stopPropagation()}>
+                  <IconTrash className="size-4 text-zinc-500" />
                 </Button>
               </DeleteAlertDialog>
             </td>