Replace uk-sticky with CSS position: sticky on header

UIkit's uk-sticky initializer runs after DOM parse (deferred module script) and inserts a placeholder <div> to reserve space, causing a visible layout reflow/FOUC in production.

Replace the uk-sticky wrapper div with a CSS-only approach: apply position: sticky; top: 0; z-index: 980 to the <header> element via the .uf-sticky-header class. No JS DOM mutation occurs on init, eliminating the flicker entirely.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: lcharette

app/assets/theme.less

@@ -13,6 +13,16 @@
 @import 'css/sidebar.less';
 @import 'css/pager.less';
 
+/**
+ * Sticky header — replaces uk-sticky to avoid FOUC from JS-driven placeholder insertion.
+ * UIkit's z-index for sticky elements is 980; match it here.
+ */
+.uf-sticky-header {
+    position: sticky;
+    top: 0;
+    z-index: 980;
+}
+
 /**
  * Override Pink Cupcake default variables
  */

app/templates/partials/header.html.twig

@@ -1,24 +1,22 @@
-<header>
-    <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
-        <div class="uk-container uk-navbar-container uk-container-expand">
-            <nav class="uk-navbar" uk-navbar>
-                <div class="uk-navbar-left">
-                    <ul class="uk-navbar-nav uk-hidden@m">
-                        <li>
-                            <a href="#offcanvas-sidebar" uk-toggle class="uk-navbar-item">
-                                <i class="fa-solid fa-bars"></i>
-                            </a>
-                        </li>
-                    </ul>
-                    <!-- <a href="{{ urlFor('index', [], [], '/') }}" class="uk-navbar-item uk-logo">{{site.title}}</a> -->
-                    <a href="https://www.userfrosting.com" class="uk-navbar-item uk-logo">{{site.title}}</a>
-                </div>
-                <div class="uk-navbar-right uk-visible@m">
-                    <ul class="uk-navbar-nav">
-                        {% include "content/navigation/navbar.html.twig" %}
-                    </ul>
-                </div>
-            </nav>
-        </div>
+<header class="uf-sticky-header">
+    <div class="uk-container uk-navbar-container uk-container-expand">
+        <nav class="uk-navbar" uk-navbar>
+            <div class="uk-navbar-left">
+                <ul class="uk-navbar-nav uk-hidden@m">
+                    <li>
+                        <a href="#offcanvas-sidebar" uk-toggle class="uk-navbar-item">
+                            <i class="fa-solid fa-bars"></i>
+                        </a>
+                    </li>
+                </ul>
+                <!-- <a href="{{ urlFor('index', [], [], '/') }}" class="uk-navbar-item uk-logo">{{site.title}}</a> -->
+                <a href="https://www.userfrosting.com" class="uk-navbar-item uk-logo">{{site.title}}</a>
+            </div>
+            <div class="uk-navbar-right uk-visible@m">
+                <ul class="uk-navbar-nav">
+                    {% include "content/navigation/navbar.html.twig" %}
+                </ul>
+            </div>
+        </nav>
     </div>
 </header>