Skip to content

Admin page section groups (Identity/Content/System) are visually crowded — too little vertical spacing #234

Description

@antosubash

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

  1. Sign in as admin and open /admin.
  2. 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-8space-y-10 or space-y-12 (40–48px between groups)
  • section label: mb-3mb-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).

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions