From 8fbfb1445da19305c1ed9b2c3ca3d48eb2e90289 Mon Sep 17 00:00:00 2001
From: Riqwan Thamir <rmthamir@gmail.com>
Date: Wed, 28 Aug 2024 14:37:35 +0200
Subject: [PATCH] fix(dashboard): align items inside quick view popover (#8847)

* fix(dashboard): align items inside quick view popover

* chore: remove unwanted w-* classes
---
 .../order-activity-section/activity-items.tsx | 38 ++++++++-----------
 1 file changed, 15 insertions(+), 23 deletions(-)

diff --git a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-activity-section/activity-items.tsx b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-activity-section/activity-items.tsx
index 82b570c7ba..857813e1ce 100644
--- a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-activity-section/activity-items.tsx
+++ b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-activity-section/activity-items.tsx
@@ -53,24 +53,21 @@ function ActivityItems(props: ActivityItemsProps) {
       <Popover.Content
         align="center"
         side="top"
-        className="bg-ui-bg-component p-0"
+        className="bg-ui-bg-component p-0 max-w-[200px]"
       >
         <div className="flex flex-col">
           {!!itemsToSend?.length && (
             <div className="p-3">
-              <div className="txt-compact-small-plus">
+              <div className="txt-compact-small-plus mb-1">
                 {t("orders.activity.events.common.toSend")}
               </div>
 
-              <div className="flex flex-col items-center">
+              <div className="flex flex-col">
                 {itemsToSend?.map((item) => {
                   const originalItem = itemsMap?.get(item.item_id)!
 
                   return (
-                    <div
-                      className="flex flex-1 items-center gap-x-3"
-                      key={item.id}
-                    >
+                    <div className="flex items-center gap-x-3" key={item.id}>
                       <Text size="small" className="text-ui-fg-subtle">
                         {item.quantity}x
                       </Text>
@@ -78,11 +75,10 @@ function ActivityItems(props: ActivityItemsProps) {
                       <Thumbnail
                         src={originalItem?.variant?.product?.thumbnail}
                       />
-                      <div className="">
-                        <Text className="txt-compact-small text-ui-fg-subtle">
-                          {`${originalItem?.variant?.title} · ${originalItem?.variant?.product?.title}`}
-                        </Text>
-                      </div>
+
+                      <Text className="txt-compact-small text-ui-fg-subtle truncate">
+                        {`${originalItem?.variant?.title} · ${originalItem?.variant?.product?.title}`}
+                      </Text>
                     </div>
                   )
                 })}
@@ -94,19 +90,16 @@ function ActivityItems(props: ActivityItemsProps) {
 
           {!!itemsToReturn?.length && (
             <div className="border-t-2 border-dotted p-3">
-              <div className="txt-compact-small-plus">
+              <div className="txt-compact-small-plus mb-1">
                 {t("orders.activity.events.common.toReturn")}
               </div>
 
-              <div className="flex flex-col items-center">
+              <div className="flex flex-col">
                 {itemsToReturn?.map((item) => {
                   const originalItem = itemsMap?.get(item.item_id)!
 
                   return (
-                    <div
-                      className="flex flex-1 items-center gap-x-3"
-                      key={item.id}
-                    >
+                    <div className="flex items-center gap-x-3" key={item.id}>
                       <Text size="small" className="text-ui-fg-subtle">
                         {item.quantity}x
                       </Text>
@@ -114,11 +107,10 @@ function ActivityItems(props: ActivityItemsProps) {
                       <Thumbnail
                         src={originalItem?.variant?.product?.thumbnail}
                       />
-                      <div className="">
-                        <Text className="txt-compact-small text-ui-fg-subtle">
-                          {`${originalItem?.variant?.title} · ${originalItem?.variant?.product?.title}`}
-                        </Text>
-                      </div>
+
+                      <Text className="txt-compact-small text-ui-fg-subtle truncate">
+                        {`${originalItem?.variant?.title} · ${originalItem?.variant?.product?.title}`}
+                      </Text>
                     </div>
                   )
                 })}