From 4dc5b2f728b6469767a4db62095e60e02d445a70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=90=9D=E5=8D=9C?= <dev@saasshop.local>
Date: Mon, 16 Mar 2026 12:43:21 +0800
Subject: [PATCH] fix(admin-ui): prevent card margin shift inside grid layouts

---
 public/css/admin-components.css               | 12 ++++++++++
 ...idShouldNotApplyCardPlusCardMarginTest.php | 23 +++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 tests/Feature/AdminCardGridShouldNotApplyCardPlusCardMarginTest.php

diff --git a/public/css/admin-components.css b/public/css/admin-components.css
index c1cf845..500a548 100644
--- a/public/css/admin-components.css
+++ b/public/css/admin-components.css
@@ -506,6 +506,18 @@
     margin-top:0;
 }
 
+/* 通用：所有 grid 容器内的卡片，都应清理 `.card + .card{margin-top:20px;}` 的纵向堆叠规则。
+ * 否则会出现“同一行/同一网格里的第2张卡开始整体下沉”的错位。
+ */
+.grid > .card,
+.grid-2 > .card,
+.grid-3 > .card,
+.grid-4 > .card,
+.grid-5 > .card,
+.grid-6 > .card{
+    margin-top:0;
+}
+
 @media (max-width: 1024px){
     .kpi-grid{
         grid-template-columns:repeat(2,minmax(0,1fr));
diff --git a/tests/Feature/AdminCardGridShouldNotApplyCardPlusCardMarginTest.php b/tests/Feature/AdminCardGridShouldNotApplyCardPlusCardMarginTest.php
new file mode 100644
index 0000000..1465ec8
--- /dev/null
+++ b/tests/Feature/AdminCardGridShouldNotApplyCardPlusCardMarginTest.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace Tests\Feature;
+
+use Tests\TestCase;
+
+class AdminCardGridShouldNotApplyCardPlusCardMarginTest extends TestCase
+{
+    public function test_admin_components_css_should_zero_margin_top_for_cards_inside_grids(): void
+    {
+        $css = (string) file_get_contents(public_path('css/admin-components.css'));
+
+        // 护栏：grid 容器内的卡片必须清理 `.card + .card{margin-top:20px;}` 的纵向堆叠规则
+        // 否则会导致同一行的第二张卡整体下沉，出现“卡片不在同一条线”。
+        $this->assertStringContainsString('.grid > .card', $css);
+        $this->assertStringContainsString('.grid-2 > .card', $css);
+        $this->assertStringContainsString('.grid-3 > .card', $css);
+        $this->assertStringContainsString('.grid-4 > .card', $css);
+        $this->assertStringContainsString('.grid-5 > .card', $css);
+        $this->assertStringContainsString('.grid-6 > .card', $css);
+        $this->assertStringContainsString('margin-top:0', $css);
+    }
+}