diff --git a/src/app/_apm-mixins.scss b/src/app/_apm-mixins.scss
index 937a3e7..0d0bb1a 100644
--- a/src/app/_apm-mixins.scss
+++ b/src/app/_apm-mixins.scss
@@ -373,6 +373,17 @@
   }
 }
 
+@mixin correct-ocx-interactive-data-view {
+  :host ::ng-deep {
+    ocx-interactive-data-view > div {
+      padding: 0 0 0.5rem 0 !important;
+      &.surface-border {
+        border-bottom: var(--table-header-border) !important;
+      }
+    }
+  }
+}
+
 /* ZEBRA rows */
 @mixin dataview-list-zebra-rows {
   :host ::ng-deep {
diff --git a/src/app/remotes/user-roles-permissions/user-roles-permissions.component.html b/src/app/remotes/user-roles-permissions/user-roles-permissions.component.html
index a6eb214..6d59823 100644
--- a/src/app/remotes/user-roles-permissions/user-roles-permissions.component.html
+++ b/src/app/remotes/user-roles-permissions/user-roles-permissions.component.html
@@ -30,7 +30,7 @@
       #permissionTable
       [columns]="columns"
       [value]="items"
-      styleClass="p-datatable-striped user-roles-and-permissions px-2 sm:px-3"
+      styleClass="p-datatable-striped user-roles-and-permissions"
       [autoLayout]="true"
       [globalFilterFields]="['productName', 'role', 'resource', 'action']"
       [paginator]="true"
diff --git a/src/app/remotes/user-roles-permissions/user-roles-permissions.component.scss b/src/app/remotes/user-roles-permissions/user-roles-permissions.component.scss
index 01d473e..33e75cb 100644
--- a/src/app/remotes/user-roles-permissions/user-roles-permissions.component.scss
+++ b/src/app/remotes/user-roles-permissions/user-roles-permissions.component.scss
@@ -24,12 +24,6 @@
     font-size: var(--dialog-header-font-size);
   }
 
-  .correct-ocx-interactive-data-view > ocx-interactive-data-view > div {
-    padding: 0 0 0.5rem 0 !important;
-    &.surface-border {
-      border-bottom: var(--table-header-border) !important;
-    }
-  }
   // reduce on all panels
   .p-tabview .p-tabview-panels {
     padding: 0;