From 81b84cc4f02e9fb266fd37db550d0db3b5b3b036 Mon Sep 17 00:00:00 2001
From: ornanovitch <ornanovitch@felinn.org>
Date: Tue, 25 May 2021 09:20:01 +0200
Subject: [PATCH 1/6] sticky thead th & tbody th, adapt PermissionPage and
 PermissionGrid layout

---
 js/src/admin/components/PermissionGrid.js |  2 +-
 less/admin/PermissionsPage.less           | 27 ++++++++++++++++++++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/js/src/admin/components/PermissionGrid.js b/js/src/admin/components/PermissionGrid.js
index 5391f309e8..b4a2a330fd 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 c34ee0390e..d5d9939448 100644
--- a/less/admin/PermissionsPage.less
+++ b/less/admin/PermissionsPage.less
@@ -34,8 +34,9 @@
 
 
 .PermissionsPage-permissions {
-  padding: 20px 0 200px;
+  margin: 20px 0 200px;
   overflow-x: auto;
+  max-height: 100vh;
 }
 
 .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; /* for Safari */
+      position: sticky;
+      left: 0;
       padding-right: 50px;
+      z-index: 2;
+      background: inherit;
 
       .icon {
         margin-right: 5px;
@@ -125,6 +143,13 @@
   th {
     font-weight: normal;
   }
+
+  &:not(:hover) {
+    th {
+      background: @body-bg;
+    }
+  }
+
   &:hover {
     background: lighten(@control-bg, 3%);
   }

From e5b0ad29d5961df6405c66af54b02d228b56a924 Mon Sep 17 00:00:00 2001
From: ornanovitch <ornanovitch@felinn.org>
Date: Wed, 26 May 2021 09:43:44 +0200
Subject: [PATCH 2/6] adjust height size

---
 less/admin/PermissionsPage.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/less/admin/PermissionsPage.less b/less/admin/PermissionsPage.less
index d5d9939448..c34aaa1cf9 100644
--- a/less/admin/PermissionsPage.less
+++ b/less/admin/PermissionsPage.less
@@ -34,9 +34,9 @@
 
 
 .PermissionsPage-permissions {
-  margin: 20px 0 200px;
+  margin: 20px 0 30px;
   overflow-x: auto;
-  max-height: 100vh;
+  max-height: 75vh;
 }
 
 .PermissionGrid {

From 2aba87691bda24892aac598a2d3f84bbc86d3854 Mon Sep 17 00:00:00 2001
From: ornanovitch <ornanovitch@felinn.org>
Date: Thu, 27 May 2021 09:23:33 +0200
Subject: [PATCH 3/6] cleanup

---
 less/admin/PermissionsPage.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/less/admin/PermissionsPage.less b/less/admin/PermissionsPage.less
index c34aaa1cf9..c54d8879b7 100644
--- a/less/admin/PermissionsPage.less
+++ b/less/admin/PermissionsPage.less
@@ -74,7 +74,7 @@
   }
   tbody {
     th {
-      position: -webkit-sticky; /* for Safari */
+      position: -webkit-sticky;
       position: sticky;
       left: 0;
       padding-right: 50px;

From e0010155c3166e039e2430f0160cad5035338550 Mon Sep 17 00:00:00 2001
From: ornanovitch <ornano@felinn.org>
Date: Wed, 23 Jun 2021 08:35:56 +0200
Subject: [PATCH 4/6] cleanup with some SychO9's recommendation

---
 less/admin/PermissionsPage.less | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/less/admin/PermissionsPage.less b/less/admin/PermissionsPage.less
index c54d8879b7..33e6ec4934 100644
--- a/less/admin/PermissionsPage.less
+++ b/less/admin/PermissionsPage.less
@@ -132,24 +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;
   }
 
-  &:not(:hover) {
-    th {
-      background: @body-bg;
-    }
-  }
-
   &:hover {
     background: lighten(@control-bg, 3%);
   }

From 3eddb97323a2158e4d31ec58821e3bc8c679439e Mon Sep 17 00:00:00 2001
From: ornanovitch <ornano@felinn.org>
Date: Thu, 24 Jun 2021 09:14:04 +0200
Subject: [PATCH 5/6] remove the `thead th` `first-child` "protection"

---
 less/admin/PermissionsPage.less | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/less/admin/PermissionsPage.less b/less/admin/PermissionsPage.less
index 33e6ec4934..cceaeee5c7 100644
--- a/less/admin/PermissionsPage.less
+++ b/less/admin/PermissionsPage.less
@@ -62,12 +62,6 @@
     min-width: 140px;
     z-index: 1;
 
-    &:first-child {
-      left: 0;
-      z-index: 3;
-      background: @body-bg;
-    }
-
     &:not(:hover) .PermissionGrid-removeScope {
       display: none;
     }

From 0f867d48ca2c44d4a524ba6d75afa44bac735d83 Mon Sep 17 00:00:00 2001
From: ornanovitch <ornano@felinn.org>
Date: Fri, 25 Jun 2021 08:53:06 +0200
Subject: [PATCH 6/6] Revert "remove the `thead th` `first-child` "protection""

This reverts commit 3eddb97323a2158e4d31ec58821e3bc8c679439e.
---
 less/admin/PermissionsPage.less | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/less/admin/PermissionsPage.less b/less/admin/PermissionsPage.less
index cceaeee5c7..33e6ec4934 100644
--- a/less/admin/PermissionsPage.less
+++ b/less/admin/PermissionsPage.less
@@ -62,6 +62,12 @@
     min-width: 140px;
     z-index: 1;
 
+    &:first-child {
+      left: 0;
+      z-index: 3;
+      background: @body-bg;
+    }
+
     &:not(:hover) .PermissionGrid-removeScope {
       display: none;
     }