From 1a02c41059e7abefce02930bd22c4ad81e0d87ca Mon Sep 17 00:00:00 2001
From: Johannes Zillmann <jz@datameer.com>
Date: Sun, 7 Mar 2021 21:52:32 +0100
Subject: [PATCH] Cushion between control bar and item header

* Makes sure item rows not getting displayed above the sticky header nor does the header get cut off at it's top
---
 ui/src/components/Checkbox.svelte |  2 +-
 ui/src/components/Popup.svelte    |  2 +-
 ui/src/debug/ControlBar.svelte    | 13 +++----------
 ui/src/debug/ItemTable.svelte     |  4 ++--
 4 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/ui/src/components/Checkbox.svelte b/ui/src/components/Checkbox.svelte
index 0fe45f6..6e97ca3 100644
--- a/ui/src/components/Checkbox.svelte
+++ b/ui/src/components/Checkbox.svelte
@@ -6,7 +6,7 @@
 <input id="checkbox-{name}" type="checkbox" class="hidden" bind:checked={enabled} />
 <label
     for="checkbox-{name}"
-    class="py-0.5 px-1 border-t-2 border-b-2 border-transparent cursor-pointer select-none whitespace-nowrap">{name}</label>
+    class="px-1 border-t-2 border-b-2 border-transparent cursor-pointer select-none whitespace-nowrap">{name}</label>
 
 <style>
     input:not(:checked) + label:hover {
diff --git a/ui/src/components/Popup.svelte b/ui/src/components/Popup.svelte
index 6c07d0f..992b903 100644
--- a/ui/src/components/Popup.svelte
+++ b/ui/src/components/Popup.svelte
@@ -25,6 +25,6 @@
 
 <style>
     .popupContent :global(*) {
-        @apply z-20;
+        @apply z-30;
     }
 </style>
diff --git a/ui/src/debug/ControlBar.svelte b/ui/src/debug/ControlBar.svelte
index 036e9c1..c617fa2 100644
--- a/ui/src/debug/ControlBar.svelte
+++ b/ui/src/debug/ControlBar.svelte
@@ -34,7 +34,7 @@
     $: pageIsPinned = !isNaN(pinnedPage);
 </script>
 
-<div class="controls py-2">
+<div class="sticky top-0 pt-2 pb-1 z-20 bg-gray-50">
     <div class="flex items-center space-x-2">
         {#if pageIsPinned}
             <span on:click={() => (pinnedPage = undefined)} transition:slideH={{ duration: 180, easing: linear }}>
@@ -114,12 +114,5 @@
     </div>
 </div>
 
-<style>
-    .controls {
-        @apply bg-gray-50;
-        position: -webkit-sticky;
-        position: sticky;
-        top: 0;
-        z-index: 3;
-    }
-</style>
+<!-- Little cushion sitting between the control bar and the item header. Relevant is the z-index. Item headers should go over it, item rows under! -->
+<div class="sticky top-8 h-3 bg-gray-50" style="z-index:1" />
diff --git a/ui/src/debug/ItemTable.svelte b/ui/src/debug/ItemTable.svelte
index 1bf8bbf..764d4a4 100644
--- a/ui/src/debug/ItemTable.svelte
+++ b/ui/src/debug/ItemTable.svelte
@@ -153,7 +153,7 @@
         @apply whitespace-nowrap;
         position: -webkit-sticky;
         position: sticky;
-        top: 2.7em;
+        top: 2.4em;
         z-index: 2;
     }
 
@@ -161,7 +161,7 @@
         @apply px-1;
         position: -webkit-sticky;
         position: sticky;
-        top: 2.6em;
+        top: 2.4em;
         z-index: 2;
     }
     td:not(#page) {