fix(image-editor): crop box reaches image edges; long URL no longer overflows header

- Measure the image via its layout box (offsetLeft/Top/Width/Height) instead of
  getBoundingClientRect()/scale. The stage's transform transition let a mid-flight
  measurement stick ~2% small, so the default crop box fell a few px short of the
  image edges; the layout box is transform-independent and always matches.
- Address-bar pills no longer shrink (flex: 0 0 auto) and the URL pill flexes from
  basis 0, so a long filter-chain URL truncates instead of pushing the zoom and
  undo/redo controls out of the header.

Author: oidacra

core-web/libs/image-editor/src/lib/components/dot-image-editor-address-bar/dot-image-editor-address-bar.component.scss

@@ -16,16 +16,21 @@
     display: flex;
     align-items: center;
     gap: 0.25rem;
+    // Pills keep their natural (content) width and never shrink, so the tool and the
+    // zoom/undo/redo controls always stay intact; only the URL pill flexes.
+    flex: 0 0 auto;
     min-width: 0;
     padding: 0.125rem;
     border-radius: 1000px;
     background-color: var(--surface-200, #e5e7eb);
 }
 
-// The URL pill grows to fill the row, pushing the tools pill hard to the left edge
-// and the zoom pill to the right edge; the URL truncates inside it.
+// The URL pill fills the free space between the tool and zoom pills. `flex-basis: 0`
+// (not `auto`) is key: the long, server-generated URL truncates inside the pill
+// instead of sizing it to the content and pushing the zoom/undo/redo controls out
+// of the header when more filters are appended.
 .address-bar__pill--url {
-    flex: 1 1 auto;
+    flex: 1 1 0;
     padding-right: 0.75rem;
 }
 

core-web/libs/image-editor/src/lib/components/dot-image-editor-canvas/dot-image-editor-canvas.component.ts

@@ -429,27 +429,27 @@ export class DotImageEditorCanvasComponent {
      * can position itself over the rendered pixels.
      */
     #measureImageRect(): void {
-        const stage = this.stage()?.nativeElement;
         const img = this.displayImg()?.nativeElement;
 
-        if (!stage || !img) {
+        if (!img) {
             return;
         }
 
-        // The stage carries the zoom as a CSS `transform: scale(...)`, so
-        // getBoundingClientRect returns painted (scaled) values. Divide back out so
-        // the rect is in the stage's logical CSS px — the same space the crop overlay
-        // (a child of the scaled stage) positions itself in. Without this the crop
-        // box drifts at any zoom other than 100%.
-        const scale = this.zoomLevel() / 100;
-        const stageBox = stage.getBoundingClientRect();
-        const imgBox = img.getBoundingClientRect();
-
+        // Measure the image's LAYOUT box (offset*) relative to the stage, not
+        // `getBoundingClientRect()/scale`. The stage carries the zoom as a CSS
+        // `transform: scale(...)` with a 150ms transition; a painted rect read
+        // mid-transition and divided by the final scale yields a slightly-wrong size
+        // that then sticks (ResizeObserver is layout-based, so it never fires again to
+        // correct it) — which left the default crop box a few px short of the image
+        // edges. `offset*` is the true pre-transform size in the stage's logical CSS
+        // px — the exact space the crop overlay positions itself in — so the box
+        // always matches the image at any zoom. (Its `offsetParent` is the
+        // position:relative stage.)
         this.imageRect.set({
-            x: (imgBox.left - stageBox.left) / scale,
-            y: (imgBox.top - stageBox.top) / scale,
-            width: imgBox.width / scale,
-            height: imgBox.height / scale
+            x: img.offsetLeft,
+            y: img.offsetTop,
+            width: img.offsetWidth,
+            height: img.offsetHeight
         });
     }