Improve shift list sticky nav style

shiftregister/app/templates/shiftlist.html

@@ -20,8 +20,8 @@
 {% endif %}
 {% if free_shifts %}
 <h3 class="title mb-0">Freie Schichten</h3>
-<div class="breadcrumb has-bullet-separator mb-0" style="background-color:var(--background);overflow-x:auto;padding:1em 0;position:sticky;top:0;z-index:42;">
+<div class="breadcrumb has-bullet-separator mb-0 sticky-nav">
-    <ul style="flex-wrap:nowrap;">
+    <ul class="is-flex-wrap-nowrap">
 {% for day in days %}
         <li><a href="#{{ day|date:"Y-m-d" }}">{{ day|date:"l" }}</a></li>
 {% endfor %}
@@ -29,7 +29,8 @@
     </ul>
 </div>
 {% for shifts in free_shifts %}
-<h5 class="subtitle" id="{{ shifts.0.start_at|date:"Y-m-d" }}">{{ shifts.0.start_at|date:"l" }}</h5>
+<span class="sticky-target" id="{{ shifts.0.start_at|date:"Y-m-d" }}"></span>
+<h5 class="subtitle">{{ shifts.0.start_at|date:"l" }}</h5>
 <div class="columns is-multiline">
 {% for shift in shifts %}
     {% include "partials/shift_listitem.html" %}

shiftregister/core/templates/base.html

@@ -27,6 +27,24 @@
         --background: #fff;
     }
 
+    .sticky-nav {
+        background-color: var(--background);
+        margin: 0 -0.75rem;
+        overflow-x: auto;
+        padding: 1em 0.75rem;
+        position: sticky;
+        top: 0;
+        z-index: 42;
+    }
+
+    .sticky-target {
+        display: block;
+        height: 0;
+        position: relative;
+        top: -3.5em;
+        width: 0;
+    }
+
     @media (prefers-color-scheme: dark) {
         :root {
             --background: #17181c;