diff --git a/js/src/admin/components/UserListPage.tsx b/js/src/admin/components/UserListPage.tsx
index e49a84dc6..6665ccbb0 100644
--- a/js/src/admin/components/UserListPage.tsx
+++ b/js/src/admin/components/UserListPage.tsx
@@ -123,7 +123,7 @@ export default class UserListPage extends AdminPage {
 
             return (
               <div
-                class={classList(['UserListPage-grid--rowItem', rowIndex % 2 > 0 && 'UserListPage-grid--shadedRow'])}
+                class={classList(['UserListPage-grid-rowItem', rowIndex % 2 > 0 && 'UserListPage-grid-rowItem--shaded'])}
                 data-user-id={user.id()}
                 data-column-name={col.itemName}
                 aria-colindex={colIndex + 1}
diff --git a/less/admin/UsersListPage.less b/less/admin/UsersListPage.less
index d9d2b26d4..9ba0d7452 100644
--- a/less/admin/UsersListPage.less
+++ b/less/admin/UsersListPage.less
@@ -48,7 +48,7 @@
       background: @control-bg;
     }
 
-    &--rowItem {
+    &-rowItem {
       padding: 4px 16px;
       display: flex;
       align-items: center;
@@ -57,13 +57,13 @@
         padding: 0;
         position: relative;
       }
-    }
 
-    &--shadedRow {
-      background: darken(@body-bg, 3%);
+      &--shaded {
+        background: darken(@body-bg, 3%);
 
-      & when (@config-dark-mode = true) {
-        background: lighten(@body-bg, 5%);
+        & when (@config-dark-mode = true) {
+          background: lighten(@body-bg, 5%);
+        }
       }
     }
   }