Summary
The /admin Administration landing page (SimpleModule.Admin module frontend) renders its section groups — Identity, Content, System — too close together. With the dense card grid, the groups read as crowded: each section's uppercase label sits tight against the previous group's cards, so the visual grouping is weak.
Where
The admin landing page component in the SimpleModule.Admin module (served as SimpleModule.Admin.pages.js). Relevant DOM:
<div class="space-y-8"> <!-- 32px between section groups -->
<section>
<h2 class="text-sm font-semibold uppercase tracking-wider text-text-muted mb-3">Identity</h2> <!-- 12px under label -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> …cards… </div>
</section>
<section> … Content … </section>
<section> … System … </section>
</div>
Steps to reproduce
- Sign in as admin and open
/admin.
- With several sections populated (Identity: Users / Roles / OAuth Clients · Content: Menus · System: Rate Limiting / App Settings), note the groups blur together — only ~32px separates one group's cards from the next group's label.
Suggested fix
Give the section groups more vertical breathing room and a bit more space under each label, e.g. in the admin page component:
- section container:
space-y-8 → space-y-10 or space-y-12 (40–48px between groups)
- section label:
mb-3 → mb-4 (16px)
Consumer workaround (InvoiceManager)
Scoped override in the consumer's global stylesheet (the app's own pages use no <section>, so it's safe):
main .space-y-8 > section + section { margin-top: 3rem; } /* 32px → 48px between groups */
main .space-y-8 > section > h2 { margin-bottom: 1rem; } /* 12px → 16px under each label */
Environment
Severity: low (cosmetic / UX polish).
Summary
The
/adminAdministration landing page (SimpleModule.Admin module frontend) renders its section groups — Identity, Content, System — too close together. With the dense card grid, the groups read as crowded: each section's uppercase label sits tight against the previous group's cards, so the visual grouping is weak.Where
The admin landing page component in the
SimpleModule.Adminmodule (served asSimpleModule.Admin.pages.js). Relevant DOM:Steps to reproduce
/admin.Suggested fix
Give the section groups more vertical breathing room and a bit more space under each label, e.g. in the admin page component:
space-y-8→space-y-10orspace-y-12(40–48px between groups)mb-3→mb-4(16px)Consumer workaround (InvoiceManager)
Scoped override in the consumer's global stylesheet (the app's own pages use no
<section>, so it's safe):Environment
@simplemodule/* ^0.0.38(frontend), framework consumed from a0.0.38-localsource build.Severity: low (cosmetic / UX polish).