From 28d2e8500b9b39f4f9c640460fff09233f20ff38 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 14 Jul 2021 10:20:37 +0300
Subject: [PATCH] Fine-tune TableHead styling in PodDetailsList

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/+nodes/node-details-resources.tsx     | 2 +-
 src/renderer/components/+workloads-pods/pod-details-list.scss | 4 ++++
 src/renderer/components/table/table-head.scss                 | 4 ++--
 3 files changed, 7 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 daba7b7039..efa0bdb9b9 100644
--- a/src/renderer/components/table/table-head.scss
+++ b/src/renderer/components/table/table-head.scss
@@ -38,8 +38,7 @@
     position: -webkit-sticky; // safari
     position: sticky;
     z-index: 1;
-    top: -24px; // turn on sticky behaviour
-    height: 48px;
+    top: 0;
   }
 
   &.nowrap {
@@ -49,6 +48,7 @@
   .TableCell {
     display: flex;
     align-items: center;
+    word-break: normal;
 
     &.checkbox {
       > .Checkbox {