Fix overlay totoz positioning

nud · nud · commit 8c2e60d21528 · 2023-08-19T21:11:44.000+02:00
Positioning was previously using the jQuery offset() method to compute
the position. This method returns the absolute position of the element
relative to the whole document, but the values are then used to set the
absolute position (top and left CSS properties) of the totoz element.
These properties apply based on the closest positioned parent, which in
this case is the &lt;body&gt; element.

Due to this, when the document is larger than the max-width of the
&lt;body&gt; element (150ex) the overlay image was being pushed further right
by half the difference. For instance, if the window is 1600px wide, and
the body reaches its max width at 1213px in my case, the overlay is
being displayed (1600-1213)/2 = 193px to the right of the intended
position.

We fix this issue by using the jQuery position() instead, which
according to the documentation returns the absolute position of the
element relative to the offset parent, in this case the &lt;body&gt; element.
We also explicitly position the totoz below the [:...] anchor.
diff --git a/app/assets/javascripts/chat.coffee b/app/assets/javascripts/chat.coffee
@@ -144,9 +144,9 @@ class Chat
               .css(display: "none", position: "absolute")
               .append("<img src=\"#{@totoz_url}#{totozName}\"/>")
       @totoz.append totoz
-    offset = $(event.target).offset()
-    [x, y] = [offset.left, offset.top]
-    totoz.css "z-index": "15", display: "block", top: y + 20, left: x + 20
+    position = $(event.target).position()
+    [x, y] = [position.left, position.top + event.target.offsetHeight]
+    totoz.css "z-index": "15", display: "block", top: y + 5, left: x + 5
 
   destroyTotoz: (event) =>
     totozId = encodeURIComponent(event.target.getAttribute("data-totoz-name")).replace(/[%']/g, "")
