From 415de4d6e65c30f8c038aa708d739153271fa5f9 Mon Sep 17 00:00:00 2001
From: Glint Dev <dev@glint.local>
Date: Wed, 22 Jul 2026 14:48:53 +0300
Subject: [PATCH] demo: restructure log header outside scrollable (always
 visible), remove sticky references, add Iced limitation note

---
 examples/demo/app.gltm    | 14 ++++++++------
 examples/demo/styles.glts |  4 ++++
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/examples/demo/app.gltm b/examples/demo/app.gltm
index d2518f6..bf223f2 100644
--- a/examples/demo/app.gltm
+++ b/examples/demo/app.gltm
@@ -2,8 +2,10 @@
 // Glint — Full Feature Demonstration
 // ============================================================================
 // Showcases: @global, @singleton, !rhei:, @component, @if/@else, @each,
-// @on click, variable binding, positioning (fixed, absolute, sticky),
+// @on click, variable binding, positioning (fixed, absolute),
 // typography, box model, opacity, overflow, grid layout, style inheritance.
+// Note: true CSS position:sticky requires scroll-tracking not exposed by Iced.
+// "Always-visible header above scrollable content" pattern used instead.
 // ============================================================================
 
 @version 1
@@ -64,7 +66,7 @@
 // ── 3. Layout ────────────────────────────────────────────────────────────────
 Window(title=$title) {
 
-    // ── Header (stays at top, body scrolls beneath) ──────────────────────────
+    // ── Header (always visible; body scrolls beneath — closest to sticky in Iced) ─
     Panel(class="header") {
         Panel(class="header-inner") {
             Icon "◇"
@@ -197,13 +199,13 @@ Window(title=$title) {
                 Text(class="gauge-label") "* Opacity depends on Iced widget support — works on containers, not on text"
             }
 
-            // Panel: Scroll + Sticky
+            // Panel: Scrollable Log with always-visible header
             Panel(class="card") {
                 Header "Scrollable Log"
+                Panel(class="log-header") {
+                        Text "Event Log (always visible — above scrollable area)"
+                }
                 Panel(class="log") {
-                    Panel(class="log-header") {
-                        Text "Event Log (sticky header)"
-                    }
                     Text "Init: system boot"
                     Text "Info: all modules OK"
                     Text "Warn: CPU at $cpu%"
diff --git a/examples/demo/styles.glts b/examples/demo/styles.glts
index e7f2923..8dc6972 100644
--- a/examples/demo/styles.glts
+++ b/examples/demo/styles.glts
@@ -379,6 +379,10 @@ Slider {
     width: fill
 }
 
+// Note: position:sticky is not supported by Iced. "Always visible header above
+// scrollable content" is the working pattern.
+// ═══════════════════════════════════════════════════════════════════════════════
+
 // ── Style Inheritance ────────────────────────────────────────────────────────
 .inherit {
     background: #f0ece6