Fix: [Regions] improve overlapping content (#3373)

* Fix: [Regions] improve overlapping content

* Refactor

Author: katspaugh

src/plugins/regions.ts

@@ -294,6 +294,7 @@ class SingleRegion extends EventEmitter<RegionEvents> {
       this.content = document.createElement('div')
       const isMarker = this.start === this.end
       this.content.style.padding = `0.2em ${isMarker ? 0.2 : 0.4}em`
+      this.content.style.display = 'inline-block'
       this.content.textContent = content
     } else {
       this.content = content
@@ -428,17 +429,18 @@ class RegionsPlugin extends BasePlugin<RegionsPluginEvents, RegionsPluginOptions
     // Check that the label doesn't overlap with other labels
     // If it does, push it down until it doesn't
     const div = region.content as HTMLElement
-    const labelLeft = div.getBoundingClientRect().left
-    const labelWidth = region.element.scrollWidth
+    const box = div.getBoundingClientRect()
 
     const overlap = this.regions
-      .filter((reg) => {
-        if (reg === region || !reg.content) return false
-        const left = reg.content.getBoundingClientRect().left
-        const width = reg.element.scrollWidth
-        return labelLeft < left + width && left < labelLeft + labelWidth
+      .map((reg) => {
+        if (reg === region || !reg.content) return 0
+
+        const otherBox = reg.content.getBoundingClientRect()
+        if (box.left < otherBox.left + otherBox.width && otherBox.left < box.left + box.width) {
+          return otherBox.height
+        }
+        return 0
       })
-      .map((reg) => reg.content?.getBoundingClientRect().height || 0)
       .reduce((sum, val) => sum + val, 0)
 
     div.style.marginTop = `${overlap}px`