diff --git a/assets/css/routes/user-center/credits.css b/assets/css/routes/user-center/credits.css index 4300d002..f0e36433 100644 --- a/assets/css/routes/user-center/credits.css +++ b/assets/css/routes/user-center/credits.css @@ -2,7 +2,6 @@ * User Center — assets (wallet + points) legacy parity */ - /* The asset cards and the records card are sibling surfaces, not one nested card. */ .uc-content #panel-credits.dashboard-panel { margin: 0; @@ -18,14 +17,15 @@ display: grid; grid-template-columns: 1fr; gap: 12px; - margin-bottom: 16px; + margin-bottom: 10px; background: transparent; border: 0; box-shadow: none; } .uc-assets-row--dual { grid-template-columns: repeat(2, minmax(0, 1fr)); - grid-template-rows: auto auto; + grid-template-rows: auto; + gap: 10px; } .uc-assets-row--dual > .uc-assets-col { display: contents; @@ -69,6 +69,8 @@ /* One surface per asset (wallet / points) — never nest inside another card shell */ .uc-asset-card { + display: flex; + flex-direction: column; background: var(--main-bg-color, var(--surface-1, #fff)); border-radius: var(--main-radius, 8px); box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, 0.08)); @@ -106,10 +108,13 @@ .uc-asset-card__link { display: inline-flex; align-items: center; - margin-top: 8px; + margin-top: auto; + padding-top: 8px; background: none; border: 0; - padding: 0; + padding-right: 0; + padding-bottom: 0; + padding-left: 0; cursor: pointer; } .uc-asset-card__link:hover { @@ -872,7 +877,7 @@ body.uc-modal-open { /* Withdraw history + pending foot */ .uc-asset-card__foot { - margin-top: 8px; + margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--muted-border-color, rgba(0,0,0,.08)); } diff --git a/tests/widget-system/user-assets-layout-contract.test.cjs b/tests/widget-system/user-assets-layout-contract.test.cjs index f240b70d..901b2c7a 100644 --- a/tests/widget-system/user-assets-layout-contract.test.cjs +++ b/tests/widget-system/user-assets-layout-contract.test.cjs @@ -13,12 +13,17 @@ test('dual asset cards use an independent equal-height grid row', () => { const css = read('assets/css/routes/user-center/credits.css') const profile = read('inc/helpers/user-center-renderers/profile-credits.php') - assert.match(css, /\.uc-assets-row--dual\s*\{[\s\S]*?grid-template-columns:\s*repeat\(2,\s*minmax\(0,\s*1fr\)\);[\s\S]*?grid-template-rows:\s*auto auto;/) + assert.match(css, /\.uc-assets-row--dual\s*\{[\s\S]*?grid-template-columns:\s*repeat\(2,\s*minmax\(0,\s*1fr\)\);[\s\S]*?grid-template-rows:\s*auto;/) + assert.match(css, /\.uc-assets-row\s*\{[\s\S]*?margin-bottom:\s*10px;/) + assert.match(css, /\.uc-assets-row--dual\s*\{[\s\S]*?gap:\s*10px;/) assert.match(css, /\.uc-assets-row--dual\s*>\s*\.uc-assets-col\s*\{[\s\S]*?display:\s*contents;/) assert.match(css, /\.uc-assets-row--dual\s*>\s*\.uc-assets-col:first-child\s*>\s*\.uc-asset-card[\s\S]*?grid-column:\s*1;/) assert.match(css, /\.uc-assets-row--dual\s*>\s*\.uc-assets-col:last-child\s*>\s*\.uc-asset-card[\s\S]*?grid-column:\s*2;/) assert.match(css, /\.uc-assets-row--dual\s*>\s*\.uc-assets-col\s*>\s*\.uc-asset-card\s*\{[\s\S]*?grid-row:\s*1;/) assert.match(css, /\.uc-assets-row--dual\s*>\s*\.uc-assets-col\s*>\s*\.uc-card-pass\s*\{[\s\S]*?grid-row:\s*2;/) + assert.match(css, /\.uc-asset-card\s*\{[\s\S]*?display:\s*flex;[\s\S]*?flex-direction:\s*column;/) + assert.match(css, /\.uc-asset-card__link\s*\{[\s\S]*?margin-top:\s*auto;/) + assert.match(css, /\.uc-asset-card__foot\s*\{[\s\S]*?margin-top:\s*auto;/) assert.match(profile, /