studio-engine 0.52.2 → 0.52.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0b252a824ebae2c1a14b0efb4a89a056207f11550c6f21585d290b5469960134
-  data.tar.gz: d45781ea692d918b89770e19675af88f68fb717f8906dc525ead01aefff02836
+  metadata.gz: b1964a19e1e50b6a7ed315212d926a3c02dc63559927a7976a454215b655dc11
+  data.tar.gz: a6fba155e470f8b15ef0b9125920397a51f07a98d34b3f3f4ad5b238a1308d92
 SHA512:
-  metadata.gz: 12b68644186bbfd48b52d4ca073f305b04367538acea66b480e1313cfead58053c0abe3d2f2d49318728d0a99470df3d74f36e784fba5f09cdc926f0c68dd3cf
-  data.tar.gz: 06a8baea9fa0164bf7cff3b823148d4c90f349b89949cedc0d3a8c6d165bf3c95314dd4eb0fe1929638c9434426618d076bc9e983d80cbff4778b988a1caf6ae
+  metadata.gz: 46f6bbc8dbe8350a4b6697a2af4fd25dc13e22d9f886e8912f07f27adbf605adb708a70e9ac56778819efad2fff619485dbdc5b1f9fa1905226a3c2c47e29b2d
+  data.tar.gz: d4d7d64b08d2f60871d3828ad5f261aa9cba51d1e79e12024677bd84c22b2f3de2dee4195a17501082db8c68f65bdd0c0bc39d3db88dbab7b585b62dcbe74f94

data/CHANGELOG.md

@@ -4,6 +4,29 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+### Fixed
+
+- **The birthday calendar measures itself instead of guessing, so a flipped
+  popover stays attached to its field.** `place()` used a hardcoded
+  `estimatedHeight = 340` for both the flip DECISION and the flipped COORDINATE.
+  The real popover is about 245px, so whenever the field sat near the bottom of
+  the viewport the calendar opened roughly 95px above where it belonged — visibly
+  detached, and jumping on every scroll, because scroll re-runs the same
+  arithmetic.
+
+  It now reads the popover's own `offsetHeight` through an `x-ref`, with the
+  constant surviving only as the fallback for the first call before the element
+  is shown. `toggle()` places twice: once so it never appears at 0,0 for a frame,
+  then again in `$nextTick` — the call that can actually measure, since
+  `offsetHeight` is 0 while `x-show` still has it hidden.
+
+  **No earlier spec had ever run the flip branch.** The lab's field sits near the
+  top with room below, so every placement assertion exercised the below-branch
+  only, and "it fits on screen" cannot catch this — a popover 95px too high still
+  fits. The new spec forces the flip, asserts the flip actually happened, and then
+  asserts the popover's bottom edge sits against the trigger's top edge.
+
+
 ### Changed
 
 - **The edit page's avatar is now the control; its corner badge is gone.**

data/app/views/studio/profiles/_birthday_fields.html.erb

@@ -66,6 +66,7 @@
       </button>
 
       <div x-show="open" x-cloak
+           x-ref="popover"
            @click.outside="open = false"
            @keydown.escape.window="open = false"
            @scroll.window="place()" @resize.window="place()"

data/app/views/studio/profiles/_birthday_picker_script.html.erb

@@ -117,27 +117,50 @@
 
       toggle() {
         this.open = !this.open;
-        if (this.open) {
-          this.syncViewFromValue();
-          this.place();
-        }
+        if (!this.open) return;
+
+        this.syncViewFromValue();
+
+        // Placed twice, deliberately. The first call stops the popover appearing
+        // at 0,0 for a frame; the second is the one that can MEASURE, because
+        // offsetHeight is 0 while x-show still has the element hidden.
+        this.place();
+        this.$nextTick(function () { this.place(); }.bind(this));
       },
 
       // Placed from the trigger's rect because the popover is fixed. Flips above
       // the trigger when there is not room below, so it never opens off-screen on
       // a short viewport.
+      //
+      // THE HEIGHT IS MEASURED, NOT GUESSED, and that distinction is the bug the
+      // operator reported. This used a hardcoded `estimatedHeight = 340` for both
+      // the decision AND the flipped coordinate. The real popover is about 245px,
+      // so a flip landed ~95px too high and the calendar floated visibly detached
+      // from its field — and since scroll re-runs this, it kept jumping. The
+      // arithmetic was legible in the screenshot: trigger at 640, popover at 300,
+      // and 640 - 340 - 4 = 316.
+      //
+      // The element is rendered under x-show (display is toggled, it stays in the
+      // DOM), so offsetHeight is readable as soon as it is shown. The constant
+      // survives only as the fallback for the first call, before the ref exists.
       place() {
         var el = this.$refs.trigger;
         if (!el) return;
+
         var r = el.getBoundingClientRect();
-        var estimatedHeight = 340;
+        var popover = this.$refs.popover;
+        var height = (popover && popover.offsetHeight) || 340;
+        var GAP = 4;
         var below = window.innerHeight - r.bottom;
 
         this.left = r.left;
         this.width = r.width;
-        this.top = below < estimatedHeight && r.top > estimatedHeight
-          ? r.top - estimatedHeight - 4
-          : r.bottom + 4;
+
+        // Flip only when there is room ABOVE to flip into. Falling back to
+        // below-placement when neither fits keeps the popover attached to its
+        // field rather than pinned to the top of the viewport.
+        var flip = below < height + GAP && r.top > height + GAP;
+        this.top = flip ? r.top - height - GAP : r.bottom + GAP;
       }
     };
   };

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.52.2"
+  VERSION = "0.52.3"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.52.2
+  version: 0.52.3
 platform: ruby
 authors:
 - Alex McRitchie