Merge pull request #784 from iqb-berlin/fix-gm-col

GM: add sticky to sticky header
iqb-berlin · Jan 31, 2025 · d975b19 · d975b19
2 parents 3ab6629 + d93c320
commit d975b19
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 31 deletions.
diff --git a/frontend/src/app/group-monitor/group-monitor.component.css b/frontend/src/app/group-monitor/group-monitor.component.css
@@ -1,33 +1,12 @@
 .adminbackground {
-    padding-top: 0;
+  padding-top: 0;
 }
 
 mat-sidenav {
-    width: 350px;
-    min-width: 350px;
+  width: 350px;
+  min-width: 350px;
 }
 
-.test-session-table {
-  border-collapse: collapse;
-  display: table;
-  width: 100%;
-}
-
-.test-session-table thead tr td {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  background: rgba(255, 255, 255, 0.8);
-}
-
-.test-session-table td {
-  padding-top: 15px;
-  margin-right: 1em;
-}
-
-.test-session-table td[mat-sort-header="_checked"] {
-  padding-left: 5px;
-}
 
 .pending {
   opacity: 0.5;
@@ -67,7 +46,7 @@ mat-sidenav {
 .connection-status.polling-fetch,
 .connection-status.polling-sleep {
   position: relative;
-  background-image: linear-gradient(90deg, rgba(0,146,0,1) 0%, rgba(0,199,0,1) 100%, rgba(0,146,0,1) 200%);
+  background-image: linear-gradient(90deg, rgba(0, 146, 0, 1) 0%, rgba(0, 199, 0, 1) 100%, rgba(0, 146, 0, 1) 200%);
   background-repeat: repeat-x;
   background-position: 0;
   animation-name: move-gradient;
@@ -86,13 +65,13 @@ mat-sidenav {
 
 @keyframes pulse {
   0% {
-    background: rgba(0,199,0,1);
+    background: rgba(0, 199, 0, 1);
   }
   50% {
-    background: rgba(0,146,0,1);
+    background: rgba(0, 146, 0, 1);
   }
   100% {
-    background: rgba(0,199,0,1);
+    background: rgba(0, 199, 0, 1);
   }
 }
 
@@ -153,7 +132,7 @@ mat-sidenav {
 }
 
 mat-sidenav {
-    width: 350px;
+  width: 350px;
 }
 
 #message-panel alert:first-of-type {
@@ -209,4 +188,39 @@ mat-sidenav {
 
 .menu-filter-label {
   word-break: break-word;
-}
+}
+
+.test-session-table-wrapper {
+  overflow: auto;
+  max-width: 100%;
+  height: 80vh;
+}
+
+.test-session-table {
+  border-collapse: collapse;
+  display: table;
+  width: 100%;
+
+  thead tr td {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background: white;
+    padding-top: 15px;
+    padding-bottom: 10px;
+  }
+
+  td {
+    padding-left: 1em;
+  }
+
+  td[mat-sort-header="_checked"] {
+     padding-left: 5px;
+     position: sticky;
+     left: 0;
+     z-index: 3;
+     background: white;
+   }
+
+}
+
diff --git a/frontend/src/app/group-monitor/test-session/test-session.component.css b/frontend/src/app/group-monitor/test-session/test-session.component.css
@@ -28,6 +28,10 @@ td:last-child {
 
 td.selected {
   padding-left: 5px;
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  background: white;
 }
 
 td:last-child {
@@ -214,7 +218,7 @@ h2 {
 .unit-badge.danger {
   color: #821123;
 }
+
 .unit-badge.success {
   color: #b2ff59
 }
-