@bobfrankston/rmfmail 1.1.157 → 1.1.158

package/client/styles/components.css

@@ -2585,6 +2585,21 @@ body.calendar-sidebar-on .calendar-sidebar { display: flex; }
    the threshold (the indicator line) and release to fire a sync — same
    action as F5 / btn-sync. The indicator translates with the pull and
    rotates the chevron when you cross the threshold. */
+/* Pull-to-refresh indicator. Two visual states:
+ *
+ *   1. DRAGGING (user is pulling down):
+ *      Full 60-px banner with chevron + "Pull to refresh" / "Release to
+ *      refresh". This is fine — it only exists during the gesture, which
+ *      the user initiated; it'll be gone in a second.
+ *
+ *   2. REFRESHING (sync in flight):
+ *      A thin 3-px indeterminate progress bar at the top edge — no
+ *      content shift, no text overlap. Auto-sync also runs in the
+ *      background (60 s on Android, IDLE on desktop) so the banner is
+ *      mostly redundant confirmation; the thin bar carries enough signal
+ *      ("yes, your gesture fired a sync") without taking 60 px of the
+ *      list. Bob 2026-05-26: "I still want a less intrusive refreshing".
+ */
 .ptr-indicator {
     position: absolute;
     top: 0; left: 0; right: 0;
@@ -2601,12 +2616,35 @@ body.calendar-sidebar-on .calendar-sidebar { display: flex; }
 }
 .ptr-indicator.dragging { transition: none; }
 .ptr-indicator.armed .ptr-chev { transform: rotate(180deg); }
-/* While refreshing, push the message list down so the 60-px indicator
- * sits ABOVE the first rows instead of overlapping them (Bob 2026-05-25
- * "refreshing on the top covering text"). 120 ms ease matches the
- * indicator's own slide so the two move together. */
-.ptr-indicator.refreshing + #ml-body { margin-top: 60px; transition: margin-top 120ms ease-out; }
-#ml-body { transition: margin-top 120ms ease-out; }
+/* Refreshing state: collapse the banner to a 3-px progress bar. No
+ * background, no banner height — just a thin indeterminate stripe so the
+ * message list stays in place. transform override beats the inline
+ * `translateY(calc(-100% + 60px))` the JS sets when armed; we keep top:0
+ * by overriding to translateY(0). */
+.ptr-indicator.refreshing {
+    height: 3px;
+    transform: translateY(0) !important;
+    background: transparent;
+    overflow: hidden;
+}
+.ptr-indicator.refreshing .ptr-chev,
+.ptr-indicator.refreshing .ptr-label { display: none; }
+.ptr-indicator.refreshing::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg,
+        transparent 0%,
+        var(--color-brand-dark, #2563eb) 50%,
+        transparent 100%);
+    background-size: 40% 100%;
+    background-repeat: no-repeat;
+    animation: ptr-indeterminate 1.1s linear infinite;
+}
+@keyframes ptr-indeterminate {
+    0%   { background-position: -40% 0; }
+    100% { background-position: 140% 0; }
+}
 .ptr-indicator.refreshing .ptr-chev {
     border-top-color: var(--color-brand-dark);
     border-radius: 50%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/rmfmail",
-  "version": "1.1.157",
+  "version": "1.1.158",
   "description": "Local-first email client with IMAP sync and standalone native app",
   "type": "module",
   "main": "bin/mailx.js",