demo: layout fixes, sticky removal, style overrides, css-like rendering improvements

examples/demo/app.gltm

@@ -4,8 +4,7 @@
 // Showcases: @global, @singleton, !rhei:, @component, @if/@else, @each,
 // @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.
+// Note: position:sticky approximated via in-flow layout + overlay
 // ============================================================================
 
 @version 1
@@ -66,7 +65,7 @@
 // ── 3. Layout ────────────────────────────────────────────────────────────────
 Window(title=$title) {
 
-    // ── Header (always visible; body scrolls beneath — closest to sticky in Iced) ─
+    // ── Header (sticky — stays at top while body scrolls beneath) ─
     Panel(class="header") {
         Panel(class="header-inner") {
             Icon "◇"
@@ -76,8 +75,7 @@ Window(title=$title) {
         }
     }
 
-    // ── Scrollable body ─────────────────────────────────────────────────────
-    Panel(class="body-scroll") {
+    // ── Main body ────────────────────────────────────────────────────────────
     Panel(class="body") {
 
         // ── LEFT COLUMN ──────────────────────────────────────────────────────
@@ -199,13 +197,13 @@ Window(title=$title) {
                 Text(class="gauge-label") "* Opacity depends on Iced widget support — works on containers, not on text"
             }
 
-            // Panel: Scrollable Log with always-visible header
+            // Panel: Scrollable Log with sticky 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 — scroll below)"
+                    }
                     Text "Init: system boot"
                     Text "Info: all modules OK"
                     Text "Warn: CPU at $cpu%"
@@ -253,7 +251,6 @@ Window(title=$title) {
             }
         }
     }
-    }
 
     // ── Fixed Toast ──────────────────────────────────────────────────────────
     @if $notif {

examples/demo/styles.glts

@@ -45,8 +45,10 @@ Panel {
     direction: vertical
 }
 
-// ── Header ───────────────────────────────────────────────────────────────────
+// ── Header (sticky — sticks at top of Window when scrolled) ──────────────────
 .header {
+    position: sticky
+    top: 0
     background: $card
     padding: 8px 20px
     border-bottom: 1px solid $border
@@ -60,13 +62,6 @@ Panel {
 }
 
 // ── Layout ───────────────────────────────────────────────────────────────────
-.body-scroll {
-    overflow-y: auto
-    flex-grow: 1
-    padding: 0px
-    gap: 0px
-}
-
 .body {
     direction: horizontal
     padding: 12px
@@ -370,6 +365,8 @@ Slider {
 }
 
 .log-header {
+    position: sticky
+    top: 0
     background: $surface
     padding: 6px 10px
     border-radius: 4px
@@ -379,8 +376,7 @@ Slider {
     width: fill
 }
 
-// Note: position:sticky is not supported by Iced. "Always visible header above
-// scrollable content" is the working pattern.
+// Note: position:sticky approximated via in-flow spacer + overlay (no scroll-tracking)
 // ═══════════════════════════════════════════════════════════════════════════════
 
 // ── Style Inheritance ────────────────────────────────────────────────────────