fix: reduce mobile admin content gap

This commit is contained in:
nianzhibai
2026-05-28 20:50:46 +08:00
parent 94669fd35e
commit 3c7219ecd6
2 changed files with 17 additions and 3 deletions
+13 -3
View File
@@ -953,12 +953,16 @@
* ========================================================= */
@media (max-width: 768px) {
.admin-shell {
grid-template-columns: minmax(0, 1fr);
display: flex;
flex-direction: column;
min-height: 100dvh;
}
.admin-sidebar {
position: sticky;
top: 0;
flex: 0 0 48px;
width: 100%;
height: 48px;
min-height: 48px;
flex-direction: row;
@@ -1023,7 +1027,14 @@
.admin-nav__link.is-active::before { display: none; }
.admin-main {
padding: var(--space-4) var(--space-3);
flex: 1 1 auto;
width: 100%;
padding: var(--space-2) var(--space-3) var(--space-4);
}
.admin-page__header {
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.admin-page__title {
@@ -2195,4 +2206,3 @@
font-weight: var(--weight-semibold);
color: var(--text-default);
}
+4
View File
@@ -82,10 +82,14 @@ test("admin modals and action footers adapt on mobile", () => {
test("mobile admin top navigation stays compact", () => {
const css = mobileCss();
assert.match(ruleBody(css, ".admin-shell"), /display\s*:\s*flex/);
assert.match(ruleBody(css, ".admin-shell"), /flex-direction\s*:\s*column/);
assert.match(ruleBody(css, ".admin-sidebar"), /height\s*:\s*48px/);
assert.match(ruleBody(css, ".admin-sidebar"), /min-height\s*:\s*48px/);
assert.match(ruleBody(css, ".admin-nav"), /align-items\s*:\s*center/);
assert.match(ruleBody(css, ".admin-nav__link"), /height\s*:\s*34px/);
assert.match(ruleBody(css, ".admin-nav__link"), /line-height\s*:\s*1/);
assert.match(ruleBody(css, ".admin-nav__link"), /flex\s*:\s*0\s+0\s+auto/);
assert.match(ruleBody(css, ".admin-main"), /padding\s*:\s*var\(--space-2\)\s+var\(--space-3\)\s+var\(--space-4\)/);
assert.match(ruleBody(css, ".admin-page__header"), /margin-bottom\s*:\s*var\(--space-3\)/);
});