From 85a06876cd8476ff70be8e42db4014da8885a512 Mon Sep 17 00:00:00 2001
From: Bruno Windels <274386+bwindels@users.noreply.github.com>
Date: Fri, 25 Nov 2022 16:47:00 +0100
Subject: [PATCH] make date header sticky with css

this has the limitation that it needs to have a fixed with
and an opaque background, but that's better than
not making it sticky for now.
---
 .../web/ui/css/themes/element/timeline.css    | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/platform/web/ui/css/themes/element/timeline.css b/src/platform/web/ui/css/themes/element/timeline.css
index 16597a7b..8645bc3f 100644
--- a/src/platform/web/ui/css/themes/element/timeline.css
+++ b/src/platform/web/ui/css/themes/element/timeline.css
@@ -424,9 +424,20 @@ only loads when the top comes into view*/
 }
 
 .DateHeader {
-    color: var(--light-text-color);
     font-weight: bold;
-    padding: 12px 4px;
-    text-align: center;
     font-size: 1.5rem;
-}
\ No newline at end of file
+    position: sticky;
+    top: 5px;
+}
+
+.DateHeader time {
+    margin: 0 auto;
+    padding: 12px 4px;
+    width: 250px;
+    padding: 12px;
+    display: block;
+    color: var(--light-text-color);
+    background-color: var(--background-color-primary);
+    border-radius: 8px;
+    text-align: center;
+  }
\ No newline at end of file