Skip to content

fix: add top and left spacing to empty-state messages across all object types - #729

Merged
bbrands02 merged 3 commits into
developmentfrom
fix/empty-state-spacing
Apr 24, 2026
Merged

fix: add top and left spacing to empty-state messages across all object types#729
bbrands02 merged 3 commits into
developmentfrom
fix/empty-state-spacing

Conversation

@bbrands02

Copy link
Copy Markdown
Contributor

Summary

All "No … defined/found" empty-state texts were rendering flush against the container edge with no breathing room. This PR adds consistent top and left spacing across every object type in the UI.

  • app.css: Added a global .emptyListHeader rule (margin-top: 20px; margin-left: 20px;) covering all 8 list-view sidebars in one place: webhooks, rules, jobs, mappings, consumers, endpoints, events, and synchronizations.
  • SynchronizationDetails, JobDetails, MappingDetails, EventDetails: Added scoped .tabPanel { padding: 15px 0 15px 15px; } — these detail views used the class for empty-state divs but had no corresponding CSS.
  • ViewEndpoint, ViewMapping, ViewJob, ViewSource, ViewSynchronization: Extended existing .tabPanel padding from vertical-only (15px 0) to include left spacing (15px 0 15px 15px).
  • EndpointDetails and JobLogIndex were already styled correctly and left unchanged.

Test plan

  • Open each object type list with no data — verify "No … defined" text has top and left margin
  • Open a detail view or modal with empty tabs — verify "No … found" text has left padding
  • Verify non-empty states are unaffected

🤖 Generated with Claude Code

bbrands02 and others added 3 commits April 24, 2026 14:32
…ct types

All "No … defined/found" empty-state texts were rendering flush against
the container edge with no breathing room.

- app.css: add global .emptyListHeader rule (margin-top/left 20px) covering
  all 8 list-view sidebars (webhooks, rules, jobs, mappings, consumers,
  endpoints, events, synchronizations) in one place.
- SynchronizationDetails, JobDetails, MappingDetails, EventDetails: add
  scoped .tabPanel padding (15px top/bottom, 15px left) — these views used
  the class for empty-state divs but had no corresponding CSS.
- ViewEndpoint, ViewMapping, ViewJob, ViewSource, ViewSynchronization: extend
  existing .tabPanel padding from vertical-only (15px 0) to include left
  spacing (15px 0 15px 15px).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Remove per-component scoped .tabPanel declarations and define the rule
once globally. EndpointDetails retains a scoped override for text-align
and color since it renders plain text rather than NcEmptyContent.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@bbrands02
bbrands02 merged commit 9e547ba into development Apr 24, 2026
2 of 12 checks passed
@rubenvdlinde
rubenvdlinde deleted the fix/empty-state-spacing branch May 22, 2026 13:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants