From 634dfc69f3b6ac43ea6db1d9c764fddebeb767fd Mon Sep 17 00:00:00 2001
From: Ornanovitch <34077099+Ornanovitch@users.noreply.github.com>
Date: Sun, 15 Aug 2021 01:21:08 +0200
Subject: [PATCH] Permission Grid: stick the headers to handle a lot of tags
 (#2887)

* sticky thead th & tbody th, adapt PermissionPage and PermissionGrid layout

* adjust height size

* cleanup

* cleanup with some SychO9's recommendation

* remove the `thead th` `first-child` "protection"
---
 js/src/admin/components/PermissionGrid.js |  2 +-
 less/admin/PermissionsPage.less           | 26 ++++++++++++++++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/js/src/admin/components/PermissionGrid.js b/js/src/admin/components/PermissionGrid.js
index 5391f309e..b4a2a330f 100644
--- a/js/src/admin/components/PermissionGrid.js
+++ b/js/src/admin/components/PermissionGrid.js
@@ -17,7 +17,7 @@ export default class PermissionGrid extends Component {
       <table className="PermissionGrid">
         <thead>
           <tr>
-            <td></td>
+            <th></th>
             {scopes.map((scope) => (
               <th>
                 {scope.label}{' '}
diff --git a/less/admin/PermissionsPage.less b/less/admin/PermissionsPage.less
index c34ee0390..33e6ec493 100644
--- a/less/admin/PermissionsPage.less
+++ b/less/admin/PermissionsPage.less
@@ -34,8 +34,9 @@
 
 
 .PermissionsPage-permissions {
-  padding: 20px 0 200px;
+  margin: 20px 0 30px;
   overflow-x: auto;
+  max-height: 75vh;
 }
 
 .PermissionGrid {
@@ -49,11 +50,23 @@
     color: @muted-color;
   }
   thead th {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    padding-bottom: 10px;
     text-transform: uppercase;
     font-weight: bold;
     font-size: 12px;
     color: @muted-color;
+    background: @body-bg;
     min-width: 140px;
+    z-index: 1;
+
+    &:first-child {
+      left: 0;
+      z-index: 3;
+      background: @body-bg;
+    }
 
     &:not(:hover) .PermissionGrid-removeScope {
       display: none;
@@ -61,7 +74,12 @@
   }
   tbody {
     th {
+      position: -webkit-sticky;
+      position: sticky;
+      left: 0;
       padding-right: 50px;
+      z-index: 2;
+      background: inherit;
 
       .icon {
         margin-right: 5px;
@@ -114,17 +132,23 @@
   }
 }
 .PermissionGrid-section {
+  background: @body-bg;
+
   td, th {
     padding-top: 10px;
   }
 }
 .PermissionGrid-child {
+  background: @body-bg;
+
   td, th {
     position: relative;
+    z-index: 0;
   }
   th {
     font-weight: normal;
   }
+
   &:hover {
     background: lighten(@control-bg, 3%);
   }