From 9c2942c333b1899b24bf0d7c852e4127814eaf47 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Wed, 14 Jul 2021 05:31:58 -0400
Subject: [PATCH] Fix `.TableHead.sticky` in for details panels (#3331)

* Fix .TableHead.sticky in for details panels

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Fine-tune TableHead styling in PodDetailsList

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/+nodes/node-details-resources.tsx    | 2 +-
 .../components/+workloads-pods/pod-details-list.scss         | 4 ++++
 src/renderer/components/table/table-head.scss                | 5 +++--
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/+nodes/node-details-resources.tsx b/src/renderer/components/+nodes/node-details-resources.tsx
index df613cf436..636a3f55f0 100644
--- a/src/renderer/components/+nodes/node-details-resources.tsx
+++ b/src/renderer/components/+nodes/node-details-resources.tsx
@@ -54,7 +54,7 @@ export class NodeDetailsResources extends React.Component<Props> {
           selectable
           scrollable={false}
         >
-          <TableHead>
+          <TableHead sticky={false}>
             <TableCell className="cpu">CPU</TableCell>
             <TableCell className="memory">Memory</TableCell>
             <TableCell className="ephemeral-storage">Ephemeral Storage</TableCell>
diff --git a/src/renderer/components/+workloads-pods/pod-details-list.scss b/src/renderer/components/+workloads-pods/pod-details-list.scss
index 05dd787a2c..04ccd2d05e 100644
--- a/src/renderer/components/+workloads-pods/pod-details-list.scss
+++ b/src/renderer/components/+workloads-pods/pod-details-list.scss
@@ -28,6 +28,10 @@
     &.virtual {
       height: 500px;
     }
+
+    .TableHead.sticky {
+      top: calc(var(--spacing) * -1);
+    }
   }
 
   .TableCell {
diff --git a/src/renderer/components/table/table-head.scss b/src/renderer/components/table/table-head.scss
index 4e194b2708..efa0bdb9b9 100644
--- a/src/renderer/components/table/table-head.scss
+++ b/src/renderer/components/table/table-head.scss
@@ -38,7 +38,7 @@
     position: -webkit-sticky; // safari
     position: sticky;
     z-index: 1;
-    top: 0; // turn on sticky behaviour
+    top: 0;
   }
 
   &.nowrap {
@@ -48,6 +48,7 @@
   .TableCell {
     display: flex;
     align-items: center;
+    word-break: normal;
 
     &.checkbox {
       > .Checkbox {
@@ -55,4 +56,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}