From 6ea5a15762ea21bf3efe9d2d9591dedf9cf50b41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Frane=20Poli=C4=87?=
 <16856471+fPolic@users.noreply.github.com>
Date: Wed, 28 Aug 2024 17:20:56 +0200
Subject: [PATCH] fix(dashboard): active RMA section border (#8849)

**What**
- fix border around active RMA section on larger screens

**Prev**
![Screenshot 2024-08-28 at 14 36 11](https://github.com/user-attachments/assets/89f2dba9-3d84-4b32-a44c-44b32fb605fb)

**Now**
![Screenshot 2024-08-28 at 14 35 23](https://github.com/user-attachments/assets/6e96acfd-8916-456a-bdeb-9485d491f22f)
---
 .../active-order-claim-section.tsx                          | 6 +++---
 .../active-order-exchange-section.tsx                       | 6 +++---
 .../active-order-return-section.tsx                         | 6 +++---
 .../order-active-edit-section/order-active-edit-section.tsx | 2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/active-order-claim-section/active-order-claim-section.tsx b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/active-order-claim-section/active-order-claim-section.tsx
index b9b78f07b0..928f4b8ed9 100644
--- a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/active-order-claim-section/active-order-claim-section.tsx
+++ b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/active-order-claim-section/active-order-claim-section.tsx
@@ -48,12 +48,12 @@ export const ActiveOrderClaimSection = ({
         background:
           "repeating-linear-gradient(-45deg, rgb(212, 212, 216, 0.15), rgb(212, 212, 216,.15) 10px, transparent 10px, transparent 20px)",
       }}
-      className="-m-4 mb-1 border-b p-4"
+      className="z-10 -m-4 mb-1 border-x border-b p-4"
     >
       <Container className="flex items-center justify-between p-0">
-        <div className="flex w-full flex-row divide-y divide-dashed justify-between">
+        <div className="flex w-full flex-row justify-between">
           <div>
-            <div className="flex items-center gap-2 px-6 pt-4 mb-2">
+            <div className="mb-2 flex items-center gap-2 px-6 pt-4">
               <ExclamationCircle className="text-ui-fg-subtle" />
               <Heading level="h2">{t("orders.claims.panel.title")}</Heading>
             </div>
diff --git a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/active-order-exchange-section/active-order-exchange-section.tsx b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/active-order-exchange-section/active-order-exchange-section.tsx
index a0dd80fc0f..8def5560e3 100644
--- a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/active-order-exchange-section/active-order-exchange-section.tsx
+++ b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/active-order-exchange-section/active-order-exchange-section.tsx
@@ -48,12 +48,12 @@ export const ActiveOrderExchangeSection = ({
         background:
           "repeating-linear-gradient(-45deg, rgb(212, 212, 216, 0.15), rgb(212, 212, 216,.15) 10px, transparent 10px, transparent 20px)",
       }}
-      className="-m-4 mb-1 border-b p-4"
+      className="z-10 -m-4 mb-1 border-x border-b p-4"
     >
       <Container className="flex items-center justify-between p-0">
-        <div className="flex w-full flex-row divide-y divide-dashed justify-between">
+        <div className="flex w-full flex-row justify-between">
           <div>
-            <div className="flex items-center gap-2 px-6 pt-4 mb-2">
+            <div className="mb-2 flex items-center gap-2 px-6 pt-4">
               <ArrowPath className="text-ui-fg-subtle" />
               <Heading level="h2">{t("orders.exchanges.panel.title")}</Heading>
             </div>
diff --git a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/active-order-return-section/active-order-return-section.tsx b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/active-order-return-section/active-order-return-section.tsx
index 44738b61ac..dc13d39c2e 100644
--- a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/active-order-return-section/active-order-return-section.tsx
+++ b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/active-order-return-section/active-order-return-section.tsx
@@ -51,12 +51,12 @@ export const ActiveOrderReturnSection = ({
         background:
           "repeating-linear-gradient(-45deg, rgb(212, 212, 216, 0.15), rgb(212, 212, 216,.15) 10px, transparent 10px, transparent 20px)",
       }}
-      className="-m-4 mb-1 border-b p-4"
+      className="z-10 -m-4 mb-1 border-x border-b p-4"
     >
       <Container className="flex items-center justify-between p-0">
-        <div className="flex w-full flex-row divide-y divide-dashed justify-between">
+        <div className="flex w-full flex-row justify-between">
           <div>
-            <div className="flex items-center gap-2 px-6 pt-4 mb-2">
+            <div className="mb-2 flex items-center gap-2 px-6 pt-4">
               <ArrowUturnLeft className="text-ui-fg-subtle" />
               <Heading level="h2">{t("orders.returns.panel.title")}</Heading>
             </div>
diff --git a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-active-edit-section/order-active-edit-section.tsx b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-active-edit-section/order-active-edit-section.tsx
index 76a855cdb3..81c0ec3ca3 100644
--- a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-active-edit-section/order-active-edit-section.tsx
+++ b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-active-edit-section/order-active-edit-section.tsx
@@ -119,7 +119,7 @@ export const OrderActiveEditSection = ({
         background:
           "repeating-linear-gradient(-45deg, rgb(212, 212, 216, 0.15), rgb(212, 212, 216,.15) 10px, transparent 10px, transparent 20px)",
       }}
-      className="-m-4 mb-1 border-b p-4"
+      className="z-10 -m-4 mb-1 border-x border-b p-4"
     >
       <Container className="flex items-center justify-between p-0">
         <div className="flex w-full flex-col divide-y divide-dashed">