From 129b35e47078c61e3030eaae493d09b70e87f0fc Mon Sep 17 00:00:00 2001
From: Manjunath Paparaju <manjunath@halfpixel.ai>
Date: Fri, 13 Nov 2026 16:00:22 +0530
Subject: [PATCH] Show the rail highlight at icon size when a first panel opens

Opening a panel from the labelled rail folds its pills to icons over a few
frames, and the highlight faded in at a pill's width and then shrank, as
did the open button's own fill. The highlight now appears only once the
open button is an icon again (square), its size changes at once rather
than easing, and the open button carries no fill of its own.

Co-authored-by: Sameh Khamis <sameh@halfpixel.ai>
---
 src/ui/railEdgeScroll.js     | 5 +++++
 src/ui/styles/rail-edge.css  | 5 +++--
 src/ui/styles/rail-split.css | 8 +++++---
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/ui/railEdgeScroll.js b/src/ui/railEdgeScroll.js
index 548f79668..2a7a606c6 100644
--- a/src/ui/railEdgeScroll.js
+++ b/src/ui/railEdgeScroll.js
@@ -83,6 +83,11 @@ export function installRailEdgeScroll(doc = globalThis.document) {
     const railBox = rail.getBoundingClientRect();
     const box = on.getBoundingClientRect();
     const shown = gliding.has(rail);
+    // A rail opening its first panel folds its labelled pills to icons, the
+    // buttons shrinking over a few frames; the highlight waits until the open
+    // button is an icon again (square) rather than fading in at a pill's
+    // width and then shrinking.
+    if (!shown && (rail.classList.contains('ui-rail--expanded') || box.width > box.height + 2)) return;
     // Appearing from nothing: jump into place, then fade in.
     rail.classList.toggle('ui-rail--glide-jump', !shown);
     rail.style.setProperty('--rail-glide-x', `${box.left - railBox.left - rail.clientLeft}px`);
diff --git a/src/ui/styles/rail-edge.css b/src/ui/styles/rail-edge.css
index e1af40be4..cbcdb0eda 100644
--- a/src/ui/styles/rail-edge.css
+++ b/src/ui/styles/rail-edge.css
@@ -31,10 +31,11 @@
   opacity: 0;
   pointer-events: none;
   transform: translate(var(--rail-glide-x, 0), var(--rail-glide-y, 0));
+  /* Only the position slides. The size follows at once: it changes only
+     when the rail changes shape (its labelled pills folding to icons as a
+     panel opens), and a size easing there reads as a stretch. */
   transition:
     transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
-    width 380ms cubic-bezier(0.22, 1, 0.36, 1),
-    height 380ms cubic-bezier(0.22, 1, 0.36, 1),
     border-radius var(--transition-fast),
     opacity 200ms ease;
 }
diff --git a/src/ui/styles/rail-split.css b/src/ui/styles/rail-split.css
index 22313cc7b..f974b0cbc 100644
--- a/src/ui/styles/rail-split.css
+++ b/src/ui/styles/rail-split.css
@@ -148,14 +148,16 @@
 }
 
 /* The open item takes the accent colour; its highlight is the rail's shared
-   one, which slides to it. Without that highlight the button carries its own. */
+   one, which slides to it. The button carries no fill of its own: as a rail
+   folds its labelled pills to icons, a fill on the shrinking button would
+   read as the highlight stretching. */
 :is(.gev-panel-rail--left, .gev-panel-rail--right) .ui-rail__item.ui-rail__item--on {
   color: #00d4ff !important;
 }
 
 :is(.gev-panel-rail--left, .gev-panel-rail--right) .ui-rail:not(.ui-rail--glide) .ui-rail__item.ui-rail__item--on {
-  background: rgba(0, 212, 255, 0.15);
-  border-color: rgba(0, 212, 255, 0.15);
+  background: none;
+  border-color: transparent;
 }
 
 :is(.gev-panel-rail--left, .gev-panel-rail--right) .ui-rail::before {