From abf0f4a8c26bcf397634ab6d194fe01df8098fb8 Mon Sep 17 00:00:00 2001 From: bbrands02 Date: Fri, 24 Apr 2026 14:32:13 +0000 Subject: [PATCH 1/3] fix: add top and left spacing to empty-state messages across all object types MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- src/assets/app.css | 5 +++++ src/modals/Endpoint/ViewEndpoint.vue | 2 +- src/modals/Job/ViewJob.vue | 2 +- src/modals/Mapping/ViewMapping.vue | 2 +- src/modals/Source/ViewSource.vue | 2 +- src/modals/Synchronization/ViewSynchronization.vue | 2 +- src/views/Job/JobDetails.vue | 3 +++ src/views/Mapping/MappingDetails.vue | 4 ++++ src/views/Synchronization/SynchronizationDetails.vue | 4 ++++ src/views/event/EventDetails.vue | 4 ++++ 10 files changed, 25 insertions(+), 5 deletions(-) diff --git a/src/assets/app.css b/src/assets/app.css index 82104afe5..4448654f4 100644 --- a/src/assets/app.css +++ b/src/assets/app.css @@ -1,6 +1,11 @@ /** * Global (unscoped) styles for OpenConnector. */ +.emptyListHeader { + margin-top: 20px; + margin-left: 20px; +} + .open-register-missing { display: flex !important; align-items: center !important; diff --git a/src/modals/Endpoint/ViewEndpoint.vue b/src/modals/Endpoint/ViewEndpoint.vue index c23841ec1..5c1bbe8e9 100644 --- a/src/modals/Endpoint/ViewEndpoint.vue +++ b/src/modals/Endpoint/ViewEndpoint.vue @@ -300,7 +300,7 @@ export default { } .tabPanel { - padding: 15px 0; + padding: 15px 0 15px 15px; } .selectedIcon { diff --git a/src/modals/Job/ViewJob.vue b/src/modals/Job/ViewJob.vue index 8dc2b0a77..57c390c31 100644 --- a/src/modals/Job/ViewJob.vue +++ b/src/modals/Job/ViewJob.vue @@ -273,7 +273,7 @@ export default { } .tabPanel { - padding: 15px 0; + padding: 15px 0 15px 15px; } .selectedIcon { diff --git a/src/modals/Mapping/ViewMapping.vue b/src/modals/Mapping/ViewMapping.vue index 8d6ef9e9f..3ee4d1fd5 100644 --- a/src/modals/Mapping/ViewMapping.vue +++ b/src/modals/Mapping/ViewMapping.vue @@ -389,7 +389,7 @@ export default { } .tabPanel { - padding: 15px 0; + padding: 15px 0 15px 15px; } .selectedIcon { diff --git a/src/modals/Source/ViewSource.vue b/src/modals/Source/ViewSource.vue index 3dff80e1d..da692b4ce 100644 --- a/src/modals/Source/ViewSource.vue +++ b/src/modals/Source/ViewSource.vue @@ -389,7 +389,7 @@ export default { } .tabPanel { - padding: 15px 0; + padding: 15px 0 15px 15px; } .selectedIcon { diff --git a/src/modals/Synchronization/ViewSynchronization.vue b/src/modals/Synchronization/ViewSynchronization.vue index 8daf04333..aaf73f669 100644 --- a/src/modals/Synchronization/ViewSynchronization.vue +++ b/src/modals/Synchronization/ViewSynchronization.vue @@ -416,7 +416,7 @@ export default { } .tabPanel { - padding: 15px 0; + padding: 15px 0 15px 15px; } .selectedIcon { diff --git a/src/views/Job/JobDetails.vue b/src/views/Job/JobDetails.vue index 6da5ea79b..4ff9137c0 100644 --- a/src/views/Job/JobDetails.vue +++ b/src/views/Job/JobDetails.vue @@ -356,4 +356,7 @@ export default { word-wrap: break-word; } +.tabPanel { + padding: 15px 0 15px 15px; +} diff --git a/src/views/Mapping/MappingDetails.vue b/src/views/Mapping/MappingDetails.vue index bba519dc2..67483e90b 100644 --- a/src/views/Mapping/MappingDetails.vue +++ b/src/views/Mapping/MappingDetails.vue @@ -324,4 +324,8 @@ export default { gap: 1rem; margin-bottom: 1rem; } + +.tabPanel { + padding: 15px 0 15px 15px; +} diff --git a/src/views/Synchronization/SynchronizationDetails.vue b/src/views/Synchronization/SynchronizationDetails.vue index 102f48943..83a552814 100644 --- a/src/views/Synchronization/SynchronizationDetails.vue +++ b/src/views/Synchronization/SynchronizationDetails.vue @@ -427,4 +427,8 @@ export default { .gridDoubleWidth { grid-column: span 2; } + +.tabPanel { + padding: 15px 0 15px 15px; +} diff --git a/src/views/event/EventDetails.vue b/src/views/event/EventDetails.vue index 8870bc1cc..876a276f2 100644 --- a/src/views/event/EventDetails.vue +++ b/src/views/event/EventDetails.vue @@ -336,4 +336,8 @@ export default { background-color: var(--OC-color-status-background-debug); color: var(--OC-color-status-debug); } + +.tabPanel { + padding: 15px 0 15px 15px; +} From b72ca54401ce4900df1abebfb99624364fc190f2 Mon Sep 17 00:00:00 2001 From: bbrands02 Date: Fri, 24 Apr 2026 14:36:14 +0000 Subject: [PATCH 2/3] refactor: consolidate .tabPanel into a single global rule in app.css 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 --- src/assets/app.css | 4 ++++ src/modals/Endpoint/ViewEndpoint.vue | 4 ---- src/modals/Job/ViewJob.vue | 4 ---- src/modals/Mapping/ViewMapping.vue | 4 ---- src/modals/Source/ViewSource.vue | 4 ---- src/modals/Synchronization/ViewSynchronization.vue | 4 ---- src/views/Endpoint/EndpointDetails.vue | 1 - src/views/Job/JobDetails.vue | 3 --- src/views/Mapping/MappingDetails.vue | 3 --- src/views/Synchronization/SynchronizationDetails.vue | 3 --- src/views/event/EventDetails.vue | 3 --- 11 files changed, 4 insertions(+), 33 deletions(-) diff --git a/src/assets/app.css b/src/assets/app.css index 4448654f4..615d3852a 100644 --- a/src/assets/app.css +++ b/src/assets/app.css @@ -6,6 +6,10 @@ margin-left: 20px; } +.tabPanel { + padding: 15px 0 15px 15px; +} + .open-register-missing { display: flex !important; align-items: center !important; diff --git a/src/modals/Endpoint/ViewEndpoint.vue b/src/modals/Endpoint/ViewEndpoint.vue index 5c1bbe8e9..d08fcf280 100644 --- a/src/modals/Endpoint/ViewEndpoint.vue +++ b/src/modals/Endpoint/ViewEndpoint.vue @@ -299,10 +299,6 @@ export default { margin-bottom: 20px; } -.tabPanel { - padding: 15px 0 15px 15px; -} - .selectedIcon { color: var(--color-primary); } diff --git a/src/modals/Job/ViewJob.vue b/src/modals/Job/ViewJob.vue index 57c390c31..8875dbb14 100644 --- a/src/modals/Job/ViewJob.vue +++ b/src/modals/Job/ViewJob.vue @@ -272,10 +272,6 @@ export default { margin-bottom: 20px; } -.tabPanel { - padding: 15px 0 15px 15px; -} - .selectedIcon { color: var(--color-primary); } diff --git a/src/modals/Mapping/ViewMapping.vue b/src/modals/Mapping/ViewMapping.vue index 3ee4d1fd5..906556743 100644 --- a/src/modals/Mapping/ViewMapping.vue +++ b/src/modals/Mapping/ViewMapping.vue @@ -388,10 +388,6 @@ export default { margin-bottom: 20px; } -.tabPanel { - padding: 15px 0 15px 15px; -} - .selectedIcon { color: var(--color-primary); } diff --git a/src/modals/Source/ViewSource.vue b/src/modals/Source/ViewSource.vue index da692b4ce..8190c7341 100644 --- a/src/modals/Source/ViewSource.vue +++ b/src/modals/Source/ViewSource.vue @@ -388,10 +388,6 @@ export default { white-space: nowrap; } -.tabPanel { - padding: 15px 0 15px 15px; -} - .selectedIcon { color: var(--color-primary); } diff --git a/src/modals/Synchronization/ViewSynchronization.vue b/src/modals/Synchronization/ViewSynchronization.vue index aaf73f669..4188e34b0 100644 --- a/src/modals/Synchronization/ViewSynchronization.vue +++ b/src/modals/Synchronization/ViewSynchronization.vue @@ -415,10 +415,6 @@ export default { margin-bottom: 20px; } -.tabPanel { - padding: 15px 0 15px 15px; -} - .selectedIcon { color: var(--color-primary); } diff --git a/src/views/Endpoint/EndpointDetails.vue b/src/views/Endpoint/EndpointDetails.vue index 5a6d356fe..3c7d6dc8e 100644 --- a/src/views/Endpoint/EndpointDetails.vue +++ b/src/views/Endpoint/EndpointDetails.vue @@ -317,7 +317,6 @@ export default { } .tabPanel { - padding: 20px; text-align: center; color: var(--color-text-maxcontrast); } diff --git a/src/views/Job/JobDetails.vue b/src/views/Job/JobDetails.vue index 4ff9137c0..6da5ea79b 100644 --- a/src/views/Job/JobDetails.vue +++ b/src/views/Job/JobDetails.vue @@ -356,7 +356,4 @@ export default { word-wrap: break-word; } -.tabPanel { - padding: 15px 0 15px 15px; -} diff --git a/src/views/Mapping/MappingDetails.vue b/src/views/Mapping/MappingDetails.vue index 67483e90b..602c10c2a 100644 --- a/src/views/Mapping/MappingDetails.vue +++ b/src/views/Mapping/MappingDetails.vue @@ -325,7 +325,4 @@ export default { margin-bottom: 1rem; } -.tabPanel { - padding: 15px 0 15px 15px; -} diff --git a/src/views/Synchronization/SynchronizationDetails.vue b/src/views/Synchronization/SynchronizationDetails.vue index 83a552814..6b2e02251 100644 --- a/src/views/Synchronization/SynchronizationDetails.vue +++ b/src/views/Synchronization/SynchronizationDetails.vue @@ -428,7 +428,4 @@ export default { grid-column: span 2; } -.tabPanel { - padding: 15px 0 15px 15px; -} diff --git a/src/views/event/EventDetails.vue b/src/views/event/EventDetails.vue index 876a276f2..0d9468998 100644 --- a/src/views/event/EventDetails.vue +++ b/src/views/event/EventDetails.vue @@ -337,7 +337,4 @@ export default { color: var(--OC-color-status-debug); } -.tabPanel { - padding: 15px 0 15px 15px; -} From 558fad8b6041a32fc1cb126844bb28778ee19a59 Mon Sep 17 00:00:00 2001 From: bbrands02 Date: Fri, 24 Apr 2026 14:40:02 +0000 Subject: [PATCH 3/3] fix: remove trailing blank lines left after tabPanel removal Co-Authored-By: Claude Sonnet 4.6 --- src/views/Mapping/MappingDetails.vue | 1 - src/views/Synchronization/SynchronizationDetails.vue | 1 - src/views/event/EventDetails.vue | 1 - 3 files changed, 3 deletions(-) diff --git a/src/views/Mapping/MappingDetails.vue b/src/views/Mapping/MappingDetails.vue index 602c10c2a..bba519dc2 100644 --- a/src/views/Mapping/MappingDetails.vue +++ b/src/views/Mapping/MappingDetails.vue @@ -324,5 +324,4 @@ export default { gap: 1rem; margin-bottom: 1rem; } - diff --git a/src/views/Synchronization/SynchronizationDetails.vue b/src/views/Synchronization/SynchronizationDetails.vue index 6b2e02251..102f48943 100644 --- a/src/views/Synchronization/SynchronizationDetails.vue +++ b/src/views/Synchronization/SynchronizationDetails.vue @@ -427,5 +427,4 @@ export default { .gridDoubleWidth { grid-column: span 2; } - diff --git a/src/views/event/EventDetails.vue b/src/views/event/EventDetails.vue index 0d9468998..8870bc1cc 100644 --- a/src/views/event/EventDetails.vue +++ b/src/views/event/EventDetails.vue @@ -336,5 +336,4 @@ export default { background-color: var(--OC-color-status-background-debug); color: var(--OC-color-status-debug); } -