From a6cfb9194f5a0f96e7db1acf77372aed65422ec6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20Falco=CC=81n?= <victoor89@gmail.com>
Date: Sat, 20 Jun 2026 19:50:06 +0200
Subject: [PATCH] fix(accounts): align the narrow grip glyph with the icon it
 replaces

GripVertical is narrower than the account type icon, so centered it
looked off. Nudge it to the right edge on the dashboard card (top-right)
and to the left edge on the accounts card (bottom-left).
---
 resources/js/components/accounts/account-list-card.tsx     | 4 +++-
 resources/js/components/dashboard/account-balance-card.tsx | 4 +++-
 resources/js/components/ui/card.tsx                        | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/accounts/account-list-card.tsx b/resources/js/components/accounts/account-list-card.tsx
index 6416df9c..d3418a73 100644
--- a/resources/js/components/accounts/account-list-card.tsx
+++ b/resources/js/components/accounts/account-list-card.tsx
@@ -440,7 +440,9 @@ export function AccountListCard({
                                 )}
                             />
                             {dragHandle && (
-                                <span className="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100">
+                                // The grip glyph is narrower than the type icon;
+                                // nudge it to the left edge to line up with it.
+                                <span className="absolute inset-0 flex -translate-x-1 items-center justify-start opacity-0 transition-opacity group-hover:opacity-100">
                                     {dragHandle}
                                 </span>
                             )}
diff --git a/resources/js/components/dashboard/account-balance-card.tsx b/resources/js/components/dashboard/account-balance-card.tsx
index 8d169829..317fc017 100644
--- a/resources/js/components/dashboard/account-balance-card.tsx
+++ b/resources/js/components/dashboard/account-balance-card.tsx
@@ -205,7 +205,9 @@ export function AccountBalanceCard({
                         )}
                     />
                     {dragHandle && (
-                        <span className="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100">
+                        // The grip glyph is narrower than the type icon; nudge it
+                        // to the right edge so it lines up with the icon it replaces.
+                        <span className="absolute inset-0 flex translate-x-1 items-center justify-end opacity-0 transition-opacity group-hover:opacity-100">
                             {dragHandle}
                         </span>
                     )}
diff --git a/resources/js/components/ui/card.tsx b/resources/js/components/ui/card.tsx
index ad305943..9008b4e1 100644
--- a/resources/js/components/ui/card.tsx
+++ b/resources/js/components/ui/card.tsx
@@ -29,7 +29,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
     return (
         <div
             data-slot="card-header"
-            className={cn("flex flex-col gap-1.5 px-6", className)}
+            className={cn("flex flex-col gap-1.5 px-5", className)}
             {...props}
         />
     )