linxianzhuang/saasshop
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(admin-ui): prevent card margin shift inside grid layouts

Browse Source
This commit is contained in:
萝卜
2026-03-16 12:43:21 +08:00
parent aa443b3322
commit 4dc5b2f728
2 changed files with 35 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
public/css/admin-components.css
View File

@@ -506,6 +506,18 @@
margin-top:0; 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){ @media (max-width: 1024px){
.kpi-grid{ .kpi-grid{
grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-columns:repeat(2,minmax(0,1fr));

23
tests/Feature/AdminCardGridShouldNotApplyCardPlusCardMarginTest.php Normal file
View File

@@ -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);
}
}