Developer Interface editing breaks (cursor loose sync with text area)

[David405]

• The container is out of place
• The textarea is completely out of sync with the pre element
• Some components of the page are lost in the left margin

Everything seems to work fine in Chromium browsers such as Chrome, Edge etc but I observed the above errors in Firefox

[Bill-Kunj]

This happens on chrome too.
Steps to reproduce:

1. select an action from the menu.
2. select with your mouse starting from somewhere above and outside the code editor to somewhere in the web page's scrollbar to the right of the code editor.
3. You should see the web page scroll horizontally.
4. Using horizontal scroll bar, scroll the web page all the way back to the left.
5. note the 'clipping' of the web page on the left.

This is the result of the <textarea> going beyond the right-hand side of the <pre><code>.
The <textarea> has a left margin of 3.8em so the overlapping with the <code> is correct. 3.8em is the width of the line-number <span>.
However, the margin moves the right-hand side of the <textarea> beyond the end of the<pre><code> (and possibly past the left side of the entire web page?), resulting in this behavior.

[David405]

Interesting, I tried simulating the behavior in chrome but couldn't get it to work

[jimscarver]

this code reliably causes the error

new tom, alice, bob in {
  // Start the game by sending a message to Alice
  alice!("How to program: Change stuff and see what happens.")
  |
  
  // Concurrently, Alice listens for the message
  for (message <- alice) {
    
    // When she receives the message she'll pass it on to Bob
    bob!("Message to bob from Alice")
  }
  |
  
  // Concurrently, Bob will listens for the message
  for (message <- bob) {
    // Bob is the last player, so he'll announce the message
    tom!( "This is Tom's message")
 |
    alice!(*message)
  }
  |
  for (message <- alice)
  {
    tom!(*message ++ " from alice via tom")
  }
}